/* =====================================================================
   Fertigungstakt – Stylesheet
   Gestaltung: professionelle B2B-Industriesoftware. Hell, technisch,
   kühles Grau/Nachtblau mit Himmelblau als Markenfarbe, klare
   Typografie, wenig Spielerei. Rot/Gelb/Grün bleiben der Ampel und den
   Statusmeldungen vorbehalten und kommen als Markenfarbe nicht vor.
   Kein Build-Schritt; eine Datei für Marketing, App, Admin und Monitor.
   ===================================================================== */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/inter-latin-800-normal.woff2') format('woff2'); }

:root {
    --bg: #ffffff;
    --bg-soft: #f4f8fc;
    --bg-muted: #e8eef5;
    --text: #17242e;
    --text-soft: #4b5a67;
    --text-muted: #6b7b88;
    --border: #d7e1ea;
    --border-strong: #b4c2ce;

    --primary: #0378b4;         /* Himmelblau – Markenfarbe (Flächen) */
    --primary-hover: #02648f;   /* Flächen beim Überfahren */
    --primary-ink: #0369a1;     /* dasselbe Blau als Text/Linie auf Hell */
    --primary-dark: #075985;    /* Text beim Überfahren */
    --primary-bright: #38bdf8;  /* helles Himmelblau für Akzente */
    --on-primary: #ffffff;      /* Schrift auf der Markenfarbe */
    --primary-soft: #e3f3fd;
    --accent: #0f2b40;          /* Nachtblau für Kopfzeilen/Monitor */

    --success: #15803d;
    --success-soft: #ecfdf3;
    --warning: #b45309;
    --warning-soft: #fff7e6;
    --danger: #b91c1c;
    --danger-soft: #fef2f2;
    --info-soft: #eaf4fd;

    --ampel-gruen: #16a34a;
    --ampel-gelb: #d97706;
    --ampel-rot: #dc2626;
    --ampel-grau: #9ca3af;

    --radius: 10px;
    --radius-sm: 6px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow: 0 4px 16px rgba(15, 23, 42, .08);
    --shadow-lg: 0 18px 40px rgba(15, 23, 42, .14);
    --maxw: 1180px;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root.theme-dark {
    --bg: #0c1a25; --bg-soft: #112434; --bg-muted: #1a3145;
    --text: #eef4f9; --text-soft: #c6d5e0; --text-muted: #90a2b0;
    --border: #24404f; --border-strong: #3a5768; --accent: #143349;
    --primary: #38bdf8; --primary-hover: #7dd3fc; --primary-ink: #7dd3fc; --primary-bright: #7dd3fc;
    --primary-dark: #b6e6fe; --on-primary: #04222f; --primary-soft: #12324a;
    --success-soft: #0f2a1a; --warning-soft: #2b1d08; --danger-soft: #2b1212; --info-soft: #12293c;
}
@media (prefers-color-scheme: dark) {
    :root.theme-auto {
        --bg: #0c1a25; --bg-soft: #112434; --bg-muted: #1a3145;
        --text: #eef4f9; --text-soft: #c6d5e0; --text-muted: #90a2b0;
        --border: #24404f; --border-strong: #3a5768; --accent: #143349;
        --primary: #38bdf8; --primary-hover: #7dd3fc; --primary-ink: #7dd3fc; --primary-bright: #7dd3fc;
        --primary-dark: #b6e6fe; --on-primary: #04222f; --primary-soft: #12324a;
        --success-soft: #0f2a1a; --warning-soft: #2b1d08; --danger-soft: #2b1212; --info-soft: #12293c;
    }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; font-size: 15.5px; }
a { color: var(--primary-ink); text-decoration: none; }
a:hover { color: var(--primary-dark); }
h1, h2, h3, h4 { line-height: 1.2; font-weight: 700; letter-spacing: -.015em; margin: 0 0 .5em; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1rem; }
code { font-family: var(--mono); font-size: .88em; background: var(--bg-muted); padding: .05rem .35rem; border-radius: 4px; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }
.muted { color: var(--text-soft); }
.small { font-size: .88rem; }
.text-center { text-align: center; }
.highlight { color: var(--primary-ink); }
.mono { font-family: var(--mono); font-size: .9em; }
.nowrap { white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .62rem 1.15rem; border-radius: var(--radius-sm);
    font-weight: 600; font-size: .95rem; cursor: pointer; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; font-family: inherit; line-height: 1.3; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); color: var(--on-primary); }
.btn-ghost { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--text); }
.btn-soft { background: var(--primary-soft); color: var(--primary-ink); }
.btn-soft:hover { background: var(--primary); color: var(--on-primary); }
.btn-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #166534; color: #fff; }
.btn-block { width: 100%; }
.btn-lg { padding: .85rem 1.6rem; font-size: 1.02rem; }
.btn-sm { padding: .38rem .7rem; font-size: .84rem; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-group { display: inline-flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- Öffentlicher Kopf ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--border); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; color: var(--text); letter-spacing: -.02em; }
.brand:hover { color: var(--text); }
.brand .logo { width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; flex: none; }
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav a.navlink { color: var(--text-soft); font-weight: 500; font-size: .95rem; }
.nav a.navlink:hover, .nav a.navlink.active { color: var(--text); }
.nav-actions { display: flex; align-items: center; gap: .6rem; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--text); }
@media (max-width: 900px) {
    .nav { position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: .8rem 24px 1rem; display: none; box-shadow: var(--shadow); }
    .nav.open { display: flex; }
    .nav a.navlink { padding: .6rem 0; }
    .nav-actions { flex-direction: column; align-items: stretch; padding-top: .5rem; }
    .nav-toggle { display: block; }
}
.theme-toggle { background: transparent; border: 1px solid var(--border); border-radius: 999px; width: 36px; height: 36px; cursor: pointer; font-size: 1rem; line-height: 1; color: var(--text); display: inline-grid; place-items: center; }
.theme-toggle:hover { background: var(--bg-muted); }

/* ---------- Hero & Sektionen (Marketing) ---------- */
.hero { padding: 4.2rem 0 3rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-soft), var(--bg)); }
.hero .eyebrow { display: inline-block; background: var(--primary-soft); color: var(--primary-ink); padding: .3rem .8rem; border-radius: 999px; font-weight: 600; font-size: .82rem; margin-bottom: 1.1rem; letter-spacing: .01em; }
.hero h1 { max-width: 18ch; margin-inline: auto; }
.hero p.lead { font-size: 1.18rem; color: var(--text-soft); max-width: 62ch; margin: 1rem auto 1.8rem; }
.hero-cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: .9rem; font-size: .9rem; color: var(--text-muted); }
.founder-pill { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.3rem; padding: .5rem .9rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .9rem; font-weight: 600; }
.founder-pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--primary-bright); }
.section { padding: 4rem 0; }
.section-soft { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 64ch; margin: 0 auto 2.4rem; text-align: center; }
.section-head p { color: var(--text-soft); font-size: 1.08rem; }
.section-head.left { text-align: left; margin-left: 0; }

