/* ============================================================
   Autohaus Bader — Kundenportal „Mein Auto“ (kunde/)
   Marken-Look der Website (Anthrazit / Hell / Signalgelb, Condensed-Display),
   mobil zuerst: App-Gefühl mit Tab-Leiste unten, Karten, dunkle Bühne.
   Keine externen Ressourcen, Systemschriften. Gelb nie als Text auf Hell.
   ============================================================ */

:root {
  --ink: #17191c; --ink-soft: #24272b; --paper: #f6f5f2; --card: #ffffff; --steel: #565b61; --line: #e3e1da;
  --accent: #f2c200; --accent-dk: #d9ae00; --amber-ink: #7a6200;
  --ok: #1d7a1d; --ok-bg: #eaf6ea; --warn: #935f00; --warn-bg: #fdf3dd; --crit: #c02020; --crit-bg: #fdecec; --note: #1a5fb0; --note-bg: #e9f0fa;
  --focus: #1a6fd4; --radius: 14px;
  --display: "Bahnschrift", "Avenir Next Condensed", "HelveticaNeue-CondensedBold", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tab-h: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--body); padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; line-height: 1.05; margin: 0; }
h1 { font-size: clamp(1.6rem, 6vw, 2.3rem); }
h2 { font-size: clamp(1.15rem, 4.2vw, 1.45rem); }
h3 { font-size: 1rem; letter-spacing: .06em; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--steel); }
.eyebrow::before { content: ""; width: 28px; height: 9px; flex: none; border-top: 3px solid var(--accent); border-bottom: 3px solid var(--accent); }
.on-dark .eyebrow { color: #b9bcc0; }
.muted { color: var(--steel); font-size: .9rem; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* ---------- Demo-Band ---------- */
.demo-band { background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, var(--ink) 12px 24px); padding: 3px; font-size: 0; }
.demo-band-inner { background: var(--ink); color: #fff; font-size: .74rem; letter-spacing: .04em; padding: 5px 12px; text-align: center; }
.demo-band-inner b { color: var(--accent); font-family: var(--display); text-transform: uppercase; }

/* ---------- Kopfzeile ---------- */
.kp-top { position: sticky; top: 0; z-index: 40; background: var(--ink); color: #fff; }
.kp-top .wrap { display: flex; align-items: center; gap: 12px; min-height: 58px; }
.kp-marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.logo-mark { width: 30px; height: 22px; flex: none; display: grid; align-content: center; gap: 4px; transform: skewX(-16deg); }
.logo-mark i { display: block; height: 4px; background: var(--accent); }
.kp-marke .l1 { display: block; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: #b9bcc0; }
.kp-marke .l2 { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 1rem; line-height: 1.05; }
.kp-top .spacer { flex: 1; }
.kp-fzwahl { background: var(--ink-soft); color: #fff; border: 1px solid #3a3f46; border-radius: 99px; padding: 7px 32px 7px 12px; font: inherit; font-size: .86rem; max-width: 46vw;
  appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #f2c200 50%), linear-gradient(135deg, #f2c200 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.kp-konto { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-family: var(--display); font-size: .85rem; text-decoration: none; letter-spacing: .04em; flex: none; }

/* ---------- Tab-Leiste (Handy unten, Desktop oben im Kopf) ---------- */
.kp-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
.kp-tabs a { display: grid; justify-items: center; align-content: center; gap: 3px; text-decoration: none; color: var(--steel); font-size: .66rem; font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; }
.kp-tabs a svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.kp-tabs a[aria-current="page"] { color: var(--ink); }
.kp-tabs a[aria-current="page"] svg { stroke: var(--ink); }
.kp-tabs a[aria-current="page"]::after { content: ""; width: 26px; height: 3px; background: var(--accent); border-radius: 2px; }
@media (min-width: 900px) {
  body { padding-bottom: 40px; }
  .kp-tabs { position: static; display: flex; gap: 4px; height: auto; background: transparent; border: 0; backdrop-filter: none; padding: 0; }
  .kp-tabs a { grid-auto-flow: column; gap: 8px; font-size: .82rem; padding: 10px 14px; color: #d8d9d6; border-radius: 8px; }
  .kp-tabs a svg { width: 18px; height: 18px; }
  .kp-tabs a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
  .kp-tabs a[aria-current="page"] svg { stroke: var(--accent); }
  .kp-tabs a[aria-current="page"]::after { display: none; }
  .kp-top .wrap { min-height: 64px; }
}

/* ---------- Bühne (Hero) ---------- */
.kp-hero { background: radial-gradient(1200px 420px at 50% 0%, #2c3137 0%, var(--ink) 60%); color: #eceded; padding: 18px 0 22px; overflow: hidden; }
.kp-hero .wrap { display: grid; gap: 14px; }
.kp-gruss { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.kp-gruss h1 { color: #fff; }
.kp-gruss .fz { color: #b9bcc0; font-size: .95rem; }
.kp-kennz { display: inline-flex; align-items: stretch; border-radius: 6px; overflow: hidden; border: 2px solid #d8d9d6; font-family: var(--mono); font-weight: 700; font-size: 1rem; background: #fff; color: var(--ink); }
.kp-kennz i { width: 14px; background: #2a5fd3; display: block; }
.kp-kennz span { padding: 2px 10px; letter-spacing: .08em; }
.auto-stage { position: relative; border-radius: 18px; background: linear-gradient(180deg, #1d2024 0%, #121416 100%); border: 1px solid #2c3035; padding: 8px 8px 0; }
.auto-stage::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 40px); pointer-events: none; }
.auto-buehne { display: block; width: 100%; height: auto; }
.status-pill { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 99px; font-family: var(--display); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.14); }
.status-pill .dot { width: 9px; height: 9px; border-radius: 50%; background: #9aa0a6; }
.status-pill.s-in_werkstatt { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.status-pill.s-in_werkstatt .dot { background: var(--ink); animation: kp-puls 1.4s ease-in-out infinite; }
.status-pill.s-fertig { background: #1d7a1d; border-color: #1d7a1d; }
.status-pill.s-fertig .dot { background: #fff; }
.status-pill.s-wartet .dot { background: var(--accent); animation: kp-puls 1.4s ease-in-out infinite; }
.status-pill.s-geplant .dot { background: #6aa9e9; }
.kp-statuszeile { display: grid; gap: 8px; grid-template-columns: 1fr auto; align-items: center; }
.kp-statuszeile p { margin: 0; font-size: 1.02rem; }
.kp-eta { text-align: right; }
.kp-eta .zeit { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--accent); letter-spacing: .02em; }
.kp-eta .lbl { font-size: .72rem; color: #b9bcc0; text-transform: uppercase; letter-spacing: .1em; font-family: var(--display); }
.kp-fortschritt { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; }
.kp-fortschritt i { display: block; height: 100%; background: var(--accent); transition: width .6s ease; }

/* Animation: Bühne hebt, Mechaniker schraubt */
.auto-buehne .auto, .auto-buehne .buehne .arme { transform-box: fill-box; }
.auto-buehne.z-in_werkstatt .auto { animation: kp-heben 2.6s cubic-bezier(.4,0,.2,1) .4s forwards; }
.auto-buehne.z-in_werkstatt .buehne .arme { animation: kp-heben 2.6s cubic-bezier(.4,0,.2,1) .4s forwards; }
.auto-buehne.z-in_werkstatt .auto .schatten { animation: kp-schatten 2.6s cubic-bezier(.4,0,.2,1) .4s forwards; }
.auto-buehne .mechaniker { opacity: 0; animation: kp-erscheinen .6s ease 2.8s forwards; }
.auto-buehne .mechaniker .arm-r { transform-box: fill-box; transform-origin: 30% 95%; animation: kp-schrauben 1.1s ease-in-out 3.4s infinite alternate; }
.auto-buehne.z-fertig .haken { transform-box: fill-box; transform-origin: center; animation: kp-pop .5s cubic-bezier(.2,1.4,.4,1) .3s both; }
.auto-buehne.z-wartet .uhr { transform-box: fill-box; transform-origin: center; animation: kp-puls 2s ease-in-out infinite; }
.auto-buehne .rad { transform-box: fill-box; transform-origin: center; }
@keyframes kp-heben { from { transform: translateY(0); } to { transform: translateY(-96px); } }
@keyframes kp-schatten { from { transform: scaleX(1); opacity: .45; } to { transform: scaleX(.85); opacity: .22; } }
@keyframes kp-erscheinen { from { opacity: 0; transform: translate(340px, 320px); } to { opacity: 1; transform: translate(340px, 300px); } }
@keyframes kp-schrauben { from { transform: rotate(-10deg); } to { transform: rotate(16deg); } }
@keyframes kp-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes kp-puls { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .auto-buehne.z-in_werkstatt .auto, .auto-buehne.z-in_werkstatt .buehne .arme { animation: none; transform: translateY(-96px); }
  .auto-buehne.z-in_werkstatt .auto .schatten { animation: none; transform: scaleX(.85); opacity: .22; }
  .auto-buehne .mechaniker { animation: none; opacity: 1; }
  .auto-buehne .mechaniker .arm-r, .status-pill .dot, .auto-buehne.z-wartet .uhr { animation: none; }
}

/* ---------- Karten & Kacheln ---------- */
main.kp-main { padding: 18px 0 10px; }
.kp-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .kp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.kachel { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 12px; display: grid; gap: 4px; text-decoration: none; color: inherit; min-height: 112px; }
.kachel::before { content: ""; position: absolute; top: -1px; left: 14px; width: 30px; height: 9px; border-top: 3px solid var(--accent); border-bottom: 3px solid var(--accent); }
.kachel .k-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--steel); font-family: var(--display); margin-top: 6px; }
.kachel .k-wert { font-family: var(--display); font-size: 1.6rem; line-height: 1.05; letter-spacing: .01em; }
.kachel .k-sub { font-size: .8rem; color: var(--steel); }
.kachel.ok .k-wert { color: var(--ok); } .kachel.bald .k-wert { color: #b36b00; } .kachel.faellig .k-wert, .kachel.ueberfaellig .k-wert { color: var(--crit); }
.kachel.breit { grid-column: 1 / -1; }
a.kachel:hover { border-color: var(--steel); }
.karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 12px; }
.karte > h2, .karte > h3 { margin-bottom: 10px; }
.karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.karte-kopf a { font-size: .86rem; }

/* Plakette (§57a) */
.plakette { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 5px solid var(--steel); font-family: var(--display); line-height: 1; text-align: center; box-shadow: 0 0 0 1px var(--line); }
.plakette b { display: block; font-size: 1.25rem; } .plakette small { display: block; font-size: .66rem; color: var(--steel); }
.plakette.ok { border-color: #2f9e44; } .plakette.bald { border-color: var(--accent-dk); } .plakette.faellig { border-color: #e08700; } .plakette.ueberfaellig { border-color: var(--crit); color: var(--crit); } .plakette.unbekannt { border-style: dashed; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 600; padding: 3px 10px; border-radius: 99px; background: var(--paper); color: var(--steel); border: 1px solid var(--line); white-space: nowrap; }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; } .badge.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge.crit { background: var(--crit-bg); color: var(--crit); border-color: transparent; } .badge.note { background: var(--note-bg); color: var(--note); border-color: transparent; }
.badge.acc { background: var(--accent); color: var(--ink); border-color: transparent; }

/* Verschleiß-Liste */
.teile { display: grid; gap: 10px; }
.teil { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.teil .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--paper); display: grid; place-items: center; }
.teil .ico svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.teil .t-name { font-weight: 600; }
.teil .t-text { font-size: .82rem; color: var(--steel); }
.teil .t-bar { grid-column: 2 / -1; height: 6px; background: var(--paper); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.teil .t-bar i { display: block; height: 100%; background: var(--ok); }
.teil.bald .t-bar i { background: #e08700; } .teil.faellig .t-bar i { background: var(--crit); } .teil.unbekannt .t-bar i { background: #c9c6bd; }
.teil.faellig .ico { background: var(--crit-bg); } .teil.bald .ico { background: var(--warn-bg); } .teil.ok .ico { background: var(--ok-bg); }

/* Mängel */
.maengel { display: grid; gap: 8px; }
.mangel { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; align-items: start; }
.mangel .schwere { width: 10px; height: 100%; min-height: 36px; border-radius: 4px; }
.mangel.leicht .schwere { background: var(--accent); } .mangel.schwer .schwere { background: var(--crit); } .mangel.gefahr .schwere { background: #7a0c0c; }
.mangel .m-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 600; }
.mangel .m-text { font-size: .9rem; }
.mangel .m-meta { font-size: .78rem; color: var(--steel); }
.mangel.behoben { opacity: .65; }
.mangel.behoben .m-kopf::after { content: "✓ behoben"; font-size: .72rem; color: var(--ok); font-weight: 600; }

/* Historie / Dokumente */
.zeitleiste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.zeitleiste li { display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.zeitleiste li:last-child { border-bottom: 0; }
.zeitleiste .wann { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--steel); font-size: .8rem; line-height: 1.2; }
.zeitleiste .wann b { display: block; color: var(--ink); font-size: 1.15rem; }
.zeitleiste .was { display: grid; gap: 2px; }
.zeitleiste .was b { font-weight: 600; }
.zeitleiste .meta { font-size: .8rem; color: var(--steel); display: flex; gap: 8px; flex-wrap: wrap; }
.doks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dok { display: grid; gap: 6px; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.dok .vorschau { aspect-ratio: 4 / 3; background: var(--paper); display: grid; place-items: center; overflow: hidden; }
.dok .vorschau img { width: 100%; height: 100%; object-fit: cover; }
.dok .vorschau svg { width: 40px; height: 40px; stroke: var(--steel); fill: none; stroke-width: 1.6; }
.dok .d-text { padding: 0 10px 10px; display: grid; gap: 2px; }
.dok .d-text b { font-size: .9rem; line-height: 1.25; }
.dok .d-text span { font-size: .76rem; color: var(--steel); }

/* ---------- Formulare & Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem;
  padding: 12px 18px; border-radius: 10px; border: 2px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none; cursor: pointer; min-height: 46px; }
.btn:hover { background: var(--ink-soft); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--ink); } .btn-accent:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: #fff; }
.on-dark .btn-ghost { color: #fff; border-color: #fff; } .on-dark .btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-sm { padding: 7px 12px; font-size: .78rem; min-height: 36px; border-width: 1.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.f-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .f-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .f-row.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.f-field { display: grid; gap: 5px; margin-bottom: 12px; }
.f-field label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--steel); font-family: var(--display); }
.f-field .opt { text-transform: none; letter-spacing: 0; color: #9aa0a6; }
input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 1.5px solid #c9c6bd; border-radius: 10px; padding: 12px 13px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
textarea { min-height: 96px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; accent-color: var(--ink); flex: none; margin: 2px 0 0; }
input[type="file"] { padding: 9px; }
.f-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--steel); margin: 6px 0 14px; }
.f-field.invalid input, .f-field.invalid select { border-color: var(--crit); }
.f-error { color: var(--crit); font-size: .8rem; }
.callout { border: 1px solid var(--line); border-left: 4px solid var(--steel); background: #fff; border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-size: .92rem; }
.callout .tag { display: block; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; margin-bottom: 3px; }
.callout.good { border-left-color: var(--ok); background: var(--ok-bg); } .callout.good .tag { color: var(--ok); }
.callout.note { border-left-color: var(--note); background: var(--note-bg); } .callout.note .tag { color: var(--note); }
.callout.warn { border-left-color: #e08700; background: var(--warn-bg); } .callout.warn .tag { color: var(--warn); }
.callout.crit { border-left-color: var(--crit); background: var(--crit-bg); } .callout.crit .tag { color: var(--crit); }
.callout p { margin: 0; }

/* ---------- Login/Registrierung ---------- */
.kp-auth { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(900px 500px at 50% -10%, #2c3137 0%, var(--ink) 60%); padding: 20px; }
.kp-auth-card { width: min(440px, 100%); background: #fff; border-radius: 18px; padding: 26px 22px; display: grid; gap: 14px; }
.kp-auth-card .kp-marke { color: var(--ink); }
.kp-auth-card .kp-marke .l1 { color: var(--steel); }
.kp-auth-card h1 { font-size: 1.7rem; }
.kp-auth-card .wechsel { font-size: .9rem; color: var(--steel); text-align: center; }
.kp-auth-card .wechsel a { color: var(--ink); font-weight: 600; }
.kp-auth-stage { width: min(440px, 100%); margin: 0 auto 14px; }
.kp-auth-stage svg { display: block; width: 100%; height: auto; }
.demo-zugang { background: var(--note-bg); border: 1px solid #c9dcf2; border-radius: 10px; padding: 10px 12px; font-size: .84rem; }
.demo-zugang code { font-family: var(--mono); background: #fff; padding: 1px 6px; border-radius: 5px; }

/* ---------- Seiten-Kopf ---------- */
.seite-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.seite-kopf .titles { display: grid; gap: 6px; }
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin: 0 0 14px; overflow-x: auto; }
.tabs a { padding: 8px 12px 10px; text-decoration: none; white-space: nowrap; font-family: var(--display); text-transform: uppercase; letter-spacing: .07em; font-size: .82rem; color: var(--steel); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a.active { color: var(--ink); border-bottom-color: var(--accent); }
.kp-footer { text-align: center; font-size: .76rem; color: var(--steel); padding: 18px 16px 8px; }
@media print { .kp-top, .kp-tabs, .demo-band, .btn { display: none !important; } body { padding: 0; background: #fff; } }