*{box-sizing:border-box}
:root{
  --bg:#e8f4fd; --panel:#fff; --panel-alt:#fff;
  --text:#0f172a; --muted:#64748b; --border:#aaa;
  --brand:#b0d0d3; --brand-50:#e8edf9; --green:#e4f0d0;
  --radius:5px; --shadow-sm:0 1px 2px rgba(2,6,23,.05);
  --shadow-md:0 6px 16px rgba(2,6,23,.08),0 2px 4px rgba(2,6,23,.06);
  --u:.92;
  --rim-top:18px; --rim-right:14px; --rim-bottom:24px; --rim-left:14px;
  --oil-row-h:36px;
}

body {
  background-image: url('assets/bg-pattern2.jpg');
  background-repeat: repeat;
  background-size: auto;          /* oder: contain / 100px auto / etc. */
  background-attachment: fixed;   /* optional: fixiert beim Scrollen */
  background-color: #fafafa;      /* Fallback, falls Bild fehlt */
}

.popup-box {
  background: #FFFACD;              /* hellgelb */
  border: 2px solid #fffacd;        /* kräftig gelb als Rahmen */
  padding: 2rem;
  max-width: 500px;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* Popup Overlay */
.popup-overlay {
  position: fixed;          /* fix an den Viewport binden */
  top: 0;
  left: 0;
  width: 100vw;             /* volle Breite */
  height: 100vh;            /* volle Höhe */
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;            /* ganz oben über allem */
}

.popup-box p {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;
}

.popup-box p strong {
  color: #b30000;                   /* rotes "Disclaimer"-Label */
  font-size: 1.1rem;
}

.popup-box button {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background: #344a7f;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.popup-box button:hover {
  background: #2b3c66;
}

html,body{margin:0;padding:0;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
.topbar{position:sticky;top:0;z-index:20;height:50px;background:#fff;border-bottom:1px solid var(--border);display:flex;justify-content:center;align-items:center;box-shadow:var(--shadow-sm)}
.topbar img{height:80px}
.container{display:grid;gap:20px;padding:20px;grid-template-columns:repeat(12,1fr);max-width:1280px;margin:0 auto}
.panel{grid-column:span 12;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:18px 18px 16px;position:relative}
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 200px at -10% -10%,var(--panel-alt),transparent 60%);pointer-events:none;z-index:-1}
.panel h2{margin:0 0 14px;font-size:17px;display:flex;align-items:center;gap:10px}
.panel h2::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--brand);box-shadow:0 0 0 4px rgba(52,74,127,.10)}
@media(min-width:900px){.panel.half{grid-column:span 6}.preview-panel,.export-panel{grid-column:span 12}}
label{display:flex;flex-direction:column;gap:6px;font-size:14px}
input,select,textarea{font:inherit;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow-sm)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-50)}
.select{width:100%}

.grid.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid.two > label,.grid.two > .standalone{width:100%}
@media(max-width:979.98px){.grid.two{grid-template-columns:1fr}}

/* UFI inline */
.ufi-row{display:flex;gap:10px;align-items:end}
.ufi-inline{flex:1}
.btn.small{padding:10px 12px}

