/* vision4it Cloud-Portal - Gestaltung. VANSS 17.10.2026 */
:root { --grund: #f6f8fb; --karte: #fff; --text: #1e293b; --leise: #64748b; --linie: #e2e8f0; --akzent: #13a983; --akzent2: #0e8a6b; --rot: #dc2626; --gelb: #d97706; --blau: #2563eb; }
@media (prefers-color-scheme: dark) { :root { --grund: #0b1220; --karte: #131c2e; --text: #e2e8f0; --leise: #94a3b8; --linie: #243147; } }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--grund); color: var(--text); }
a { color: var(--akzent2); }
main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 48px; }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1040px; margin: 0 auto; padding: 16px; }
.marke { font-size: 20px; text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 8px; }
.punkt { width: 14px; height: 14px; border-radius: 50%; background: var(--akzent); display: inline-block; }
nav { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
nav a { text-decoration: none; color: var(--text); }
footer { max-width: 1040px; margin: 0 auto; padding: 24px 16px; font-size: 13px; color: var(--leise); border-top: 1px solid var(--linie); }
footer a { color: var(--leise); }
.testbetrieb { background: var(--gelb); color: #fff; text-align: center; font-size: 14px; padding: 6px; }
.btn { display: inline-block; background: var(--akzent); color: #fff; border: 0; border-radius: 8px; padding: 11px 20px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--akzent2); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.klein { padding: 6px 12px; font-size: 14px; color: #fff; }
.btn.hell { background: transparent; color: var(--text); border: 1px solid var(--linie); }
.link { background: none; border: 0; color: var(--text); font: inherit; cursor: pointer; padding: 0; }
form.inline { display: inline; }
.held { padding: 40px 0 24px; max-width: 720px; }
.held h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.15; margin: 0 0 16px; }
.held p { font-size: 18px; color: var(--leise); }
.pakete { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.paket { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 22px; }
.paket h3 { margin: 0 0 6px; }
.preis { font-size: 30px; font-weight: 700; }
.preis small { font-size: 14px; font-weight: 400; color: var(--leise); }
.paket ul { padding-left: 18px; color: var(--leise); }
.klein { font-size: 14px; color: var(--leise); }
.klein.gut { color: var(--akzent2); } .klein.schlecht { color: var(--rot); }
.schmal { max-width: 560px; }
.formular { display: flex; flex-direction: column; gap: 14px; }
.feld { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.feld > span { font-size: 14px; font-weight: 600; }
.feld input { width: 100%; padding: 10px 12px; border: 1px solid var(--linie); border-radius: 8px; background: var(--karte); color: var(--text); font: inherit; }
.feld input:focus { outline: 2px solid var(--akzent); border-color: transparent; }
.reihe { display: flex; gap: 12px; flex-wrap: wrap; }
.reihe .feld { min-width: 180px; }
input.kurz { max-width: 120px; }
.mitsuffix { display: flex; align-items: center; gap: 6px; }
.mitsuffix input { flex: 1; }
.haken { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.haken input { margin-top: 4px; }
.wahl { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--linie); border-radius: 10px; padding: 12px; margin-top: 6px; background: var(--karte); cursor: pointer; }
.wahl input { margin-top: 5px; }
.versteckt { position: absolute; left: -9999px; width: 1px; height: 1px; }
.meldung { border-radius: 10px; padding: 12px 14px; margin: 12px 0; font-size: 15px; border: 1px solid; }
.meldung.fehler { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
.meldung.ok { border-color: #86efac; background: #f0fdf4; color: #166534; }
.meldung.info { border-color: #93c5fd; background: #eff6ff; color: #1e3a8a; }
.titelzeile { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.vm { background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; padding: 18px; margin: 14px 0; }
.vm-kopf { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.vm-info { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--leise); margin-top: 10px; }
.vm-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.status { font-size: 13px; font-weight: 700; border-radius: 99px; padding: 3px 10px; }
.status.gruen { background: #dcfce7; color: #166534; } .status.gelb { background: #fef3c7; color: #92400e; } .status.rot { background: #fee2e2; color: #991b1b; } .status.grau { background: #e2e8f0; color: #334155; }
.balken { height: 8px; background: var(--linie); border-radius: 99px; overflow: hidden; margin: 12px 0 4px; }
.balken i { display: block; height: 100%; background: var(--akzent); transition: width .5s; }
details.alt { margin-top: 20px; }
details.alt summary { cursor: pointer; color: var(--leise); font-size: 14px; }
.leer { text-align: center; padding: 40px 16px; background: var(--karte); border: 1px dashed var(--linie); border-radius: 14px; }
.terminal { height: 70vh; min-height: 360px; background: #0b1220; border-radius: 10px; padding: 0; overflow: hidden; margin-top: 12px; }
.terminal .xterm { height: 100%; padding: 8px; }
.daten { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; }
.daten dt { color: var(--leise); }
.daten dd { margin: 0; }
.rechtstext { max-width: 780px; }
.rechtstext h2 { font-size: 19px; margin: 28px 0 8px; }
.rechtstext h3 { font-size: 16px; margin: 18px 0 6px; }
.rechtstext ol, .rechtstext ul { padding-left: 22px; }
.rechtstext li { margin: 6px 0; }
.rechtstext ol > li > ul { margin-top: 6px; }
.tabelle { border-collapse: collapse; width: 100%; font-size: 14px; }
.tabelle th, .tabelle td { border: 1px solid var(--linie); padding: 8px; text-align: left; vertical-align: top; }
.pruefhinweise { border: 1px dashed var(--gelb); border-radius: 10px; padding: 10px 14px; margin: 12px 0 20px; font-size: 14px; }
.pruefhinweise summary { cursor: pointer; font-weight: 600; }
@media (max-width: 560px) { .daten { grid-template-columns: 1fr; } .reihe { flex-direction: column; } input.kurz { max-width: none; } }