/* Dinervio Plattform – Gestaltung
   Marke: Orange #FF6B35, Fast-Schwarz #0C0D14, Warmweiß #F6F4F0.
   Layout: dunkle Menüleiste links, helle Arbeitsfläche; auf dem Handy wird die
   Menüleiste zur wischbaren Leiste oben. */
@font-face { font-family: "Dinervio Sans"; src: local("Inter"), local("Segoe UI"), local("Roboto"); }
:root {
  --papier: #f4f3f0; --flaeche: #ffffff; --flaeche-2: #efede8; --tinte: #14151c; --tinte-leise: #5d6170;
  --linie: #e1ded7; --orange: #ff6b35; --orange-tief: #e2551f; --orange-hell: #fff0e9; --nacht: #0c0d14; --nacht-2: #171924;
  --gut: #1f8a5b; --warn: #b26a00; --kritisch: #c62828;
  --f-text: "Dinervio Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root { --papier: #0f1017; --flaeche: #171924; --flaeche-2: #1f2230; --tinte: #eceef4; --tinte-leise: #a3a8b8; --linie: #2a2e3d; --orange-hell: #2a1a14; color-scheme: dark; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--papier); color: var(--tinte); font: 15px/1.55 var(--f-text); -webkit-font-smoothing: antialiased; }
a { color: var(--orange-tief); }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.leise { color: var(--tinte-leise); }
.klein { font-size: 13px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.sprung { position: absolute; left: -9999px; }
.sprung:focus { left: 12px; top: 12px; z-index: 99; background: var(--flaeche); padding: 8px 12px; border-radius: 8px; }

/* ---------- Gerüst ---------- */
.pf { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--nacht) 248px, var(--papier) 248px); }
.pf__leiste { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--nacht); color: #d9dbe4; padding: 18px 12px 24px; display: flex; flex-direction: column; gap: 2px; }
.pf__marke { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; color: #fff; text-decoration: none; font: 700 18px/1.1 var(--f-text); }
.pf__marke img { border-radius: 9px; }
.pf__marke small { display: block; font: 600 10.5px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #8a8fa3; }
.pf__gruppe { margin: 18px 10px 6px; font: 600 10.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #6f7487; }
.pf__nav { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: #c4c7d4; text-decoration: none; font-weight: 500; white-space: nowrap; }
.pf__nav svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.pf__nav:hover { background: rgba(255,255,255,.06); color: #fff; }
.pf__nav[aria-current="page"] { background: linear-gradient(90deg, rgba(255,107,53,.22), rgba(255,107,53,.05)); color: #fff; box-shadow: inset 3px 0 0 var(--orange); }
.pf__zahl { margin-left: auto; min-width: 20px; padding: 0 7px; border-radius: 99px; background: rgba(255,255,255,.12); font: 600 11.5px/1.6 var(--f-mono); text-align: center; color: #fff; }
.pf__rechts { min-width: 0; display: flex; flex-direction: column; }
.pf__oben { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: color-mix(in srgb, var(--flaeche) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linie); }
.pf__suche { flex: 1 1 auto; max-width: 460px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--flaeche-2); color: var(--tinte-leise); }
.pf__suche svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
.pf__suche input { border: 0; background: none; font: inherit; color: var(--tinte); width: 100%; min-width: 0; outline: none; }
.pf__person { margin-left: auto; position: relative; }
.pf__person summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px; border-radius: 10px; }
.pf__person summary::-webkit-details-marker { display: none; }
.pf__person summary:hover { background: var(--flaeche-2); }
.pf__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: #fff; font: 700 13px/1 var(--f-text); }
.pf__personname { font-weight: 600; font-size: 14px; line-height: 1.2; }
.pf__personname small { display: block; font-weight: 500; color: var(--tinte-leise); }
.pf__personmenue { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; padding: 14px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 18px 40px rgba(0,0,0,.14); display: grid; gap: 10px; }
.pf__haupt { padding: 26px 28px 48px; display: grid; gap: 18px; align-content: start; min-width: 0; max-width: 1280px; width: 100%; }

/* ---------- Bausteine ---------- */
.pf__titel { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-end; }
.pf__titel h1 { font-size: 26px; }
.pf__eyebrow { font: 600 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-leise); }
.pf__kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pf__kachel { display: grid; gap: 3px; padding: 15px 16px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); min-width: 0; }
.pf__kachel small, .pf__kachel span { color: var(--tinte-leise); font-size: 12.5px; }
.pf__kachel b { font-size: 26px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pf__kachel--haupt { background: var(--nacht); border-color: var(--nacht); color: #fff; }
.pf__kachel--haupt small, .pf__kachel--haupt span { color: #a7abbd; }
.pf__kachel--haupt b { color: var(--orange); }
.pf__zwei { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pf__karte { display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--radius); background: var(--flaeche); border: 1px solid var(--linie); min-width: 0; }
.pf__kartenkopf { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; }
.pf__kartenkopf h2 { font-size: 16px; }
.pf__knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); padding: 9px 14px; border-radius: 10px; font: 600 14px/1.1 var(--f-text); cursor: pointer; text-decoration: none; min-height: 40px; }
.pf__knopf:hover { border-color: var(--tinte-leise); }
.pf__knopf--haupt { background: var(--orange); border-color: var(--orange); color: #fff; }
.pf__knopf--haupt:hover { background: var(--orange-tief); border-color: var(--orange-tief); }
.pf__knopf--gefahr { color: var(--kritisch); }
.pf__knopf--breit { width: 100%; }
.pf__link { border: 0; background: none; padding: 0; color: var(--orange-tief); font: 600 13.5px var(--f-text); cursor: pointer; text-decoration: none; }
.pille { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--flaeche-2); white-space: nowrap; }
.pille::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pille--gut { color: var(--gut); } .pille--warn { color: var(--warn); } .pille--krit { color: var(--kritisch); } .pille--aus { color: var(--tinte-leise); }
.tabelle-huelle { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font: 600 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); background: var(--flaeche-2); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.betrag, th.betrag { text-align: right; white-space: nowrap; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.leer-zustand { padding: 26px; text-align: center; color: var(--tinte-leise); }
.formular { display: grid; gap: 14px; }
.feld { display: grid; gap: 6px; min-width: 0; }
.feld > span { font-weight: 600; font-size: 14px; }
.feld input, .feld select, .feld textarea { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie); background: var(--papier); color: var(--tinte); min-width: 0; min-height: 44px; }
.feld input:focus, .feld select:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.raster-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hinweis { padding: 12px 14px; border-radius: 10px; font-size: 14.5px; border-left: 4px solid var(--orange); background: var(--orange-hell); }
.hinweis--gut { border-left-color: var(--gut); background: color-mix(in srgb, var(--gut) 10%, var(--flaeche)); }
.hinweis--fehler { border-left-color: var(--kritisch); background: color-mix(in srgb, var(--kritisch) 9%, var(--flaeche)); }
.code-feld { font: 600 22px/1 var(--f-mono) !important; letter-spacing: .3em; text-align: center; }
.kopierzeile { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.kopierzeile code { flex: 1 1 18rem; padding: 10px 12px; border-radius: 10px; background: var(--flaeche-2); font: 13px/1.5 var(--f-mono); overflow-wrap: anywhere; }
.pf__rollen { margin: 0; display: grid; gap: 10px; }
.pf__rollen div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; font-size: 14px; }
.pf__rollen dt { font-weight: 700; } .pf__rollen dd { margin: 0; color: var(--tinte-leise); }
.pf__feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pf__feed li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 14px; }
.pf__feed small { display: block; color: var(--tinte-leise); font-size: 12.5px; }
.pf__feed time { color: var(--tinte-leise); font: 12px var(--f-mono); white-space: nowrap; }
.pf__punkt { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--orange); }

/* ---------- Anmelden ---------- */
body.leer { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px 16px; background: radial-gradient(1200px 600px at 20% -10%, #2a1810 0%, transparent 60%), var(--nacht); }
.leer__karte { width: min(440px, 100%); background: var(--flaeche); color: var(--tinte); border-radius: 18px; padding: 28px 26px; display: grid; gap: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.leer__karte h1 { font-size: 24px; }
.leer__logo { justify-self: start; height: 46px; width: auto; filter: invert(0); background: var(--nacht); padding: 8px 12px; border-radius: 10px; box-sizing: content-box; }
.leer__fuss { text-align: center; color: #8a8fa3; font-size: 12.5px; }
.zf { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.zf img { border-radius: 10px; border: 1px solid var(--linie); }
.zf__schluessel { font-size: 14px; word-break: break-all; }

/* ---------- Handy ---------- */
@media (max-width: 820px) {
  .pf { grid-template-columns: minmax(0, 1fr); background: var(--papier); }
  .pf__leiste { position: sticky; top: 0; z-index: 10; height: auto; flex-direction: row; align-items: center; overflow-x: auto; padding: 8px 10px; gap: 4px; }
  .pf__marke { padding: 0 6px 0 0; } .pf__marke span, .pf__gruppe { display: none; }
  .pf__nav { padding: 8px 10px; }
  .pf__oben { position: static; padding: 10px 14px; } .pf__personname { display: none; }
  .pf__haupt { padding: 18px 14px 40px; }
  .pf__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf__zwei, .raster-2 { grid-template-columns: minmax(0, 1fr); }
  .pf__rollen div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  th, td { padding: 9px 10px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }
.inline-form { display: flex; gap: 6px; align-items: center; }
.inline-form select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--linie); background: var(--papier); color: var(--tinte); }
.aktionen-zeile { display: flex; flex-wrap: wrap; gap: 12px; }
.aktionen-zeile form { margin: 0; }
.einladungen { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.einladungen li { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--flaeche-2); }
.einladungen form { margin: 0; }
.pf__liste { display: grid; gap: 10px; }
.pf__zeile { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); text-decoration: none; }
.pf__zeile:hover { border-color: var(--orange); }
.pf__zeile small { display: block; color: var(--tinte-leise); font-size: 13px; }
.pf__zeile-text { min-width: 0; }
.pf__logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--nacht); color: var(--orange); font: 800 20px/1 var(--f-text); }
.pf__schalter { display: grid; gap: 8px; }
.pf__schalter label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie); cursor: pointer; }
.pf__schalter label:has(input:checked) { border-color: var(--orange); background: var(--orange-hell); }
.pf__schalter small { display: block; }
.pf__schalter-rechts { display: flex; align-items: center; gap: 10px; flex: none; }
.pf__schalter input { width: 20px; height: 20px; accent-color: var(--orange); }
.pf__summe { display: flex; justify-content: space-between; align-items: baseline; font-size: 20px; font-weight: 700; }
.pf__spalte { display: grid; gap: 16px; }
.pf__pruefliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pf__pruefliste li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.pf__pruefliste small { display: block; }
.dns-box { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--flaeche-2); font: 13px/1.6 var(--f-mono); overflow-x: auto; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.theme-karte { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; background: var(--flaeche); display: grid; }
.theme-karte__vorschau { width: 100%; height: auto; display: block; }
.theme-karte__text { padding: 12px 14px; display: grid; gap: 3px; }
@media (max-width: 820px) { .pf__zeile { grid-template-columns: 40px minmax(0, 1fr); } .pf__zeile .pille, .pf__zeile .betrag { grid-column: 2; justify-self: start; } }
.preisfeld { display: inline-flex; align-items: center; gap: 6px; }
.preisfeld input { width: 7.5em; text-align: right; font: 14px var(--f-mono); padding: 7px 9px; border-radius: 8px; border: 1px solid var(--linie); background: var(--papier); color: var(--tinte); }
.pf__einst { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.pf__einst-nav { display: grid; gap: 2px; position: sticky; top: 76px; }
.pf__einst-nav a { padding: 9px 12px; border-radius: 10px; color: var(--tinte-leise); font-weight: 600; text-decoration: none; }
.pf__einst-nav a:hover { background: var(--flaeche-2); color: var(--tinte); }
.pf__einst-nav a[aria-current="page"] { background: var(--flaeche); color: var(--tinte); box-shadow: 0 1px 2px rgba(0,0,0,.06), inset 3px 0 0 var(--orange); }
.pf__einst-inhalt { min-width: 0; display: grid; gap: 16px; }
.feld--breit { grid-column: 1 / -1; }
.feld small { font-weight: 400; }
.pf__toggle { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie); cursor: pointer; }
.pf__toggle input { width: 20px; height: 20px; accent-color: var(--orange); }
.pf__haken { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--tinte-leise); }
@media (max-width: 820px) { .pf__einst { grid-template-columns: minmax(0, 1fr); } .pf__einst-nav { position: static; display: flex; overflow-x: auto; gap: 4px; } .pf__einst-nav a { white-space: nowrap; } }
.domainzeile { display: flex; align-items: stretch; }
.domainzeile input { border-radius: 10px 0 0 10px !important; flex: 1 1 auto; min-width: 0; font: inherit; padding: 10px 12px; border: 1px solid var(--linie); background: var(--papier); color: var(--tinte); }
.domainzeile span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--linie); border-left: 0; border-radius: 0 10px 10px 0; background: var(--flaeche-2); font: 14px var(--f-mono); }
.checkliste { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; counter-reset: schritt; }
.checkliste li { counter-increment: schritt; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.checkliste li::before { content: counter(schritt); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--linie); font: 700 12px var(--f-mono); color: var(--tinte-leise); }
.checkliste li[data-erledigt="true"]::before { content: "✓"; background: var(--gut); border-color: var(--gut); color: #fff; }
/* Anfragen (Demo-Anfragen der Website) */
.anfragen-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.anfragen-filter a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--linie); color: var(--tinte); text-decoration: none; font-size: 14px; font-weight: 600; }
.anfragen-filter a[aria-current="page"] { background: var(--orange-hell); border-color: var(--orange); }
.anfragen-tabelle td { vertical-align: top; }
.anfrage-nachricht { margin: 0; max-width: 42ch; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
.anfrage-form { display: grid; gap: 8px; min-width: 220px; }
.anfrage-form textarea { min-height: 64px; resize: vertical; }