/* Shape-Chooser – stabil & gleich breit */
.shape-options{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;
}
.shape-btn{
  padding:0;border:0;background:transparent;cursor:pointer;width:100%; /* statt fixer 200px */
}
.shape-card{
  min-height:110px;max-height:150px;height:clamp(110px,12vw,150px);
  padding:14px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid var(--border);border-radius:12px;background:#fff;box-shadow:var(--shadow-sm);
  transition:border-color .15s,transform .08s, background .15s;
}
.shape-card:hover{transform:translateY(-1px)}
.shape-btn[aria-pressed="true"] .shape-card{border-color:var(--green);background:#ecfdf5}
.shape-card .shape-svg,.shape-card .shape-icon{
  display:block;margin:0 auto;max-width:80%;max-height:80%;width:auto;color:#777; /* graue Kontur */
}
.shape-card span{font-size:13px;color:#111827}
.shape-card.active .shape-icon{color:#32a852} /* falls Klasse genutzt wird */

/* Subheads & Maße */
.subhead{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.dims.even{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}

/* Vorschau-Bühne (immer quadratisch) */
#previewWrap{
  width:100%;min-height:600px;aspect-ratio:1/1;max-height:42vh;margin:0 auto;
  display:grid;place-items:center;padding:14px;
  background:repeating-conic-gradient(#f3f4f6 0% 25%,#ffffff 0% 50%) 50%/20px 20px;
  border:1px dashed var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);
}
.label{
  position:relative;
  display:block;
  background:#fff;
  color:#0f172a;
  border-radius:10px;
  box-shadow:var(--shadow-sm);
  width:min(500px,100%);
  max-height:min(500px,100%);
  height:auto;
  margin:0;
}
.label.square{border-radius:0}
.label.round{border-radius:50%;aspect-ratio:1/1}

/* Schriften knackig */
#label,.safe-inner{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
#label .k{max-width:100%;white-space:normal;word-break:break-word;overflow-wrap:anywhere;text-align:center;line-height:1.2;}
.select-target{will-change:transform}

/* Safe zone */
.safe-box{position:absolute;top:var(--rim-top);right:var(--rim-right);bottom:var(--rim-bottom);left:var(--rim-left)}
.safe-inner{position:relative;width:100%;height:100%;transform:scale(var(--g,1));transform-origin:top center}
.safe-inner.grid{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;height:100%;gap:0}

/* Blöcke */
.area,.label.round .area,.area.w-narrow,.area.w-medium,.area.w-wide,.area.w-full{width:100%}
.area{width:100%;display:flex;justify-content:center;align-items:center;margin:0}
.area:first-child{margin-top:0}
.label.round .area{width:80%}
.area.w-narrow{width:56%}.label.round .area.w-narrow{width:44%}
.area.w-medium{width:72%}.label.round .area.w-medium{width:62%}
.area.w-wide{width:86%}.label.round .area.w-wide{width:76%}
.area.w-full{width:100%}.label.round .area.w-full{width:100%}
.area .k{white-space:normal;word-break:break-word;overflow-wrap:anywhere;text-align:center;line-height:1.2;}
.k.fullwidth{align-items:stretch;text-align:left;overflow-wrap:anywhere}
.k.fullwidth,#infoText{text-align:left;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;}
.area.company{align-self:auto}

/* Typo */
.prod-title{display:block;white-space:nowrap;text-overflow:ellipsis;text-align:center;font-weight:800}
.prod-fill{font-size:min(12pt,calc(14pt * var(--u) * var(--fzi,1)));font-weight:600;margin-top:2px}
#infoText{width:90%;text-align:left;font-size:min(4pt,calc(4pt * var(--u) * var(--fzi,1)));line-height:1.1;margin:2px 0;overflow-wrap:anywhere;hyphens:auto}
#infoText .lbl{font-weight:700}
.ufi-line{text-align:center;white-space:nowrap;font-size:calc(8pt * var(--u))}
.ufi-line .b{font-weight:700}
.ufi-line #ufiText{margin-left:4px;white-space:nowrap;text-overflow:ellipsis,display:none}
.area.company .small{font-size:min(10pt,calc(10pt * var(--u) * var(--fzi,1)));line-height:1.2;white-space:pre-line;text-align:center}


/* Piktogramm-Reihen */
#ghsRow{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:nowrap}
#safetyIcons{max-width: none;width: 96%;display: flex;justify-content: center;gap: 6px;margin: 0 auto;flex-wrap: nowrap;}
#ghsRow img,#safetyIcons img{object-fit:contain;width:auto;height:auto;}

/* Safety-Panel: Buttons mittig, max Höhe 150px */
.safety-wrap{display:flex;justify-content:center;align-items:center; padding-bottom:10px; margin-top:20px;}
.safety-grid {
  display: flex;
  flex-wrap: nowrap;      /* keine Zeilen auf breiten Displays */
  gap: 6px;
  justify-content: center;

}
.safety-grid .sbtn {
  flex: 1 1 calc((100% - 5 * 6px) / 6) !important;
  aspect-ratio: 1/1;
  max-width: 80px;                 /* quadratisch */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #333;
  background: #f8f8f8;
  cursor: pointer;
  padding: 3px !important;
}

.safety-grid .sbtn[aria-pressed="true"]{outline:2px solid var(--green)}
.safety-grid .sbtn .phimg{width: 100% !important;height: 100% !important;max-width: none !important;max-height: none !important;padding: 6%;object-fit: contain;}

/* Kill alte Breiten/Floats */
#panel-company,#panel-safety,#panel-params,#panel-oils{width:auto!important;float:none!important;display:block}
#panel-oils{display:flex;flex-direction:column}
#oilList{flex:1 1 auto;overflow-y:auto;margin:0;padding:0;list-style:none;max-height:calc(var(--oil-row-h) * 12.5 + 2px)}

/* Feineinstellungen */
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.dpad{display:grid;grid-template-areas:". up .""left center right"". down .";grid-template-columns:56px 56px 56px;grid-template-rows:44px 44px 44px;gap:8px}
.btn-up{grid-area:up}.btn-left{grid-area:left}.btn-right{grid-area:right}.btn-down{grid-area:down}.btn-center{grid-area:center}
.knobs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.knobs .group{display:inline-flex;align-items:center;gap:6px}
.knobs .group .glabel{font:700 12px/1 system-ui,sans-serif}
.knobs .group button{min-width:56px;min-height:40px}

/* Öl-Liste */
.oil-list{display:flex;flex-direction:column;gap:6px;min-height:200px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);padding:6px;overflow:auto;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.oil-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .15s;line-height:1.2;height:var(--oil-row-h);line-height:var(--oil-row-h)}
.oil-item:hover{background:#f8fafc}
.oil-item[aria-selected="true"]{background:#eef2ff}

/* Buttons (Retro-Push) */
button{cursor:pointer;border:1px solid #0b1b33;background:#e6f0ff;color:#0b1b33;border-radius:12px;padding:12px 16px;box-shadow:inset 0 0 0 1px #ffffff,0 3px 0 #0b1b33;font-weight:700}
button:active{transform:translateY(1px);box-shadow:inset 0 0 0 2px #34d399,0 1px 0 #0b1b33}
.btn.primary{background:#dbe6ff}
.export-actions{display:flex;gap:12px;justify-content:center}

/* Top-Grid 2x2 */
.top-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px;min-width:0;width:100%;grid-column:1 / -1}
.two-col{display:grid;grid-template-columns:1fr;gap:20px;width:100%}
@media (min-width:900px){
  .two-col{grid-template-columns:1fr 1fr;align-items:stretch}
  .two-col > .panel{height:100%;min-height:0}
}
.two-col > .panel{width:auto!important;float:none!important;display:block!important}
@media (min-width:900px){
  .top-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;align-items:stretch}
  .top-grid > .panel{display:flex;flex-direction:column;min-height:0;height:100%;max-height:600px;width:100%}
  .top-grid > .panel .scroll-body{overflow:auto;flex:1 1 auto;min-height:0}
}

/* Label-Parameter Feintuning */
#panel-params{display:flex;flex-direction:column;gap:12px}
#panel-params h2{margin-bottom:8px}
#panel-params .shape-options{display:flex;justify-content:center;gap:16px;margin-bottom:12px}
#panel-params .dimension-row{display:flex;justify-content:center;gap:10px}
#panel-params .dimension-row input{flex:1}
#panel-params select{margin-bottom:12px;width:100%;height:40px;background:#fff}

/* Safety-Panel Abstände */
#panel-safety{display:flex;flex-direction:column;gap:6px}
#panel-safety h2{margin:0 0 6px}
#panel-safety > label{display:flex;flex-direction:column;gap:6px}
#panel-safety #extraInput{width:100%;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px}

#panel-safety .safety-wrap{display:flex;justify-content:center;align-items:center;padding-top:4px; overflow: hidden}
#panel-safety .safety-grid{ display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 10px;max-width: 100%;}


#panel-safety .sbtn:hover{background:#f8fafc}
#panel-safety .sbtn[aria-pressed="true"]{border-color:#22c55e;background:#ecfdf5}
#panel-safety .sbtn .phimg{display:block;width:100%;height:100%;max-height:150px;object-fit:contain}
#panel-safety .sbtn img{ width: 100%; height: 100%; object-fit: contain;}

#panel-safety .sbtn {flex: 0 1 auto;display: flex;align-items: center;justify-content: padding: 0;center;border: 2px solid #333;background: #f8f8f8;cursor: pointer;}

/* UFI Preview */
#ufiLine{font-size:8pt;text-align:center;margin-top:4px}

/* Produkt & Absender: 1 Feld pro Zeile kompromisslos */
#panel-company *{box-sizing:border-box}
#panel-company .row,#panel-company .grid,#panel-company .two-col,#panel-company .columns,#panel-company [class*="col-"],#panel-company .inline,#panel-company .flex,#panel-company .split{
  display:block!important;width:100%!important;float:none!important;grid-template-columns:none!important;gap:0!important
}
#panel-company label{display:block!important;width:100%!important;margin:0 0 12px 0!important}
#panel-company input,#panel-company select,#panel-company textarea{
  display:block!important;width:100%!important;max-width:100%!important;margin-top:6px!important;flex:0 0 auto!important
}
#panel-company .flex,#panel-company [style*="display:flex"]{display:block!important}
#panel-company .ufi-row{display:block!important}
#panel-company .ufi-row input,#panel-company .ufi-row button{width:100%!important}
#panel-company .ufi-row button{margin-top:8px!important}

/* Shape-Icon Fallback */
.shape-icon{display:block;width:60%;height:auto;margin:0 auto;color:#888}
.shape-card.active .shape-icon{color:#32a852}

/* ==== Mobile-only, berührt Desktop nicht (≤ 680px) ==== */
@media (max-width: 680px){

  /* Bühne bleibt 1:1, keine fixen Höhen die Desktop überschreiben */
  #previewWrap{
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    min-height: unset;
    max-height: unset;
    padding: 10px;
  }

  /* Label strikt quadratisch über aspect-ratio, keine globalen Variablen ändern */
  #label{
  position: relative;
  width: min(700px, 100%) !important;
  max-height: min(700px, 100%);
  height: auto !important;
  margin: 0;
}

/* Beim Export echte Pixelmaße nutzen */
body.exporting #label{
  width: var(--label-px-w) !important;
  height: var(--label-px-h) !important;
}

  /* Safe-Zone: nur mobil etwas enger, ohne :root zu überschreiben */
  #label .safe-box{
    top: clamp(8px, 3.5vw, 16px);
    right: clamp(8px, 3.5vw, 14px);
    bottom: clamp(10px, 4vw, 18px);
    left: clamp(8px, 3.5vw, 14px);
  }

  /* Piktogramm-Reihen: zentriert, kein Wrap, keine horizontale Scroll-Orgie */
  #ghsRow, #safetyIcons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    box-sizing:border-box;
    padding-inline: 8px;
  }

  /* Piktos: obere Grenze nur mobil, finale Größe macht dein JS */
  #ghsRow img, #safetyIcons img{

    width: auto;
    height: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }

  /* Formauswahl-Karten: kleiner, bleiben 2-spaltig */
  .shape-options{ gap: 10px }
  .shape-card{ height: clamp(90px, 28vw, 130px) }
  .shape-card .shape-svg, .shape-card .shape-icon{ max-width: 78%; max-height: 78% }

  /* Eingaben: einspaltig, nichts läuft über */
  .grid.two{ grid-template-columns: 1fr !important }
  .ufi-row{ flex-direction: column; align-items: stretch }
  .ufi-row .ufi-inline, .ufi-row button{ width: 100% }

  .safety-grid {
    justify-content: flex-start;
  }
  .sbtn {
    width: 90px;
    height: 90px;
  }
}

