/* =====================================================================
   DittMeier Styleguide  -  zentrale Stylesheet-Datei fuer alle Apps
   Quelle der Wahrheit: D:\Dittmeier\Brand\apps\dittmeier-ci.css (lokale Kopie: C:\Styleguide)
   Einbindung: siehe D:\Dittmeier\Brand\CLAUDE.md und README.md  (ci_style.init_ci(app))
   Version 2.0  (08.10.2026) = Marke (brand.css, --dm-*) + App-Look (--ci-*, leitet sich von --dm-* ab)
   ===================================================================== */
600;700&family=Poppins:wght@600;700&display=swap');

/* Schriften lokal (keine Google-Anfrage): Open Sans 400-700, Poppins 600-800 */


/* Schriften lokal (keine Google-Anfrage): Open Sans 400-700, Poppins 600-800 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/ci-assets/fonts/OpenSans-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/ci-assets/fonts/OpenSans-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/ci-assets/fonts/OpenSans-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/ci-assets/fonts/OpenSans-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/ci-assets/fonts/Poppins-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/ci-assets/fonts/Poppins-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/ci-assets/fonts/Poppins-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Design-Tokens ---------- */
:root{
  /* Hauptfarben */
  --ci-magenta:var(--dm-magenta,#E6007E); --ci-magenta-dark:#B80064; --ci-magenta-bg:rgba(230,0,126,.08); --ci-magenta-bg2:rgba(230,0,126,.15);
  --ci-gelb:var(--dm-yellow,#FFED00);
  --ci-tinte:var(--dm-ink,#1D1D1B); --ci-weiss:var(--dm-white,#FFFFFF); --ci-creme:var(--dm-rose,#FFF4F9); --ci-grau:var(--dm-grey,#6B6B6B);
  /* Spritzer (nur kleine Akzente) */
  --ci-cyan:var(--dm-cyan,#00A0E3); --ci-gruen:var(--dm-green,#3AAA35); --ci-orange:var(--dm-orange,#F39200);
  /* Funktionsfarben (Status, Warnung) - bewusst nicht Markenfarben */
  --ci-ok:#2E8B2A; --ci-ok-bg:#E7F5E6; --ci-warn:#B45309; --ci-warn-bg:#FEF3C7; --ci-fehler:#B91C1C; --ci-fehler-bg:#FEE2E2;
  /* Formen */
  --ci-radius:var(--dm-radius,14px); --ci-radius-s:10px;
  --ci-hex:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
  /* Schrift */
  --ci-font:'Open Sans','Segoe UI',Arial,sans-serif; --ci-font-h:'Poppins','Segoe UI',Arial,sans-serif;

  /* Kompatibilitaet: Variablennamen der bestehenden Apps */
  --pink:var(--ci-magenta); --pink-light:#ff4da6; --pink-dark:var(--ci-magenta-dark);
  --pink-bg:var(--ci-magenta-bg); --pink-bg2:var(--ci-magenta-bg2);
  --gelb:var(--ci-gelb); --tinte:var(--ci-tinte); --creme:var(--ci-creme);
  --bg:#fff; --surface:var(--ci-creme); --border:#EBD3E0; --border-dark:#C9A3B8;
  --text:var(--ci-tinte); --text-muted:#3d3d3b; --text-dim:var(--ci-grau);
  --success:var(--ci-ok); --success-bg:var(--ci-ok-bg);
}

/* ---------- 2. Grundlagen ---------- */
body{font-family:var(--ci-font)}   /* Textfarbe/Hintergrund bleiben bei der App (es gibt helle und dunkle Apps) */
h1,h2,h3,.lieferant-name,.logo h1,.liste-header h2,.checklist h2{font-family:var(--ci-font-h)}

/* ---------- 3. Kopfzeile (Magenta) mit weisser Tab-Leiste ---------- */
.header{background:var(--ci-magenta);border-bottom:0;box-shadow:none;position:sticky}
.header::after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:5px;
  background:linear-gradient(90deg,#FFED00 0 20%,#00A0E3 20% 40%,#3AAA35 40% 60%,#F39200 60% 80%,#E6007E 80% 100%)}
.header-content{gap:10px 14px}
.header .tabs{flex-wrap:nowrap}
.logo h1,.header .status,.tab,.cfg-btn{white-space:nowrap}
.logo{gap:12px}
.logo h1{color:#fff;font-weight:700;font-size:17px;letter-spacing:.2px;line-height:1.15}
.logo p{color:#fff;font-weight:600;font-size:11px;opacity:.95}
.logo-img{height:44px;width:auto;display:block;flex-shrink:0}
.logo:has(.logo-img) h1{font-size:15px;font-weight:600;padding-left:14px;border-left:2px solid rgba(255,255,255,.55)}
.logo:has(.logo-img) p{display:none}
.logo-icon{width:48px;height:48px;background:none;border-radius:0;clip-path:none;padding:0;flex-shrink:0}
.logo-icon svg{width:100%;height:100%;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.tabs{background:#fff;border-radius:var(--ci-radius);padding:4px;gap:2px;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tab{color:var(--ci-tinte);border-radius:11px;font-weight:600;font-size:13px}
.tab:hover{background:var(--ci-creme)}
.tab.active{background:var(--ci-magenta);color:#fff;font-weight:700}
.header .status{background:#fff;color:var(--ci-tinte);font-weight:700;font-size:11px;padding:5px 10px;border-radius:12px}
.header .status.online{background:#FFED00;color:var(--ci-tinte)}
.header .status.offline{background:var(--ci-fehler);color:#fff}
.mobile-nav{border-top:3px solid var(--ci-magenta)}
.mobile-nav button.active{color:var(--ci-magenta)}
@media(max-width:768px){.header::after{bottom:-4px;height:4px}}

/* ---------- 4. Flaechen, Buttons, Formen ---------- */
.card,.checklist,.scan-section{border-radius:var(--ci-radius)}
.scan-section{background:var(--ci-creme);border:2px solid var(--ci-magenta)}
.btn,.save-btn,.grund-btn,.fbtn{border-radius:12px}
.btn-primary,.save-btn{background:var(--ci-magenta);color:#fff}
.btn-primary:hover,.save-btn:hover{background:var(--ci-magenta-dark)}
.grund-btn.active{background:var(--ci-magenta);color:#fff;border-color:var(--ci-magenta)}
.lieferant-header{border-radius:var(--ci-radius)}
.liste-header .badge{background:var(--ci-magenta);color:#fff}
table th{background:var(--ci-creme);color:var(--ci-tinte)}
table tr:nth-child(even) td{background:var(--ci-creme)}

/* Gelber Aktions-Button (auf Gelb nur Schwarz/Magenta als Schrift) */
.btn-gelb{background:var(--ci-gelb)!important;color:var(--ci-tinte)!important;border:2px solid var(--ci-tinte)!important}

/* ---------- 5. Sechseck als Leitform ---------- */
.ci-hex{clip-path:var(--ci-hex)}
.ci-hexlist{list-style:none;margin:0;padding:0}
.ci-hexlist li{position:relative;padding-left:22px;margin-bottom:4px}
.ci-hexlist li::before{content:'';position:absolute;left:0;top:4px;width:12px;height:13px;background:var(--ci-magenta);clip-path:var(--ci-hex)}
.ci-hexnum{list-style:none;margin-left:0;counter-reset:hx}
.ci-hexnum li{position:relative;padding-left:32px;margin-bottom:6px;counter-increment:hx}
.ci-hexnum li::before{content:counter(hx);position:absolute;left:0;top:0;width:24px;height:26px;background:var(--ci-magenta);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;clip-path:var(--ci-hex)}

/* ---------- 6. Hinweis-Kaesten (Funktionsfarben) ---------- */
.ci-hinweis{border-radius:var(--ci-radius-s);padding:8px 12px;border:2px solid;font-weight:600}
.ci-hinweis.ok{background:var(--ci-ok-bg);border-color:var(--ci-ok);color:#14532d}
.ci-hinweis.warn{background:var(--ci-warn-bg);border-color:#f59e0b;color:#78350f}
.ci-hinweis.fehler{background:var(--ci-fehler-bg);border-color:#dc2626;color:#7f1d1d}

/* ===== Stand Marketing-CI 08.10.2026 (brand.css, D:\Dittmeier_Organisation_00_Marketing) - Tokens und .dm-* Klassen ===== */
/* DittMeier Gerolzhofen – gemeinsame Design-Tokens für alle Apps und Portale */
:root{
  --dm-magenta:#E6007E; --dm-yellow:#FFED00; --dm-ink:#1D1D1B; --dm-white:#FFFFFF;
  --dm-rose:#FFF4F9; --dm-grey:#6B6B6B;
  --dm-cyan:#00A0E3; --dm-green:#3AAA35; --dm-orange:#F39200;
  --dm-radius:14px;
  /* Banner-/Aushang-Verlauf aus Bauzaunbanner "neutral" */
  --dm-gradient:linear-gradient(180deg,#FCE466 0%,#F9C84E 55%,#F4A52A 100%);
  --dm-logo:url("/ci-assets/logo_magenta.png"); --dm-logo-white:url("/ci-assets/logo_weiss.png");
  --dm-font-head:"Poppins","Segoe UI",Arial,sans-serif;
  --dm-font-body:"Open Sans","Nunito","Segoe UI",Arial,sans-serif;
  --dm-font-hand:"Patrick Hand","Gaegu","Segoe Print",cursive;
  --dm-hex:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.dm-btn{background:var(--dm-magenta);color:#fff;border:0;border-radius:var(--dm-radius);padding:.6em 1.2em;font-family:var(--dm-font-head);font-weight:700}
.dm-btn--alt{background:var(--dm-yellow);color:var(--dm-ink)}
.dm-hex{clip-path:var(--dm-hex);background:var(--dm-magenta);color:#fff;display:inline-grid;place-items:center}
.dm-header{background:var(--dm-magenta);color:#fff}

.dm-hero{background:var(--dm-gradient);padding:48px 24px;text-align:center;border-radius:var(--dm-radius)}
.dm-hero img{max-width:min(560px,90%)}
.dm-card{background:var(--dm-rose);border:2px solid var(--dm-magenta);border-radius:var(--dm-radius);padding:20px}
.dm-claim{font-family:var(--dm-font-hand);font-size:1.4rem;font-weight:700;-webkit-text-stroke:.6px currentColor}

/* Schriftgewichte laut aktueller CI: Fliesstext 500, Ueberschriften 700/800 */
body{font-weight:500}
h1,h2,h3{font-weight:800}
.liste-header h2,.checklist h2{font-weight:700}

/* ---------- 7. Mehr Gelb (Marken-Gelb #FFED00 als Aktions- und Akzentfarbe, Schrift darauf immer Tinten-Schwarz) ---------- */
.liste-header h2,.checklist h2{display:inline-block;box-shadow:inset 0 -.45em 0 var(--ci-gelb);padding:0 .15em;margin-left:-.15em}
.liste-header .badge{background:var(--ci-gelb);color:var(--ci-tinte);border:2px solid var(--ci-tinte);font-weight:800}
.scan-section{box-shadow:inset 0 7px 0 var(--ci-gelb)}
.scan-ready.on,.scan-ready.on .dot{color:var(--ci-tinte)}
.header .cfg-btn{border-color:var(--ci-gelb)}
.btn-aktion{background:var(--ci-gelb)!important;color:var(--ci-tinte)!important;border:2px solid var(--ci-tinte)!important;font-weight:800}
.chip{background:var(--ci-gelb);color:var(--ci-tinte);border:1px solid var(--ci-tinte)}

/* Grund-Buttons (Defekt/Beschaedigt, Transportschaden ...): groesser und fett */
.grund-btn{font-size:15px;font-weight:700;padding:10px 18px;min-height:48px;color:var(--ci-tinte);border:2px solid var(--border-dark,#C9A3B8)}
.grund-btn.active{color:#fff;border-color:var(--ci-magenta)}

/* ---------- 8. Altlast-Violett (#667eea/#764ba2) auf CI umleiten (Apps aus generierten Vorlagen) ---------- */
.upload-area{border-color:var(--ci-magenta)!important}
.upload-area:hover,.upload-area.dragover{border-color:var(--ci-gelb)!important;background:#FFFBCC!important}
.upload-area i,.file-item .file-icon:not(.img),[style*="#667eea"]{color:var(--ci-magenta)!important}
.btn,.progress-fill,.preview-table th{background:var(--ci-magenta)!important;background-image:none!important;color:#fff!important}
.btn:hover{background:var(--ci-magenta-dark)!important}
.tab.active,.tab.active i{color:#fff!important;border-bottom-color:var(--ci-magenta)!important}
.tab:not(.active):hover{color:var(--ci-magenta)!important}
.btn i,.btn .fa,.btn svg{color:#fff!important}
.format-tag{background:var(--ci-creme)!important;color:var(--ci-magenta)!important}