@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/space-grotesk.woff2") format("woff2"); }
/* piid – Ergänzungen zur Vorlage (style.css) */
:root { --ok: #34d399; --warn: #fbbf24; --err: #f87171; }
.lm { --ok: #059669; --warn: #b45309; --err: #dc2626; }

.logo-i img { width: 22px; height: 22px; }
code { font-size: .82em; color: var(--pur); background: rgba(118, 164, 44, .1); padding: 1px 5px; border-radius: 5px; }

/* Icons in Karten */
.picon, .uicon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--c), .12); border: 1px solid rgba(var(--c), .22); color: rgb(var(--c)); margin-bottom: 18px; }
.uicon { margin: 0 auto 14px; }
.usub { font-size: .8rem; color: var(--tx3); margin-bottom: 8px; }
.ptier { font-size: .82rem; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.pdesc { font-size: .875rem; color: var(--tx2); margin: 14px 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--bd); }
.ftag { background: rgba(118, 164, 44, .1); }
.pcard.pop { background: linear-gradient(135deg, rgba(118, 164, 44, .08), rgba(94, 94, 93, .04)); }

/* Produktansicht im Hero */
.demo { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--bd2); background: var(--sf);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(118, 164, 44, .08); text-align: left; }
.lm .demo { box-shadow: 0 30px 70px rgba(15, 15, 26, .12); }
.demo .dtbar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: var(--bg3); border-bottom: 1px solid var(--bd); }
.demo .dd { width: 11px; height: 11px; border-radius: 50%; }
.demo-url { margin: 0 auto; font-size: .76rem; color: var(--tx3); background: var(--bg2); padding: 3px 14px; border-radius: 8px; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-grid { display: grid; grid-template-columns: 1fr 290px; min-height: 380px; }
.demo-form { padding: 22px 26px 26px; background: #fbfbfd; color: #1d2433; }
.demo-h { font-weight: 700; font-size: 1.02rem; margin-bottom: 16px; color: #14213d; }
.demo-h span { display: block; font-weight: 500; font-size: .76rem; color: #6b7280; margin-top: 2px; }
.demo-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 18px; }
.df { position: relative; }
.df label { display: block; font-size: .72rem; color: #4b5563; margin-bottom: 4px; font-weight: 500; }
.df .in { height: 36px; border: 1px solid #cfd5df; border-radius: 6px; background: #fff; padding: 0 10px; display: flex; align-items: center;
  font-size: .82rem; font-family: ui-monospace, Consolas, monospace; color: #111827; }
.df .in.sel::after { content: "▾"; margin-left: auto; color: #9ca3af; font-family: sans-serif; }
.df em { position: absolute; right: 6px; top: -2px; font-style: normal; font-size: .62rem; font-weight: 700; color: #fff; padding: 1px 7px;
  border-radius: 5px 5px 5px 0; }
.df.ok .in { outline: 2px solid #76a42c; outline-offset: 2px; }
.df.ok em { background: #76a42c; }
.df.sug .in { outline: 2px solid #f59e0b; outline-offset: 2px; }
.df.sug em { background: #f59e0b; }
.df.open .in { outline: 2px dashed #ef4444; outline-offset: 2px; color: #9ca3af; font-family: inherit; }
.df.open em { background: #ef4444; }
.demo-panel { border-left: 1px solid var(--bd); background: var(--bg2); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.dp-head { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.dp-head img { width: 16px; height: 16px; }
.dp-cust { background: var(--sf); border: 1px solid var(--bd); border-radius: 12px; padding: 12px; }
.dp-lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tx3); margin-bottom: 6px; }
.dp-name { font-weight: 600; font-size: .92rem; }
.dp-sub { font-size: .74rem; color: var(--tx3); margin-top: 3px; }
.dp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dp-stats div { background: var(--sf); border: 1px solid var(--bd); border-radius: 10px; text-align: center; padding: 8px 4px; }
.dp-stats b { display: block; font-size: 1.15rem; color: var(--pur); }
.dp-stats b.w { color: var(--warn); }
.dp-stats b.r { color: var(--err); }
.dp-stats span { font-size: .66rem; color: var(--tx3); }
.dp-btn { background: var(--grad); color: #fff; border-radius: 11px; text-align: center; padding: 11px; font-weight: 600; font-size: .9rem; }
.dp-note { font-size: .74rem; color: var(--tx3); text-align: center; margin-top: auto; }
.demo-cap { text-align: center; font-size: .72rem; color: var(--tx3); margin: 12px 0 0; }

#mbmenu .btn { display: flex; align-items: center; justify-content: center; }
a.bgrd, a.boc { text-decoration: none; }
:focus-visible { outline: 2px solid var(--pur); outline-offset: 2px; }

@media (max-width: 991px) {
  .demo-grid { grid-template-columns: 1fr; }
  .demo-panel { border-left: 0; border-top: 1px solid var(--bd); }
  .dp-note { margin-top: 0; }
}
@media (max-width: 575px) {
  .demo-fields { grid-template-columns: 1fr; }
  .demo-fields .df:nth-child(n+6) { display: none; }
  .demo-form { padding: 18px 16px 22px; }
  .demo-url { max-width: 60%; }
}
@media (prefers-reduced-motion: reduce) { .ltrack, .afu, .adi, .rv { animation: none !important; transition: none !important; } .rv { opacity: 1 !important; transform: none !important; } }

/* Abstand unter der fixierten Navigation */
#hero { padding-top: calc(var(--nav) + 56px); padding-bottom: 72px; min-height: 0; }
@media (max-width: 575px) { #hero { padding-top: calc(var(--nav) + 28px); } }