/* ——— Label-Safe-Zone etwas großzügiger ——— */
@media (min-width: 0px){
  /* weniger Innenabstand im Label */
  :root{
    --rim-top: 14px;
    --rim-right: 10px;
    --rim-bottom: 18px;
    --rim-left: 10px;
  }

/* runde Form breiter nutzen (vorher 80/76/62/44 %) */
  .label.round .area{ width: 92% !important; }
  .label.round .area.w-wide{ width: 96% !important; }
  .label.round .area.w-medium{ width: 88% !important; }
  .label.round .area.w-narrow{ width: 70% !important; }

/* Infoblock weniger eingeengt (vorher 90 %) */
  #infoText{ width: 96% !important; }

/* Sicherheits-Piktos nicht auf 50 % deckeln */
  #safetyIcons{ max-width: 90% !important; }
}

/* Safety-Reihe darf umbrechen; JS steuert Höhe */
  #safetyIcons{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; width:100%; max-width:none; overflow:visible;}
  #safetyIcons img{
    height:auto; width:auto; object-fit:contain;
  }

@media (max-width: 500px) {
  #panel-safety .safety-grid{ justify-content: flex-start;}
  #panel-safety .sbtn{ width: 70px; height: 70px; padding:1px; }
}


/* Mehr Nutzfläche in der Form */
#label .safe-box{
  top:10px; right:8px; bottom:12px; left:8px;  /* weniger Innenrand */
}