/* ---------- Karten / Raster ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.card h3 { margin-bottom: .4rem; }
.card > p:last-child { margin-bottom: 0; }
.card .icon { width: 42px; height: 42px; border-radius: 9px; background: var(--primary-soft); color: var(--primary-ink); display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; margin-bottom: .9rem; }
.card.card-soft { background: var(--bg-soft); box-shadow: none; }
.card.card-accent { border-color: var(--primary); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .9rem; }
.card-head h3, .card-head h2 { margin: 0; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { padding-left: 1.7rem; position: relative; margin-bottom: .55rem; color: var(--text-soft); }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: .05rem; width: 1.25rem; height: 1.25rem; border-radius: 999px; background: var(--success-soft); color: var(--success); display: grid; place-items: center; font-size: .75rem; font-weight: 700; }
.x-list li::before { content: "×"; background: var(--danger-soft); color: var(--danger); font-size: .95rem; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step .num { width: 40px; height: 40px; border-radius: 9px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; margin-bottom: .8rem; }
.step h3 { font-size: 1.05rem; }
.step p { color: var(--text-soft); margin: 0; }

/* Vergleichstabelle Excel vs. Fertigungstakt */
.compare { width: 100%; border-collapse: collapse; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.compare th, .compare td { padding: .8rem .9rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: .95rem; }
.compare th { background: var(--bg-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.compare td.ja { color: var(--success); font-weight: 600; }
.compare td.nein { color: var(--danger); }
.compare tr:last-child td { border-bottom: 0; }

/* ---------- Preise ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
@media (max-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1fr); } }
.price-card { display: flex; flex-direction: column; position: relative; }
.price-card.featured { border-color: var(--primary); box-shadow: var(--shadow); }
.price-card .ribbon { position: absolute; top: -12px; left: 1.4rem; background: var(--primary); color: var(--on-primary); font-size: .72rem; font-weight: 700; padding: .22rem .65rem; border-radius: 999px; letter-spacing: .02em; }
.price-card .plan-name { font-weight: 700; font-size: 1.1rem; }
.price-card .plan-limit { color: var(--text-soft); font-size: .92rem; }
.price-card .price { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; margin: .6rem 0 0; line-height: 1.1; }
.price-card .price span { font-size: .95rem; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.price-card .price-old { display: block; color: var(--text-muted); font-weight: 600; text-decoration: line-through; font-size: 1rem; margin-top: .5rem; }
.price-card .price-tag { display: inline-block; margin-top: .35rem; font-size: .78rem; font-weight: 700; color: var(--primary-ink); background: var(--primary-soft); padding: .12rem .5rem; border-radius: 999px; }
.price-card .check-list { margin: 1.3rem 0; flex: 1; }
.price-note { text-align: center; color: var(--text-muted); font-size: .9rem; margin-top: 1.2rem; }
.founder-box { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: var(--radius); padding: 1.3rem 1.5rem; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1.8rem; }
.founder-box strong { font-size: 1.1rem; }
.founder-box .fb-count { font-size: 1.05rem; font-weight: 700; background: rgba(255,255,255,.12); padding: .45rem .9rem; border-radius: 999px; white-space: nowrap; }
.founder-box p { margin: .2rem 0 0; color: #d3e6f5; font-size: .93rem; }
.founder-box .btn-light { background: #fff; color: var(--accent); }
.founder-box.aus { background: var(--bg-soft); color: var(--text); border-color: var(--border); }
.founder-box.aus p { color: var(--text-soft); }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); padding: 3rem 0 1.8rem; margin-top: 3.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 1.8rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-footer .brand { display: inline-flex; }
.footer-grid h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.footer-grid a { display: block; color: var(--text-soft); padding: .2rem 0; font-size: .93rem; }
.footer-bottom { border-top: 1px solid var(--border); margin-top: 2rem; padding-top: 1.2rem; color: var(--text-muted); font-size: .88rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; }

/* ---------- Formulare ---------- */
.auth-wrap { min-height: calc(100vh - 66px); display: grid; place-items: center; padding: 2rem 1rem; background: var(--bg-soft); }
.auth-card { width: 100%; max-width: 460px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.2rem; }
.auth-card h1 { font-size: 1.5rem; }
.auth-card .sub { color: var(--text-soft); margin-bottom: 1.5rem; }
.auth-card .below { text-align: center; margin-top: 1.3rem; color: var(--text-soft); font-size: .93rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.field .hint { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .3rem; }
.input, select, textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-family: inherit; font-size: .97rem; background: var(--bg); color: var(--text); }
.input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-soft); }
textarea { min-height: 96px; resize: vertical; }
.input-sm { padding: .4rem .55rem; font-size: .9rem; }
.checkbox-row { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; color: var(--text-soft); }
.checkbox-row input { margin-top: .25rem; accent-color: var(--primary-ink); }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.row-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 640px) { .row-2, .row-3, .row-4 { grid-template-columns: minmax(0, 1fr); } }
.field.has-error > label { color: var(--danger); }
.field.has-error .input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); background: var(--danger-soft); }
.field-error { display: block; margin-top: .3rem; font-size: .82rem; font-weight: 600; color: var(--danger); }
.form-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1.2rem; }
.day-picks { display: flex; gap: .35rem; flex-wrap: wrap; }
.day-picks label { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .6rem; border: 1px solid var(--border-strong); border-radius: 999px; font-size: .85rem; cursor: pointer; }
.day-picks label:has(input:checked) { background: var(--primary-soft); border-color: var(--primary-ink); color: var(--primary-ink); font-weight: 600; }
.day-picks input { accent-color: var(--primary-ink); }
input[type="color"] { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); }

