/* Zentrale Gestaltungswerte für MedOps Cloud. */
:root {
  --app-text: #002766;
  --app-primary: #002766;
  --app-secondary: #c7d3e0;
  --app-navbar: #002766;
  --app-background: #f4f6f9;
  --app-muted: #52647a;
  --bs-body-color: var(--app-text);
  --bs-body-bg: var(--app-background);
  --bs-secondary-color: var(--app-muted);
  --bs-link-color: var(--app-primary);
}
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
a, button, input { touch-action: manipulation; }
:focus-visible { outline: 3px solid #4487e6; outline-offset: 3px; }
.topbar { background: var(--app-navbar); color: white; min-height: 56px; }
.brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 8px; border: 1px solid #ffffff70; border-radius: 8px; font-size: 19px; }
.navbar-nav .nav-link { padding-block: 12px; }
.app-shell { display: flex; min-height: calc(100dvh - var(--app-topbar-height, 56px)); }
.sidebar { width: 228px; flex-shrink: 0; background: var(--app-secondary); position: sticky; top: var(--app-topbar-height, 56px); height: calc(100dvh - var(--app-topbar-height, 56px)); }
.sidebar .nav-link { color: var(--app-text); border-radius: 10px; padding: 12px; font-weight: 600; }
.sidebar .nav-link span { margin-right: 10px; }
.sidebar .nav-link:hover { background: #ffffff80; }
.sidebar .nav-link.active { background: var(--app-primary); color: white; }
.nav-caption, .eyebrow { font-size: .7rem; font-weight: 750; letter-spacing: .12em; }
.eyebrow { color: var(--app-muted); margin-bottom: 12px; }
.sidebar-footer { display: flex; gap: 12px; align-items: center; font-size: .85rem; }
.avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: white; color: var(--app-primary); font-weight: 750; border: 1px solid var(--app-secondary); }
.min-width-0 { min-width: 0; }
.main-content { flex: 1; min-width: 0; max-width: 1500px; padding: 36px; }
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 600; border-radius: 9px; padding-inline: 18px; }
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: #001c49; --bs-btn-hover-border-color: #001c49; --bs-btn-active-bg: #001c49; --bs-btn-active-border-color: #001c49; --bs-btn-color: white; }
.btn-secondary { --bs-btn-bg: var(--app-secondary); --bs-btn-border-color: var(--app-secondary); --bs-btn-color: var(--app-text); --bs-btn-hover-bg: #b5c6d9; --bs-btn-hover-border-color: #b5c6d9; --bs-btn-hover-color: var(--app-text); --bs-btn-active-bg: #b5c6d9; --bs-btn-active-color: var(--app-text); }
.card { border-radius: 16px; background: white; }
.welcome-panel { border-radius: 18px; background: #e3eaf3; overflow: hidden; }
.welcome-panel .badge { background: white; color: var(--app-primary); padding: 9px 12px; font-size: .65rem; letter-spacing: .08em; }
.welcome-copy { max-width: 520px; color: var(--app-muted); font-size: 1.05rem; line-height: 1.7; }
.workspace-symbol { display: inline-block; position: relative; font-weight: 800; font-size: 84px; line-height: 1; padding: 28px 34px; background: white; border-radius: 28px; transform: rotate(-8deg); box-shadow: 15px 15px 0 #c7d3e0; }
.workspace-symbol span { position: absolute; font-size: 26px; right: -10px; top: -12px; border-radius: 50%; background: var(--app-primary); color: white; padding: 12px; }
.login-main { min-height: calc(100dvh - var(--app-topbar-height, 56px)); display: flex; align-items: center; }
.login-intro h1 { letter-spacing: -.04em; line-height: 1.15; }
.intro-rule { height: 5px; width: 64px; background: var(--app-primary); border-radius: 8px; }
.form-control { background: white; border-color: #b9c5d4; color: var(--app-text); border-radius: 9px; }
.form-label { font-size: .9rem; font-weight: 600; }
.account-card { max-width: 760px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 12px; background: white; }
@media (max-width: 991.98px) { .main-content { padding: 28px 24px; } .sidebar { width: 200px; } .login-intro { text-align: center; max-width: 640px; } .intro-rule { margin-inline: auto; } .login-intro h1 { font-size: 2.5rem; } }
@media (max-width: 767.98px) { .main-content { padding: 28px 16px; } .topbar .navbar-collapse { padding-top: 12px; } .login-main { padding-inline: 0; } .login-intro h1 { font-size: 2rem; } .login-intro .lead { font-size: 1rem; } .login-main .row { --bs-gutter-x: 1.5rem; } }

.cross-badge { color: white; background: #174986; border-color: #4974a9; border-radius: 9px; }
.topbar .navbar-brand { font-size: 1.15rem; }
.tenant-switch { max-width: 370px; }
.tenant-switch .form-select { min-height: 40px; max-width: 260px; }
.topbar .nav-link[aria-current="page"] { color: white; }
.topbar .nav-link { font-size: .9rem; }
.sidebar { width: 245px; }
.sidebar .nav-link { white-space: nowrap; }
.main-content h1, .main-content h2, .main-content dd, .main-content p { overflow-wrap: anywhere; }
.type-tag { background: var(--app-secondary); color: var(--app-text); padding: 8px 10px; }
.empty-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; background: #e3eaf3; border-radius: 20px; font-size: 32px; }
.entry-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
.form-select { background-color: white; color: var(--app-text); }
.back-link { text-decoration: none; font-size: .9rem; }
@media (min-width: 768px) and (max-width: 1199.98px) { .sidebar { width: 220px; } }
@media (max-width: 1199.98px) { .tenant-switch { max-width: 100%; } .tenant-switch .form-select { max-width: none; } }

.device-nav .nav-link { color: var(--app-text); background: white; border: 1px solid var(--app-secondary); border-radius: 9px; }
.device-nav .nav-link.active { color: white; background: var(--app-primary); }
.measurement-json { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--app-background); border-radius: 8px; padding: 12px; }
.table > :not(caption) > * > * { padding: 16px; }
.sidebar { overflow-y: auto; }

.person-selection { max-height: 20rem; overflow-y: auto; }
.table th { white-space: nowrap; }
.table td { min-width: 7rem; overflow-wrap: anywhere; }
@media print {
 .topbar, .sidebar, .skip-link, .no-print, main > footer { display: none !important; }
 .app-shell, .main-content { display: block; width: 100%; padding: 0; margin: 0; }
 .report-table { overflow: visible; }
 .report-table table { font-size: 9pt; }
 .report-table td, .report-table th { min-width: 0; white-space: normal; }
 tr { break-inside: avoid; }
 a { color: inherit; text-decoration: none; }
}

.sidebar { overflow-y: auto; }

.qr-label { width: 62mm; padding: 3mm; border: 1px solid #111; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2mm; background: white; color: black; overflow-wrap: anywhere; }
.qr-label img { width: 42mm; height: 42mm; }
@media print { body:has(.qr-label) header, body:has(.qr-label) footer, body:has(.qr-label) .sidebar { display:none !important; } .qr-label { break-inside: avoid; } }

.readiness-panel { display:flex; align-items:center; gap:1.25rem; padding:1rem; border-radius:12px; border:2px solid; }
.readiness-green { background:#e6f4ea; border-color:#146c43; }
.readiness-yellow { background:#fff3cd; border-color:#997404; }
.readiness-red { background:#fce8e6; border-color:#b02a37; }
.traffic-light { flex-shrink:0; padding:8px; display:flex; flex-direction:column; gap:6px; background:#202124; border-radius:12px; }
.lamp { width:24px; height:24px; display:block; border-radius:50%; background:#5c6064; }
.lamp.red.lit { background:#ff504d; box-shadow:0 0 8px #ff504d; }
.lamp.yellow.lit { background:#ffd43b; box-shadow:0 0 8px #ffd43b; }
.lamp.green.lit { background:#44d67c; box-shadow:0 0 8px #44d67c; }

.check-answer { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.check-answer .form-check-input { width: 1.3em; height: 1.3em; margin-right: .5rem; }
.check-answer .form-check-label { padding-left: .3rem; cursor: pointer; }
.checklist-row legend { float: none; }

.navigation-group + .navigation-group { margin-top: 1.5rem; }
.navigation-group .nav-caption { margin: 0 0 .5rem; line-height: 1.5; }
.navigation-group .nav-link { white-space: normal; overflow-wrap: anywhere; font-size: .9rem; min-height: 44px; display: flex; align-items: center; }
.sidebar .navigation-group .nav-link { padding: .6rem .75rem; }
 .sidebar-brand { color: var(--app-text); font-size: 1.15rem; }
.sidebar-toggle-bar { background: var(--app-secondary); }
@media (max-width: 767.98px) {
 .app-shell { flex-direction: column; }
 .sidebar { position: static; width: 100%; height: auto; }
 .sidebar.collapse:not(.show) { display: none; }
 .topbar .tenant-switch { flex: 1 1 230px; max-width: 100%; min-width: 0; }
 .topbar .tenant-switch .form-select { width: 100%; max-width: none; }
}

.organization-logo {  height: 44px; object-fit: contain;  border-radius: 6px; padding: 3px; }
@media (min-width: 768px) and (max-width: 991.98px) { .topbar .tenant-switch { max-width: 330px; } }

.type-symbol { display: block; max-width: 100%; width: 360px; height: 240px; object-fit: contain; background: white; border-radius: 12px; padding: 12px; }
.type-card-image { height: 200px; object-fit: contain; padding: 16px; background: white; }
.type-thumbnail { width: 56px; height: 56px; object-fit: contain; vertical-align: middle; }
.gallery-thumbnail { width: 100%; height: 240px; object-fit: contain; background: var(--app-background); }

.topbar .navbar-brand { white-space: nowrap; }
.topbar .organization-logo { height: 48px; }
.topbar .tenant-selection .form-select { min-width: 0; }
@media (min-width: 768px) {
 .topbar .btn { min-height: 36px; padding: .25rem .75rem; }
 .topbar .tenant-switch .form-select { min-height: 36px; }
}
@media (min-width: 992px) {
 .topbar .tenant-switch { flex: 0 1 600px; max-width: 600px; }
 .topbar .tenant-selection .form-select { flex: 1; width: 220px; max-width: 280px; }
}

.marketing-page { background: var(--app-background); }
.marketing-header .navbar { min-height: 64px; }
.marketing-header .nav-link { color: #e1e8f2; }
.marketing-header .nav-link:hover, .marketing-header .nav-link[aria-current="page"] { color: white; text-decoration: underline; text-underline-offset: 6px; }
.marketing-hero { padding: clamp(3rem, 7vw, 7rem) 0; background: radial-gradient(ellipse at 90% 15%, #dce8f6, transparent 60%); }
.marketing-hero h1 { font-size: clamp(2.3rem, 4.4vw, 4.2rem); font-weight: 780; line-height: 1.1; letter-spacing: -.045em; }
.marketing-hero h1 span { color: var(--app-muted); }
.marketing-kicker { font-size: .75rem; font-weight: 750; letter-spacing: .12em; margin-bottom: 1.25rem; }
.marketing-lead { color: var(--app-muted); font-size: 1.15rem; line-height: 1.8; margin: 1.5rem 0 2rem; max-width: 42rem; }
.marketing-overview { border: 1px solid var(--app-secondary); border-radius: 24px; padding: clamp(1.5rem, 3vw, 2.5rem); background: white; box-shadow: 0 24px 60px #00276612; }
.marketing-cross { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--app-primary); color: white; font-size: 1.75rem; flex-shrink: 0; }
.marketing-workflow { display: grid; gap: 1.5rem; margin: 2rem 0; }
.marketing-workflow > div { display: flex; gap: 1rem; align-items: flex-start; }
.marketing-workflow > div > span { display: grid; place-items: center; border-radius: 50%; background: var(--app-background); width: 36px; height: 36px; flex-shrink: 0; font-size: .75rem; font-weight: 700; }
.marketing-workflow p { margin: .25rem 0 0; color: var(--app-muted); font-size: .9rem; }
.marketing-note { border-top: 1px solid var(--app-secondary); padding-top: 1.25rem; font-size: .85rem; color: var(--app-muted); }
.marketing-section { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.marketing-section-heading { max-width: 44rem; margin-bottom: 2.5rem; }
.marketing-section-heading h2, .marketing-section-title { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 750; letter-spacing: -.035em; }
.marketing-feature { padding: 1.75rem; border: 1px solid var(--app-secondary); border-radius: 16px; background: white; }
.marketing-feature-number { display: block; color: var(--app-muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 1.5rem; }
.marketing-feature h3 { font-size: 1.2rem; font-weight: 700; }
.marketing-feature p, .marketing-benefit p { color: var(--app-muted); line-height: 1.75; margin-bottom: 0; }
.marketing-benefit { border-left: 3px solid var(--app-secondary); padding-left: 1.5rem; margin-bottom: 1.75rem; }
.marketing-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 20px; background: var(--app-primary); color: white; }
.marketing-cta > div { max-width: 42rem; }
.marketing-cta p:last-child { color: #dce6f4; margin-bottom: 0; }
.marketing-footer { border-top: 1px solid var(--app-secondary); background: white; }
.pricing-intro { max-width: 45rem; }
.pricing-card { border-color: var(--app-secondary); }
.pricing-community { border: 2px solid var(--app-primary); }
.pricing-ribbon { padding: .75rem 1rem; text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .06em; background: var(--app-primary); color: white; border-radius: 13px 13px 0 0; }
.pricing-amount { font-size: 3.5rem; font-weight: 750; letter-spacing: -.04em; margin: 1.5rem 0 .25rem; }
.pricing-amount span { font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.pricing-features { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.pricing-features li { padding-left: 1.75rem; position: relative; }
.pricing-features li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; }
@media (max-width: 767.98px) { .marketing-header .navbar-collapse { padding: .75rem 0; } .marketing-hero .btn { width: 100%; } .marketing-overview { margin-top: .5rem; } }

.pricing-trial { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--app-secondary); border-radius: 20px; background: #e3eaf3; }
.pricing-trial > div { max-width: 44rem; }
.pricing-rates { margin: 1rem 0; }
.pricing-rates dt { font-size: .9rem; font-weight: 600; }
.pricing-rates > div + div { border-top: 1px solid var(--app-secondary); padding-top: 1rem; }
.pricing-rates .pricing-amount { margin: .25rem 0 1rem; }
.pricing-standard-rate { font-size: 1.8rem; font-weight: 700; margin: .25rem 0; }
.pricing-standard-rate span { font-size: 1rem; font-weight: 500; }

.fault-photo { display: block; width: 100%; max-width: 360px; max-height: 260px; object-fit: contain; border-radius: 10px; background: var(--app-background); }