/* Runde Form: Bereiche dürfen fast bis an den Rand */
.label.round .area{        width: 96% !important; }
.label.round .area.w-wide{ width: 98% !important; }
.label.round .area.w-medium{width: 94% !important; }
.label.round .area.w-narrow{width: 78% !important; } /* Produktname etc. schmaler */

/* Info-Text nicht künstlich einschränken */
#infoText{ width: 98% !important; }

/* Reihen nicht deckeln */
#ghsRow, #safetyIcons{ max-width: 100% !important; }

/* Fallback: Container selbst nicht kastrieren */
.area, .k{ max-width:100% !important; }
/* Reihen in der Vorschau: nie clippen, sauber zentrieren */
#ghsRow, #safetyIcons{
  display:flex; justify-content:center; align-items:center;
  gap:6px; flex-wrap:wrap;              /* darf umbrechen */
  max-width:100%; overflow:visible;
}
#safetyIcons img, #ghsRow img{ object-fit:contain; height:auto; width:auto; }

/* Safety-Buttons im Panel: auf schmalen Screens umbrechen */
.safety-grid{ display:flex; gap:8px; flex-wrap:nowrap; justify-content:center; }
@media (max-width:500px){
  .safety-grid{ flex-wrap:wrap; justify-content:flex-start; }
}