/* ---------- Flash / Hinweise ---------- */
.flash { padding: .8rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .94rem; border: 1px solid; }
.flash-success { background: var(--success-soft); color: var(--success); border-color: #bbf7d0; }
.flash-error { background: var(--danger-soft); color: var(--danger); border-color: #fecaca; }
.flash-info { background: var(--info-soft); color: var(--primary-ink); border-color: #b6ddf5; }
.notice { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-soft); font-size: .92rem; color: var(--text-soft); margin-bottom: 1rem; }
.notice strong { color: var(--text); }
.notice.warn { background: var(--warning-soft); border-color: #fcd34d; color: var(--warning); }
.notice.warn strong { color: var(--warning); }
.notice.danger { background: var(--danger-soft); border-color: #fca5a5; color: var(--danger); }
.notice.info { background: var(--info-soft); border-color: #b6ddf5; }
.legal-note { font-size: .9rem; color: var(--text-soft); background: var(--bg-soft); border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius-sm); padding: .75rem 1rem; margin: 0 0 1.5rem; }

/* ---------- App-Layout ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 236px; flex-shrink: 0; background: var(--accent); color: #c6d5e0; display: flex; flex-direction: column; padding: 1rem .9rem; position: sticky; top: 0; height: 100vh; }
.sidebar .brand { color: #fff; margin: .3rem .35rem 1.4rem; font-size: 1.08rem; }
.sidebar .brand:hover { color: #fff; }
.sidebar .brand .logo { background: #fff; color: var(--accent); }
.sidebar .company { font-size: .78rem; color: #94a3b8; margin: -1rem .45rem 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar nav a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: var(--radius-sm); color: #cbd5e1; font-weight: 500; font-size: .93rem; }
.sidebar nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar nav a.active { background: var(--primary); color: var(--on-primary); }
.sidebar nav .nav-sep { margin: .55rem .7rem .25rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; font-weight: 700; }
.sidebar nav a .nav-ico { width: 1.25rem; text-align: center; opacity: .9; font-size: .95rem; }
.sidebar nav a .nav-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-badge { margin-left: auto; flex: none; min-width: 1.25rem; padding: .05rem .4rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.4; text-align: center; }
.sidebar .side-foot { border-top: 1px solid rgba(255,255,255,.1); padding-top: .8rem; font-size: .82rem; color: #94a3b8; }
.sidebar .side-foot .btn { background: transparent; color: #cbd5e1; border-color: rgba(255,255,255,.2); }
.sidebar .side-foot .btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar { height: 58px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .8rem; padding: 0 1.4rem; background: var(--bg); position: sticky; top: 0; z-index: 20; }
.app-topbar .title { font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-topbar .spacer { flex: 1; }
.app-topbar form.search { flex: 0 1 320px; min-width: 0; }
.app-topbar form.search .input { padding: .42rem .7rem; font-size: .9rem; }
.app-content { padding: 1.4rem; flex: 1; }
.app-mobile-toggle { display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: .3rem .5rem; border-radius: var(--radius-sm); color: var(--text); }
.sidebar-backdrop { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 90; background: rgba(15,23,42,.45); opacity: 0; transition: opacity .2s; }
.sidebar-backdrop.show { display: block; opacity: 1; }
@media (max-width: 1024px) {
    .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: auto; z-index: 95; transform: translateX(-100%); transition: transform .22s ease; overflow-y: auto; box-shadow: 6px 0 28px rgba(15,23,42,.3); }
    .sidebar.open { transform: translateX(0); }
    .app-mobile-toggle { display: block; }
    body.menu-open { overflow: hidden; }
}
.badge-trial { background: var(--warning); color: #fff; padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.badge-trial.ok { background: var(--success); }
.badge-trial.lock { background: var(--danger); }
.trial-banner { background: var(--warning-soft); color: var(--warning); border: 1px solid #fcd34d; padding: .65rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.1rem; font-size: .92rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.trial-banner.lock { background: var(--danger-soft); color: var(--danger); border-color: #fca5a5; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.page-head h2 { margin: 0; font-size: 1.35rem; }
.page-head .sub { color: var(--text-soft); font-size: .92rem; margin: .1rem 0 0; }

/* ---------- Kennzahlen / Tabellen / Tags ---------- */
.kpi-reihe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.2rem; }
@media (max-width: 1100px) { .kpi-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .95rem 1.05rem; box-shadow: var(--shadow-sm); display: block; color: var(--text); }
a.kpi:hover { border-color: var(--primary); color: var(--text); }
.kpi-lbl { font-size: .78rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.kpi-num { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin-top: .15rem; }
.kpi-fuss { font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }
.kpi.rot .kpi-num { color: var(--ampel-rot); }
.kpi.gelb .kpi-num { color: var(--ampel-gelb); }
.kpi.gruen .kpi-num { color: var(--ampel-gruen); }
.kpi.blau .kpi-num { color: var(--primary-ink); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.data-table { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--bg); }
.data-table th, .data-table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; font-size: .92rem; }
.data-table thead th { background: var(--bg-soft); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); white-space: nowrap; position: sticky; top: 0; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--bg-soft); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .actions { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.data-table .actions form { margin: 0; }
.data-table tr.done td { color: var(--text-muted); }
.tag { display: inline-block; padding: .14rem .55rem; border-radius: 999px; font-size: .76rem; font-weight: 600; background: var(--bg-muted); color: var(--text-soft); white-space: nowrap; }
.tag-blau { background: var(--primary-soft); color: var(--primary-ink); }
.tag-gruen { background: var(--success-soft); color: var(--success); }
.tag-gelb { background: var(--warning-soft); color: var(--warning); }
.tag-rot { background: var(--danger-soft); color: var(--danger); }
.tag-dark { background: var(--accent); color: #fff; }
.tag-outline { background: transparent; border: 1px solid var(--border-strong); }
.ampel { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.ampel::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--ampel-grau); flex: none; }
.ampel-gruen::before { background: var(--ampel-gruen); } .ampel-gelb::before { background: var(--ampel-gelb); } .ampel-rot::before { background: var(--ampel-rot); }
.ampel-gruen { color: var(--ampel-gruen); } .ampel-gelb { color: var(--ampel-gelb); } .ampel-rot { color: var(--ampel-rot); } .ampel-grau { color: var(--text-muted); }
.prio-eilig { color: var(--danger); font-weight: 700; } .prio-hoch { color: var(--warning); font-weight: 600; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; margin-right: .35rem; background: var(--text-muted); vertical-align: middle; }
.st-laeuft { background: var(--success); } .st-pause { background: var(--warning); } .st-problem { background: var(--danger); } .st-fertig { background: var(--text-muted); } .st-geplant { background: var(--primary); } .st-offen { background: var(--border-strong); }
.filterbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.filterbar select, .filterbar .input { width: auto; padding: .42rem .6rem; font-size: .9rem; }
.filterbar .spacer { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { display: inline-flex; align-items: center; padding: .32rem .7rem; border-radius: 999px; border: 1px solid var(--border-strong); font-size: .85rem; font-weight: 600; color: var(--text-soft); background: var(--bg); }
.chip:hover { color: var(--text); background: var(--bg-soft); }
.chip.active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.list { display: flex; flex-direction: column; }
.list-item { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.list-item:last-child { border-bottom: 0; }
.list-item .li-main { flex: 1; min-width: 0; }
.li-title { font-weight: 600; } .li-meta { font-size: .84rem; color: var(--text-muted); }
.spacer { flex: 1; }
.empty { padding: 2rem 1rem; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius); }
.empty strong { color: var(--text); display: block; margin-bottom: .3rem; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; }
.flex { display: flex; } .items-center { align-items: center; } .gap { gap: .75rem; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1000px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Modal & Dialoge ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: none; place-items: center; z-index: 100; padding: 1rem; }
.modal-backdrop.open { display: grid; }
.modal { background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; padding: 1.5rem; max-height: 90vh; overflow-y: auto; }
.modal h3 { margin-bottom: 1rem; }
.modal-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.2rem; flex-wrap: wrap; }
.lt-dialog { z-index: 200; }
.lt-dialog-box { max-width: 440px; }
.lt-dialog-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .35rem; }
.lt-dialog-head h3 { margin: 0; font-size: 1.1rem; }
.lt-dialog-icon { font-size: 1.4rem; line-height: 1.2; }
.lt-dialog-box p { margin: 0; color: var(--text-soft); white-space: pre-line; }
.lt-dialog[data-type="error"] .lt-dialog-box { border-top: 3px solid var(--danger); }
.lt-dialog[data-type="question"] .lt-dialog-box { border-top: 3px solid var(--primary); }
.lt-dialog[data-type="success"] .lt-dialog-box { border-top: 3px solid var(--success); }
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 210px; z-index: 40; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 4px; display: none; flex-direction: column; }
.dropdown-menu.open { display: flex; }
.dropdown-item { display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left; padding: .5rem .6rem; border: 0; background: none; border-radius: 6px; font-size: .9rem; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; font-family: inherit; }
.dropdown-item:hover { background: var(--bg-soft); color: var(--text); }

/* ---------- Plantafel ---------- */
.pt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.pt-toolbar .pt-range { font-weight: 700; font-size: 1.02rem; min-width: 200px; text-align: center; }
/* Der Umschalter wird auch außerhalb der Plantafel benutzt (Kapazität: Wochen/Monate),
   deshalb hängen die Regeln nicht mehr an .pt-toolbar. */
.view-switch { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.vs-btn { padding: .3rem .8rem; border-radius: 999px; font-size: .86rem; font-weight: 600; color: var(--text-soft); border: 0; background: none; cursor: pointer; font-family: inherit; text-decoration: none; }
.vs-btn.active { background: var(--primary); color: var(--on-primary); }
a.vs-btn:hover { color: var(--text); }
a.vs-btn.active:hover { color: var(--on-primary); }
/* Die Legende ist ein <details>: am großen Bildschirm immer offen und ohne
   Aufklapp-Zeile, am Handy (siehe Media Query weiter unten) eingeklappt. */
.pt-legend.einklappbar > summary { display: none; }
.pt-legend.einklappbar .pt-legend-inhalt { display: flex; gap: .9rem; flex-wrap: wrap; }
.pt-legend { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .8rem; color: var(--text-muted); margin-left: auto; }
.pt-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.pt-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pt-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
@media (max-width: 1240px) { .pt-layout { grid-template-columns: minmax(0, 1fr); } }
.pt-board { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); overflow: auto; max-height: calc(100vh - 190px); position: relative; overscroll-behavior-x: contain; }
.pt-grid { display: grid; grid-template-columns: 190px minmax(0, 1fr); }
.pt-corner { position: sticky; top: 0; left: 0; z-index: 6; background: var(--bg-soft); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: .5rem .7rem; font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.pt-head { position: sticky; top: 0; z-index: 5; background: var(--bg-soft); border-bottom: 1px solid var(--border); height: 46px; position: sticky; }
.pt-head .pt-days { display: flex; height: 26px; }
.pt-head .pt-day { flex: 1; border-right: 1px solid var(--border); font-size: .78rem; font-weight: 700; padding: .25rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-head .pt-day.today { color: var(--primary-ink); background: var(--primary-soft); }
.pt-head .pt-day.weekend { color: var(--text-muted); background: var(--bg-muted); }
.pt-head .pt-hours { display: flex; height: 20px; border-top: 1px solid var(--border); overflow: hidden; }
/* min-width: 0 ist Pflicht: ein Flex-Element mit sichtbarem Überlauf darf sonst
   nicht schmaler werden als sein Text. Bei 25 px je Stunde wurde jede beschriftete
   Zelle auf die Breite von "07:00" aufgeweitet und der ganze Streifen wanderte
   Tag für Tag weiter nach rechts (Di begann bei 15:00, Mi bei 13:00 …). */
.pt-head .pt-hour { flex: 1; min-width: 0; border-right: 1px solid var(--border); font-size: .66rem; color: var(--text-muted); padding: 0 .3rem; white-space: nowrap; overflow: hidden; }
/* Die beschriftete Zelle darf in die leere Nachbarzelle ragen – sonst wird
   aus "10:00" ein "10:". Der Rahmen bleibt, nur der Text läuft darüber. */
.pt-head .pt-hour.mit-marke { overflow: visible; position: relative; z-index: 1; }
.pt-row-label { position: sticky; left: 0; z-index: 4; background: var(--bg); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .55rem .7rem; display: flex; align-items: center; gap: .55rem; min-height: 66px; }
.pt-row-label .m-color { width: 5px; align-self: stretch; border-radius: 3px; flex: none; }
.pt-row-label .m-name { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.pt-row-label .m-meta { font-size: .74rem; color: var(--text-muted); }
.pt-row-label a { color: var(--text); }
.pt-row { position: relative; border-bottom: 1px solid var(--border); min-height: 66px; background-image: linear-gradient(to right, var(--border) 1px, transparent 1px); background-size: var(--pt-colw, 60px) 100%; }
.pt-row .pt-off { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(100,116,139,.09) 6px 8px); pointer-events: none; }
/* Ausfallzeit (Wartung, Urlaub, Störung): dichter schraffiert, rötlich, mit Grund */
.pt-row .pt-ausfall { background: repeating-linear-gradient(135deg, rgba(220,38,38,.10) 0 5px, rgba(220,38,38,.22) 5px 7px); border-left: 2px solid rgba(220,38,38,.55); border-right: 2px solid rgba(220,38,38,.55); font-size: .68rem; color: #991b1b; padding: 2px 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; z-index: 1; pointer-events: auto; }
.pt-tagzelle.ausfall { background-image: repeating-linear-gradient(135deg, rgba(220,38,38,.10) 0 5px, rgba(220,38,38,.22) 5px 7px); }
/* Kapazitätsübersicht */
.kap-tabelle td.num { vertical-align: top; }
.kap-prozent { font-weight: 700; font-size: 1.05rem; }
.kap-balken { height: 5px; border-radius: 3px; background: var(--bg-muted); margin-top: .35rem; overflow: hidden; }
.kap-balken span { display: block; height: 100%; background: var(--success); }
.kap-ok .kap-balken span { background: var(--primary); }
.kap-voll .kap-balken span { background: var(--warning); }
.kap-ueberlastet .kap-balken span { background: var(--danger); }
.kap-ueberlastet .kap-prozent { color: var(--danger); }
.kap-voll .kap-prozent { color: #b45309; }
.kap-legende { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center; }
.kap-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .3rem; vertical-align: middle; }
.kap-legende i.kap-frei { background: var(--success); } .kap-legende i.kap-ok { background: var(--primary); } .kap-legende i.kap-voll { background: var(--warning); } .kap-legende i.kap-ueberlastet { background: var(--danger); }
/* Anhänge am Auftrag */
.anhang-liste { list-style: none; padding: 0; margin: 0; }
.anhang-liste li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.anhang-liste li:last-child { border-bottom: 0; }
.anhang-liste form { margin: 0; }
.anhang-typ { font-size: .66rem; font-weight: 700; letter-spacing: .04em; padding: .15rem .4rem; border-radius: 4px; background: var(--bg-muted); color: var(--text-muted); min-width: 38px; text-align: center; }
.anhang-form { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* Monitor: Zeichnungen und Ausfall */
.mon-files { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.mon-file { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; font-size: 1.05rem; border: 1px solid rgba(255,255,255,.25); }
.mon-file:hover { background: rgba(255,255,255,.2); }
.mon-file .ext { font-size: .7rem; font-weight: 700; background: rgba(255,255,255,.25); padding: .1rem .4rem; border-radius: 4px; }
.mon-ausfall { background: #7f1d1d; color: #fff; border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1rem; font-size: 1.1rem; }
.pt-row .pt-now, .pt-head .pt-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); z-index: 3; pointer-events: none; }
.pt-row.drag-over { background-color: var(--primary-soft); }
/* z-index-Leiter in der Tafel: Block 2 · Block:hover und Jetzt-Linie 3 ·
   klebende Maschinenspalte 4 · Kopf 5 · Ecke 6. Nichts in der Zeile darf darüber. */
/* Kurz hervorheben, wohin der nächste Schritt führt (Tarifwahl ohne Anschrift) */
.hebt-hervor { animation: hebtHervor 2.4s ease-out 1; }
@keyframes hebtHervor {
    0%, 100% { box-shadow: 0 0 0 0 rgba(3, 105, 161, 0); }
    15%, 70% { box-shadow: 0 0 0 3px var(--primary); }
}
@media (prefers-reduced-motion: reduce) { .hebt-hervor { animation: none; box-shadow: 0 0 0 3px var(--primary); } }

.pt-backlog-hinweis { margin: -.2rem 0 .6rem; font-size: .78rem; line-height: 1.45; color: var(--text-muted);
    background: var(--warn-soft, rgba(217,119,6,.10)); border-left: 3px solid var(--warn, #d97706);
    padding: .45rem .6rem; border-radius: 0 4px 4px 0; }

.pt-block { position: absolute; top: 7px; height: 52px; border-radius: 6px; background: var(--bg);
    border: 1px solid var(--border-strong); border-left: 5px solid var(--block-color, var(--primary));
    font-size: .78rem; line-height: 1.25; overflow: hidden; cursor: grab; box-shadow: var(--shadow-sm);
    user-select: none; z-index: 2; }
.pt-block:hover { z-index: 3; box-shadow: var(--shadow); border-color: var(--primary); }
.pt-block.dragging { opacity: .45; }
.pt-block.resizing { cursor: ew-resize; }
.pt-block.gleicher-auftrag { outline: 2px solid var(--primary); outline-offset: 1px; }

/* Die Auftragsnummer wird nie abgeschnitten, nur kleiner – deshalb kein text-overflow. */
.pt-block .b-nr { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text);
    white-space: nowrap; overflow: hidden; }
.pt-block .nr-pre { font-weight: 500; color: var(--text-muted); }
.pt-block .b-ag { font-weight: 600; }
.pt-block .b-ag2 { font-size: 10px; font-weight: 600; color: var(--text-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-block .b-sub { color: var(--text-soft); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-block .b-zeit { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; }

/* Ampel als Streifen unten: kostet keine Textbreite und ist dadurch erstmals auch
   in der Wochenansicht sichtbar. Eilauftrag als Streifen oben, Konflikt als Ecke
   oben rechts – beide verdecken keinen Text und bleiben auf 36 px erkennbar. */
.pt-block .b-ampel { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; }
.pt-block.prio-eil::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--danger); pointer-events: none; }
.pt-block .b-warn { position: absolute; top: 0; right: 0; width: 0; height: 0;
    border-top: 9px solid var(--warning); border-left: 9px solid transparent; pointer-events: none; }
.pt-block .b-warn.hart { border-top-color: var(--danger); }

.pt-block .b-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.pt-block .b-resize:hover { background: var(--primary-soft); }
.pt-block.bs-s .b-resize, .pt-block.bs-xs .b-resize { width: 6px; }

/* Dichtestufen – diese Innenabstände und STUFEN[] in plantafel.js muessen gleich bleiben. */
.pt-block.bs-xl { padding: .3rem .5rem .4rem .55rem; }
.pt-block.bs-l  { padding: .32rem .4rem .4rem .4rem; }
.pt-block.bs-l .b-nr { font-size: 12px; }
.pt-block.bs-m  { padding: .28rem .25rem .4rem .3rem; display: flex; flex-direction: column; gap: 1px; }
.pt-block.bs-m .b-nr { font-size: 12px; }
.pt-block.bs-s  { padding: 0 2px .3rem 3px; border-left-width: 4px; display: flex; align-items: center;
    /* Schmale Blöcke füllen: ein 36 px breiter, halb leerer Kasten liest sich
       wie ein Fehler. Der Farbschimmer kommt aus der Maschinenfarbe. */
    background: color-mix(in srgb, var(--block-color, var(--primary)) 12%, var(--bg)); }
.pt-block.bs-s .b-nr { text-align: left; }   /* nie zentrieren: der Folgeblock ueberdeckt die rechte Seite */
.pt-block.bs-xs { padding: 0; border-left-width: 4px; }

.pt-block.st-laeuft { border-color: var(--success); background: var(--success-soft); }
.pt-block.st-pause { background: var(--warning-soft); }
.pt-block.st-problem { border-color: var(--danger); background: var(--danger-soft); }
.pt-block.st-fertig { opacity: .55; cursor: default; }
.pt-block.konflikt { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(220,38,38,.25); }
.pt-block.konflikt-ok { border-style: dashed; }
/* ---------- Tagesraster (2 und 4 Wochen) ----------
   Statt einer Zeitachse, auf der eine Stunde 4 px breit wäre: je Tag eine Spalte
   fester Mindestbreite mit gestapelten Kärtchen. Klick auf die Spalte oder auf
   "+N weitere" springt in die Tagesansicht. */
.pt-head.nur-tage { height: 30px; }
.pt-head.nur-tage .pt-days { height: 29px; }
.pt-row-tage { background-image: none; }
.pt-tagzelle { position: absolute; top: 0; bottom: 0; padding: 5px 5px 0; border-right: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 3px; overflow: hidden; cursor: pointer; }
.pt-tagzelle.frei { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(100,116,139,.09) 6px 8px); }
.pt-tagzelle.heute { background-color: var(--primary-soft); }
.pt-karte { position: relative; display: flex; align-items: center; gap: .3rem; height: 22px; flex: none;
    border-radius: 5px; background: var(--bg); border: 1px solid var(--border-strong);
    border-left: 4px solid var(--block-color, var(--primary)); padding: 0 .35rem; font-size: .74rem;
    line-height: 1; cursor: grab; overflow: hidden; user-select: none; }
.pt-karte:hover { border-color: var(--primary); }
.pt-karte b { font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.pt-karte i { font-style: normal; color: var(--text-muted); white-space: nowrap; overflow: hidden; }
.pt-karte .k-ampel { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; }
.pt-karte.prio-eil { box-shadow: inset 0 2px 0 var(--danger); }
.pt-karte.st-laeuft { background: var(--success-soft); border-color: var(--success); }
.pt-karte.st-pause { background: var(--warning-soft); }
.pt-karte.st-problem { background: var(--danger-soft); border-color: var(--danger); }
.pt-karte.st-fertig { opacity: .55; cursor: default; }
.pt-karte.konflikt { border-color: var(--danger); }
.pt-karte.dragging { opacity: .45; }
.pt-schmal .pt-day { padding: .25rem .15rem; font-size: .68rem; }
.pt-day.wochenstart, .pt-tagzelle.wochenstart { border-left: 2px solid var(--border-strong); }
.pt-schmal .pt-tagzelle { padding: 4px 2px 0; }
.pt-schmal .pt-karte { padding: 0 .2rem; border-left-width: 3px; gap: 0; }
.pt-schmal .pt-karte i { display: none; }
.pt-schmal .pt-mehr { font-size: .68rem; }
.pt-mehr { border: 0; background: none; color: var(--primary-ink); font-size: .72rem; font-weight: 600;
    cursor: pointer; padding: 0; text-align: left; font-family: inherit; flex: none; }
.pt-mehr:hover { text-decoration: underline; }
.pt-drop-tag { position: absolute; top: 0; bottom: 0; pointer-events: none;
    outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-soft); }
.pt-side { display: flex; flex-direction: column; gap: .9rem; position: sticky; top: 70px; }
.pt-panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem; }
.pt-panel h3 { font-size: .95rem; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.pt-panel h3 .count { margin-left: auto; font-size: .76rem; background: var(--bg-muted); border-radius: 999px; padding: .05rem .5rem; color: var(--text-soft); }
.pt-backlog { display: flex; flex-direction: column; gap: .4rem; max-height: 46vh; overflow-y: auto; }
.pt-backlog-item { border: 1px solid var(--border); border-left: 4px solid var(--block-color, var(--border-strong)); border-radius: 6px; padding: .45rem .6rem; font-size: .8rem; cursor: grab; background: var(--bg); }
.pt-backlog-item:hover { border-color: var(--primary); }
.pt-backlog-item .b-title { font-weight: 700; display: flex; gap: .4rem; align-items: center; }
.pt-backlog-item .b-sub { color: var(--text-soft); font-size: .76rem; }
.pt-backlog-item .b-meta { color: var(--text-muted); font-size: .72rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.pt-backlog-item.dragging { opacity: .5; }
.pt-filter { display: grid; gap: .4rem; margin-bottom: .6rem; }
.pt-filter select, .pt-filter .input { padding: .35rem .5rem; font-size: .84rem; }
.pt-konflikte { display: flex; flex-direction: column; gap: .35rem; max-height: 30vh; overflow-y: auto; font-size: .8rem; }
.pt-konflikt { padding: .4rem .55rem; border-radius: 6px; background: var(--warning-soft); color: var(--warning); border: 1px solid #fcd34d; }
.pt-konflikt.hart { background: var(--danger-soft); color: var(--danger); border-color: #fca5a5; }
.pt-konflikt.ok { background: var(--bg-soft); color: var(--text-soft); border-color: var(--border); }
.pt-konflikt b { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; margin-right: .3rem; }
.pt-ghost { position: fixed; z-index: 500; pointer-events: none; opacity: .9; box-shadow: var(--shadow-lg); }
/* Vorschau beim Ueberfahren. z-index 60: ueber der Tafel (max. 6), aber unter
   dem Dialog-Hintergrund und unter dem Ziehschatten. */
.pt-pop { position: fixed; z-index: 60; display: none; max-width: 320px; background: var(--bg);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    padding: .55rem .7rem; font-size: .84rem; line-height: 1.4; pointer-events: none; }
.pt-pop.open { display: block; }
.pt-pop .pp-kopf { font-weight: 600; margin-bottom: .25rem; }
.pt-pop .pp-zeile { color: var(--text-soft); font-size: .8rem; display: flex; align-items: center; gap: .4rem; }
.pt-pop .pp-ampel { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.pt-pop .pp-konflikt { color: var(--danger); font-size: .8rem; margin-top: .25rem; }
@media (hover: none) { .pt-pop { display: none !important; } }
.pt-backlog-item .nr-pre { font-weight: 500; color: var(--text-muted); }
.pt-row.touch-target { background-color: var(--primary-soft); }
.pt-hint { font-size: .8rem; color: var(--text-muted); margin-top: .5rem; }
.pt-detail dl { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .3rem .8rem; margin: 0; font-size: .92rem; }
.pt-detail dt { color: var(--text-muted); } .pt-detail dd { margin: 0; }
.pt-mobile-list { display: none; }
@media (max-width: 760px) {
    .pt-board { display: none; }
    .pt-mobile-list { display: block; }
    .pt-side { position: static; }

    /* Die Werkzeugleiste nahm am Handy ein Drittel des Bildschirms ein, bevor der
       erste Auftrag zu sehen war. Jetzt: eine Zeile Navigation, Legende eingeklappt,
       Drucken nur am großen Bildschirm. */
    .pt-toolbar { gap: .4rem; margin-bottom: .6rem; }
    .pt-toolbar .btn-heute { order: 1; }
    .pt-toolbar .btn-zurueck { order: 2; }
    .pt-toolbar .pt-range { min-width: 0; flex: 1 1 auto; font-size: .95rem; order: 3; }
    .pt-toolbar .btn-vor { order: 4; }
    .pt-toolbar .view-switch { order: 5; width: 100%; justify-content: space-between; }
    .pt-toolbar .btn-drucken { display: none; }
    .pt-legend { order: 6; width: 100%; margin-left: 0; gap: .5rem .9rem; }
    .pt-legend.einklappbar > summary { cursor: pointer; font-size: .8rem; color: var(--text-muted); list-style: none; padding: .2rem 0; }
    .pt-legend.einklappbar > summary::-webkit-details-marker { display: none; }
    .pt-legend.einklappbar > summary::before { content: '▸ '; }
    .pt-legend.einklappbar[open] > summary::before { content: '▾ '; }
    .pt-legend.einklappbar .pt-legend-inhalt { display: flex; gap: .5rem .9rem; flex-wrap: wrap; padding-top: .4rem; }
}

/* Spalten, die nur am großen Bildschirm Sinn ergeben, und ihr Ersatz am Handy.
   Eine achtspaltige Tabelle ist auf 375 px nicht lesbar – dort zählen
   Auftrag, Liefertermin und Ampel, der Rest wandert in die erste Zelle. */
.nur-klein { display: none; }
@media (max-width: 760px) {
    .nur-gross { display: none !important; }
    .nur-klein { display: block; }
    .zeile-zusatz { font-size: .76rem; color: var(--text-muted); margin-top: .25rem; line-height: 1.45; }
    /* Feste Spaltenbreiten, sonst zieht die Zusatzzeile die erste Spalte so breit,
       dass Liefertermin und Ampel wieder aus dem Bild wandern. */
    .data-table { min-width: 0; table-layout: fixed; width: 100%; }
    .data-table th, .data-table td { padding-left: .5rem; padding-right: .5rem; overflow-wrap: anywhere; }
    .data-table th:first-child, .data-table td:first-child { width: 46%; }
    /* Datum und Ampel dürfen nicht umbrechen – „26.10.202 / 6" ist unlesbar.
       Stattdessen etwas kleinere Schrift, dann passt beides in seine Spalte. */
    .data-table th.nowrap, .data-table td.nowrap { white-space: nowrap; font-size: .8rem; }
    .data-table .ampel { font-size: .72rem; padding: .15rem .35rem; white-space: nowrap; }
}

/* Kapazität: Umschaltzeile Wochen/Monate über der Tabelle */
.kap-raster { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.kap-raster .view-switch a.vs-btn { text-decoration: none; display: inline-flex; align-items: center; }
@media (max-width: 760px) { .kap-raster { gap: .5rem; } .kap-raster .btn-group { width: 100%; } }

/* Leerer Tag: eine Zeile statt einer ganzen Karte */
.day-card.leer { display: flex; align-items: baseline; justify-content: space-between;
    padding: .45rem .8rem; margin-bottom: .45rem; background: var(--bg-soft); }
.day-card.leer h4 { margin: 0; font-size: .9rem; font-weight: 600; color: var(--text-soft); }
.day-card .dc-leer { font-size: .8rem; color: var(--text-muted); }
.day-card h4 { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.day-card .dc-zahl { font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.day-card { border: 1px solid var(--border); border-radius: var(--radius); padding: .8rem; margin-bottom: .8rem; background: var(--bg); }
.day-card h4 { margin-bottom: .5rem; }
.day-card .dc-item { display: flex; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--border); font-size: .88rem; }
.day-card .dc-time { font-family: var(--mono); color: var(--text-muted); white-space: nowrap; font-size: .8rem; }

/* ---------- Maschinenmonitor (Tablet) ---------- */
body.monitor-body { background: var(--accent); color: #fff; min-height: 100vh; }
.mon-wrap { max-width: 1100px; margin: 0 auto; padding: 1.2rem 1.4rem 2rem; }
.mon-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.mon-head h1 { font-size: 1.6rem; margin: 0; color: #fff; }
.mon-head .mon-sub { color: #94a3b8; font-size: .95rem; }
.mon-head .mon-clock { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mon-head a { color: #cbd5e1; }
.mon-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 860px) { .mon-grid { grid-template-columns: minmax(0, 1fr); } }
.mon-card { background: #17303f; border: 1px solid #27465c; border-radius: 14px; padding: 1.3rem 1.4rem; }
.mon-label { font-size: .8rem; font-weight: 800; letter-spacing: .12em; color: #94a9b8; margin-bottom: .6rem; }
.mon-now { border-color: var(--primary); background: #0d3550; }
.mon-now .mon-order { font-size: 2.3rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.mon-now .mon-title { font-size: 1.35rem; margin-top: .3rem; }
.mon-now .mon-meta { color: #c6d5e0; margin-top: .6rem; font-size: 1.02rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.mon-status { display: inline-flex; align-items: center; gap: .45rem; margin-top: .8rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255,255,255,.08); font-weight: 700; font-size: .95rem; }
.mon-status.st-laeuft { background: rgba(22,163,74,.25); color: #86efac; }
.mon-status.st-pause { background: rgba(217,119,6,.25); color: #fcd34d; }
.mon-status.st-problem { background: rgba(220,38,38,.3); color: #fca5a5; }
.mon-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1.3rem; }
.mon-btn { padding: 1.1rem .8rem; font-size: 1.2rem; font-weight: 800; border-radius: 12px; border: 0; cursor: pointer; font-family: inherit; color: #fff; min-height: 76px; touch-action: manipulation; }
.mon-btn:disabled { opacity: .4; cursor: not-allowed; }
.mon-btn.start { background: #16a34a; } .mon-btn.fertig { background: #0369a1; } .mon-btn.problem { background: #dc2626; } .mon-btn.pause { background: #d97706; } .mon-btn.weiter { background: #16a34a; }
.mon-next .mon-order { font-size: 1.5rem; font-weight: 800; }
.mon-next .mon-title { color: #c6d5e0; }
.mon-list { list-style: none; padding: 0; margin: 0; }
.mon-list li { display: flex; gap: .8rem; padding: .6rem 0; border-top: 1px solid #27465c; font-size: 1rem; }
.mon-list li .t { font-family: var(--mono); color: #94a3b8; white-space: nowrap; }
.mon-empty { color: #94a3b8; font-size: 1.05rem; padding: .5rem 0; }
.mon-offline { position: fixed; top: 0; left: 0; right: 0; background: #b91c1c; color: #fff; text-align: center; padding: .4rem; font-size: .9rem; display: none; }
.mon-offline.show { display: block; }
.mon-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }
.mon-tile { display: block; padding: 1rem 1.1rem; border: 1px solid var(--border); border-left: 6px solid var(--block-color, var(--primary)); border-radius: var(--radius); background: var(--bg); color: var(--text); }
.mon-tile:hover { border-color: var(--primary); color: var(--text); }
.mon-tile strong { display: block; font-size: 1.05rem; }
.mon-tile span { color: var(--text-muted); font-size: .85rem; }

/* ---------- Auftrag: Arbeitsgänge ---------- */
.ops-table td.grip { cursor: grab; color: var(--text-muted); width: 28px; text-align: center; }
.ops-table tr.dragging { opacity: .4; }
.ops-inline { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr auto; gap: .5rem; align-items: end; }
@media (max-width: 800px) { .ops-inline { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.op-rows .op-row { display: grid; grid-template-columns: 30px 2fr 1fr 1fr 1.6fr 34px; gap: .45rem; align-items: center; margin-bottom: .45rem; }
@media (max-width: 800px) { .op-rows .op-row { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); } }
.op-rows .op-row .input, .op-rows .op-row select { padding: .45rem .55rem; font-size: .9rem; }
.op-rows .op-nr { color: var(--text-muted); font-weight: 700; text-align: center; }
.icon-btn { width: 34px; height: 34px; flex-shrink: 0; display: inline-grid; place-items: center; cursor: pointer; border: 1px solid var(--border-strong); background: var(--bg); border-radius: var(--radius-sm); font-size: .95rem; color: var(--text-soft); font-family: inherit; }
.icon-btn:hover { background: var(--bg-soft); color: var(--text); }
.timeline { list-style: none; padding: 0; margin: 0; font-size: .86rem; }
.timeline li { padding: .45rem 0; border-bottom: 1px solid var(--border); display: flex; gap: .7rem; }
.timeline li:last-child { border-bottom: 0; }
.timeline .tl-time { color: var(--text-muted); white-space: nowrap; font-family: var(--mono); font-size: .78rem; }

/* ---------- Onboarding ---------- */
.onb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.4rem; }
@media (max-width: 900px) { .onb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.onb-step { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; background: var(--bg); }
.onb-step.done { border-color: var(--success); background: var(--success-soft); }
.onb-step.current { border-color: var(--primary-ink); box-shadow: 0 0 0 3px var(--primary-soft); }
.onb-step .n { font-size: .75rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.onb-step strong { display: block; margin: .2rem 0 .3rem; }
.onb-step p { font-size: .86rem; color: var(--text-soft); margin: 0; }

/* ---------- Import ---------- */
.import-steps { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.2rem; font-size: .86rem; }
.import-steps span { padding: .3rem .7rem; border-radius: 999px; background: var(--bg-muted); color: var(--text-muted); font-weight: 600; }
.import-steps span.active { background: var(--primary); color: var(--on-primary); }
.import-steps span.done { background: var(--success-soft); color: var(--success); }
.map-table td select { min-width: 180px; }
.row-err td { background: var(--danger-soft) !important; }
.row-warn td { background: var(--warning-soft) !important; }
.drop-zone { border: 2px dashed var(--border-strong); border-radius: var(--radius); padding: 2rem; text-align: center; color: var(--text-soft); background: var(--bg-soft); }
.drop-zone input[type="file"] { margin-top: .8rem; }

/* ---------- Admin ---------- */
.admin-tag { background: var(--primary); color: var(--on-primary); font-size: .6rem; font-weight: 700; padding: .1rem .35rem; border-radius: 4px; vertical-align: middle; margin-left: .3rem; }
.health-row { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.health-row:last-child { border-bottom: 0; }
.health-icon { width: 1.2rem; text-align: center; font-weight: 800; flex-shrink: 0; }
.health-label { color: var(--text-soft); }
.health-value { margin-left: auto; font-size: .84rem; color: var(--text-muted); max-width: 55%; text-align: right; word-break: break-word; }
.dv-wrap { margin: .6rem 0 0; }
.dv-plot { position: relative; height: 132px; }
.dv-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--border); }
.dv-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--dv-anzahl, 12), minmax(0, 1fr)); align-items: end; }
.dv-col { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.dv-balken { width: min(24px, 62%); background: var(--primary-ink); border-radius: 4px 4px 0 0; }
.dv-null { width: min(24px, 62%); height: 2px; background: var(--border); }
.dv-ticks { display: grid; margin-top: .45rem; font-size: .68rem; color: var(--text-muted); }
.dv-ticks span { text-align: center; white-space: nowrap; overflow: hidden; }
.dv-reihen { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.dv-reihe { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 5rem; align-items: center; gap: .8rem; }
.dv-name { font-size: .9rem; color: var(--text-soft); }
.dv-schiene { height: 12px; background: var(--bg-muted); border-radius: 999px; overflow: hidden; }
.dv-fuellung { display: block; height: 100%; border-radius: 999px; background: var(--primary-ink); }
.dv-wert { font-size: .95rem; font-weight: 700; text-align: right; }
.subpanel { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); padding: .9rem 1rem; }
.subpanel-title { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 .55rem; }
.cmd { display: flex; align-items: center; gap: .5rem; }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; white-space: pre; font-size: .78rem; padding: .5rem .65rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ---------- Prosa / FAQ / Wissen ---------- */
.prose { max-width: 780px; margin: 0 auto; }
.prose h2 { margin-top: 2.2rem; font-size: 1.5rem; }
.prose h3 { margin-top: 1.6rem; }
.prose p, .prose li { color: var(--text-soft); font-size: 1.02rem; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose blockquote { margin: 1.4rem 0; padding: .9rem 1.2rem; border-left: 4px solid var(--primary-ink); background: var(--bg-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.prose blockquote p { margin: 0; color: var(--text); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.prose strong { color: var(--text); }
.prose h2[id], .prose h3[id] { scroll-margin-top: 90px; }
.doc-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.doc-table th, .doc-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.doc-table th { background: var(--bg-soft); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .6rem; background: var(--bg); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: .9rem 1.1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--primary-ink); line-height: 1; flex-shrink: 0; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 1.1rem 1rem; margin: 0; color: var(--text-soft); }
.article-head { padding: 3rem 0 1.5rem; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.article-head .crumbs { font-size: .85rem; color: var(--text-muted); margin-bottom: .8rem; }
.article-head .crumbs a { color: var(--text-soft); }
.article-head h1 { max-width: 24ch; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.article-head .meta { color: var(--text-muted); font-size: .88rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 2.5rem; padding-top: 2rem; }
@media (max-width: 960px) { .article-layout { grid-template-columns: minmax(0, 1fr); } .article-toc { display: none; } }
.article-toc { position: sticky; top: 86px; font-size: .88rem; }
.article-toc h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
/* Nur die Inhaltsverzeichnis-Links – nicht die Knöpfe in der Karte darunter,
   die sonst ihre Schriftfarbe, Ausrichtung und den Innenabstand verlieren. */
.article-toc a:not(.btn) { display: block; color: var(--text-soft); padding: .25rem 0; }
.article-toc a.l3 { padding-left: .8rem; font-size: .84rem; }
.article-toc .btn-block { display: block; text-align: center; margin-top: .4rem; }
.article-cta { margin: 2.4rem 0 1rem; padding: 1.4rem 1.6rem; border-radius: var(--radius); background: var(--accent); color: #fff; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; justify-content: space-between; }
.article-cta p { margin: 0; color: #d3e6f5; }
.article-cta strong { color: #fff; display: block; font-size: 1.05rem; margin-bottom: .15rem; }
.article-cta .btn { background: #fff; color: var(--accent); }
.wissen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 960px) { .wissen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .wissen-grid { grid-template-columns: minmax(0, 1fr); } }
.wissen-card { display: flex; flex-direction: column; color: var(--text); }
.wissen-card:hover { border-color: var(--primary); color: var(--text); }
.wissen-card .wc-cat { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--primary-ink); margin-bottom: .4rem; }
.wissen-card h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.wissen-card p { color: var(--text-soft); font-size: .92rem; flex: 1; margin-bottom: .6rem; }
.wissen-card .wc-meta { font-size: .78rem; color: var(--text-muted); }
.cl-liste { list-style: none; padding: 0; margin: 0; }
.cl-tag { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.cl-datum { font-weight: 800; margin-bottom: .5rem; }
.cl-eintraege { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.cl-eintraege li { display: flex; gap: .7rem; align-items: flex-start; }
.cl-art { flex: none; min-width: 84px; text-align: center; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; }

/* ---------- Plantafel-Mockup (Marketing, reines HTML) ---------- */
.mock { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-lg); overflow: hidden; font-size: .78rem; }
.mock-bar { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.mock-bar .dot { width: 9px; height: 9px; border-radius: 999px; background: var(--border-strong); }
.mock-bar .mb-title { font-weight: 700; margin-left: .4rem; }
.mock-bar .mb-range { margin-left: auto; color: var(--text-muted); }
.mock-grid { display: grid; grid-template-columns: 150px repeat(5, minmax(0, 1fr)); }
.mock-grid > div { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); min-height: 46px; position: relative; }
.mock-grid .mh { background: var(--bg-soft); font-weight: 700; padding: .35rem .5rem; min-height: 0; color: var(--text-soft); }
.mock-grid .mh.today { color: var(--primary-ink); background: var(--primary-soft); }
.mock-grid .ml { padding: .4rem .55rem; font-weight: 700; background: var(--bg); border-left: 4px solid var(--block-color, var(--primary)); }
.mock-grid .ml span { display: block; font-weight: 400; color: var(--text-muted); font-size: .7rem; }
.mock-block { position: absolute; top: 6px; height: 34px; border-radius: 5px; background: var(--bg); border: 1px solid var(--border-strong); border-left: 4px solid var(--block-color, var(--primary)); padding: .2rem .4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.2; box-shadow: var(--shadow-sm); }
.mock-block b { display: block; font-size: .74rem; }
.mock-block i { font-style: normal; color: var(--text-muted); font-size: .68rem; }
.mock-block.laeuft { background: var(--success-soft); border-color: var(--success); }
.mock-block.rot { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(220,38,38,.2); }
.mock-block .mb-dot { position: absolute; right: 5px; top: 5px; width: 7px; height: 7px; border-radius: 999px; }
.mock-foot { display: flex; gap: 1rem; padding: .5rem .8rem; border-top: 1px solid var(--border); background: var(--bg-soft); color: var(--text-muted); flex-wrap: wrap; }
.mock-foot span { display: inline-flex; align-items: center; gap: .3rem; }
.mock-foot i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
@media (max-width: 700px) { .mock-grid { grid-template-columns: 110px repeat(3, minmax(0, 1fr)); } .mock-grid .hide-sm { display: none; } }

/* ---------- Cookie-Hinweis ---------- */
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 1000; pointer-events: none; }
.cookie-banner[hidden] { display: none; }
.cookie-inner { pointer-events: auto; max-width: 720px; margin: 0 auto; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: .9rem 1.2rem; }
.cookie-text { flex: 1; min-width: 240px; }
.cookie-text > strong { display: block; font-size: .95rem; margin-bottom: .15rem; }
.cookie-text p { margin: 0; font-size: .85rem; color: var(--text-soft); line-height: 1.5; }
.cookie-actions { display: flex; gap: .5rem; flex-shrink: 0; }
@media (max-width: 600px) { .cookie-actions { width: 100%; } .cookie-actions .btn { flex: 1; } }

/* ---------- Druck ---------- */
.print-only { display: none; }
@media print {
    @page { size: landscape; margin: 1cm; }
    :root, :root.theme-dark, :root.theme-auto { --bg: #fff; --bg-soft: #fff; --bg-muted: #f3f4f6; --text: #000; --text-soft: #1f2937; --text-muted: #4b5563; --border: #9ca3af; }
    body { background: #fff; color: #000; }
    .sidebar, .app-topbar, .site-header, .site-footer, .pt-toolbar, .pt-side, .no-print, .modal-backdrop, .cookie-banner, .trial-banner { display: none !important; }
    .app-content { padding: 0; }
    .print-only { display: block; }
    .pt-board { max-height: none; overflow: visible; border: 0; }
    .pt-block, .pt-row-label, .pt-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .print-table { width: 100%; border-collapse: collapse; font-size: 11px; }
    .print-table th, .print-table td { border: 1px solid #9ca3af; padding: 4px 6px; vertical-align: top; }
    .print-table th { background: #f3f4f6; }
    .print-table .pb { display: block; border-left: 3px solid #0369a1; padding-left: 4px; margin-bottom: 3px; }
}

/* ---------- Handy-Feinschliff ---------- */
@media (max-width: 600px) {
    .app-content { padding: .9rem .75rem 2rem; }
    .app-topbar { padding: 0 .7rem; gap: .5rem; }
    .app-topbar form.search { display: none; }
    .btn { min-height: 42px; }
    .btn-sm { min-height: 36px; }
    .input, select, textarea { font-size: 1rem; }
    .modal-backdrop { padding: .5rem; align-items: end; }
    .modal { padding: 1.1rem; max-height: 92dvh; }
    .kpi-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .kpi-num { font-size: 1.5rem; }
    .btn-lg, .btn-block { white-space: normal; }
    .page-head .btn-group { width: 100%; }
    /* Vorher 560 px: die Tabelle ragte am Handy immer aus dem Bild, obwohl die
       entbehrlichen Spalten (.nur-gross) schon ausgeblendet sind. Mit festen
       Spaltenbreiten passt sie in den Bildschirm. */
    .data-table { min-width: 0; table-layout: fixed; }
    /* Ausnahme: die Kapazitätstabellen haben bis zu 18 Zeitspalten. Fest verteilt
       blieben davon 25 px je Spalte – aus „Nov. 26" wurde ein „N". Sie behalten
       ihre natürliche Breite und scrollen im Rahmen waagerecht. */
    .kap-tabelle { table-layout: auto; }
    .kap-tabelle th, .kap-tabelle td { min-width: 76px; }
    .kap-tabelle th:first-child, .kap-tabelle td:first-child { min-width: 120px; width: auto; }
    .hero { padding: 2.6rem 0 2.2rem; }
    .section { padding: 2.6rem 0; }
}