/* Einheitliche Felder nur im Formular-Panel */
#panel-company form input[type="text"],
#panel-company form input[type="number"],
#panel-company form input[type="tel"],
#panel-company form input[type="email"],
#panel-company form textarea,
#panel-company form select,
#panel-company #prodName {
  font-size: 14px;
  line-height: 1.4;
  font-family: inherit;
  height: 40px;
  padding: 8px 10px;
  border: 1px solid #d9d7d3;
  border-radius: 10px;
  box-sizing: border-box;
  width: 100%;
}

/* Textarea bleibt größer, aber gleiche Typo */
#panel-company form textarea {
  height: auto;
  min-height: 84px;
}

/* Falls vorher Sonderfälle das Feld hochgezogen haben: brutal glattbügeln */
#panel-company #prodName {
  height: 40px !important;
  padding: 8px 10px !important;
  line-height: 1.4 !important;
  font-size: 14px !important;
}

/* Kontur um die Label-Form (beeinflusst Layout nicht) */
#label.with-stroke{ box-shadow: inset 0 0 0 1px #333; }

#strokeOverlay{
  position: absolute;
  inset: 0;
  border: 1px solid #333;     /* 1px, dunkelgrau */
  border-radius: inherit;     /* folgt der Label-Form */
  background: transparent;    /* keine Füllung */
  pointer-events: none;       /* klicks nicht blocken */
}



/* Aktivzustand für Schaltfläche "Kontur hinzufügen" */
.btn.active {
  background-color: #4caf50 !important;
  border-color: #4caf50 !important;
  color: #fff !important;
}

#previewViewport { display:grid; place-items:center; overflow:hidden; }

.size-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:6px 0; border-top:1px solid #eef2f7;
}
.size-row:first-of-type{ border-top:0; }
.sz-label{ font-weight:600; }
.sz-ctrl{ display:flex; gap:6px; }
.btn.btn-sm{ padding:6px 10px; font-size:.9rem; }