/* ============================================================
   medivaris.de — Vorschlag 5 „Horizont"
   Gemeinsames Design-System (Unterseiten & Kundenportal)
   Farbwelt/Typo aus Vorschlag 4. Vollständig offline.
   ============================================================ */
:root{
  --ink:        #0F172A;
  --night:      #020617;
  --night-soft: #0F172A;
  --paper:      #F8FAFC;
  --cyan:       #22D3EE;
  --sky:        #0EA5E9;
  --blue:       #2563EB;
  --blue-deep:  #1D4ED8;
  --violet:     #6366F1;
  --slate-200:  #E2E8F0;
  --slate-300:  #CBD5E1;
  --slate-400:  #94A3B8;
  --slate-500:  #64748B;
  --slate-600:  #475569;
  --slate-700:  #334155;
  --glass-dark: rgba(255,255,255,.06);
  --glass-line: rgba(148,163,184,.25);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --grad-accent: linear-gradient(92deg, var(--cyan), var(--sky) 45%, var(--violet));
  --grad-blue: linear-gradient(120deg, var(--sky), var(--blue));
  --shadow-soft: 0 24px 60px -24px rgba(15,23,42,.28);
  --radius: 18px;
  --maxw: 1180px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  background:var(--night);
  color:var(--slate-300);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:rgba(34,211,238,.35); color:#fff; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
[id]{ scroll-margin-top:96px; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:10px;
}
.wrap{ width:min(var(--maxw), 92vw); margin-inline:auto; }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--blue); color:#fff; padding:10px 18px; border-radius:0 0 10px 0;
  font-weight:700; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ---------- Typo-Bausteine ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.7em;
  font-size:12px; font-weight:700; letter-spacing:.32em; text-transform:uppercase;
  color:var(--sky);
}
.kicker::before{
  content:""; width:26px; height:1px;
  background:linear-gradient(90deg, transparent, var(--sky));
}
.grad-text{
  background:var(--grad-accent);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Navigation (geteilt) ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(2,6,23,.55);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(148,163,184,.12);
  transition:background .35s ease, border-color .35s ease;
}
.nav.scrolled{ background:rgba(2,6,23,.82); border-bottom-color:rgba(148,163,184,.22); }
.nav-inner{
  width:min(1320px,96vw); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 0;
}
.brand{ display:inline-flex; align-items:center; text-decoration:none; flex:none; }
.brand .chip{
  background:#fff; border-radius:13px; padding:9px 16px;
  box-shadow:0 6px 22px -8px rgba(2,6,23,.55), 0 0 0 1px rgba(148,163,184,.2);
  display:inline-flex; align-items:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.brand:hover .chip{ transform:translateY(-1px); box-shadow:0 10px 26px -8px rgba(2,6,23,.6), 0 0 0 1px rgba(34,211,238,.35); }
.brand img{ height:32px; width:auto; display:block; }
/* medivaris-Wortmarke sauber freigestellt (Whitespace weggeschnitten) */
.logo-medivaris{ display:block; background:url("img/medivaris.webp") no-repeat; }
.logo-medivaris--nav{ width:134px; height:30px; background-size:237px auto; background-position:-51px -56px; }
.logo-medivaris--footer{ width:141px; height:34px; background-size:249px auto; background-position:-53px -58px; }
.logo-medivaris--lg{ width:196px; height:47px; background-size:346px auto; background-position:-74px -80px; }
.nav-links{ display:flex; align-items:center; gap:1px; list-style:none; }
.nav-links a{
  display:block; padding:9px 11px; border-radius:10px;
  font-size:14.5px; font-weight:600; text-decoration:none; color:var(--slate-300);
  transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.07); }
.nav-actions{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-portal{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:11px;
  font-size:14px; font-weight:700; text-decoration:none; color:#E2E8F0;
  background:var(--glass-dark); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.nav-portal:hover{ border-color:rgba(34,211,238,.5); color:#fff; transform:translateY(-1px); }
.nav-portal svg{ width:16px; height:16px; flex:none; }
.nav-contact{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:11px; font-size:14px; font-weight:700; text-decoration:none; color:var(--slate-300); border:1px solid transparent; transition:color .2s ease, background .2s ease; }
.nav-contact:hover{ color:#fff; background:rgba(255,255,255,.07); }
.nav-contact svg{ width:16px; height:16px; flex:none; }
.nav-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:11px;
  font-size:14px; font-weight:700; text-decoration:none; color:#fff;
  background:var(--grad-blue); box-shadow:0 8px 24px -10px rgba(14,165,233,.7);
  transition:filter .2s ease, transform .2s ease;
}
.nav-cta:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.nav-cta svg{ width:16px; height:16px; flex:none; }
.nav-m{ display:none; }
.nav-burger{ display:none; background:var(--glass-dark); border:1px solid var(--glass-line); border-radius:10px; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.nav-burger span{ width:18px; height:2px; background:#E2E8F0; border-radius:2px; display:block; transition:transform .25s ease,opacity .25s ease; }
.nav.open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2){ opacity:0; }
.nav.open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:14px;
  font-family:var(--font); font-size:16px; font-weight:700; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn svg{ flex:none; }
.btn-primary{
  background:var(--grad-blue); color:#fff;
  box-shadow:0 14px 40px -12px rgba(14,165,233,.65);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 48px -12px rgba(14,165,233,.8); }
.btn-ghost{
  background:var(--glass-dark); color:#E2E8F0; border-color:var(--glass-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(34,211,238,.5); color:#fff; }

/* ---------- Footer (geteilt) ---------- */
.footer{
  background:var(--night); border-top:1px solid rgba(148,163,184,.12);
  padding:clamp(50px,6vw,70px) 0 40px; font-size:14px;
}
.footer-grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);
  gap:clamp(30px,4vw,60px); margin-bottom:44px;
}
.footer-logos{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-bottom:18px; }
.footer-logos .chip{ background:#fff; border-radius:12px; padding:7px 14px; display:inline-flex; }
.footer-logos img{ height:32px; width:auto; }
.footer p{ color:var(--slate-500); max-width:44ch; }
.footer h4{
  font-size:12px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--slate-400); margin-bottom:16px;
}
.footer ul{ list-style:none; display:grid; gap:10px; }
.footer ul a{ text-decoration:none; color:var(--slate-400); transition:color .2s ease; }
.footer ul a:hover{ color:var(--cyan); }
.footer-legal{
  border-top:1px solid rgba(148,163,184,.12); padding-top:26px;
  display:grid; gap:12px; color:var(--slate-500); font-size:13px;
}
.footer-legal .marks{ max-width:none; font-size:12.5px; color:#5b6a84; }

/* ---------- Dokument-Layout (Impressum/Datenschutz/Disclaimer) ---------- */
.doc-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(120px,16vh,180px) 0 clamp(36px,5vw,60px);
  background:var(--night);
}
.doc-hero .aurora{ position:absolute; inset:-30% -10%; z-index:-2; pointer-events:none; }
.doc-hero .aurora i{ position:absolute; border-radius:50%; filter:blur(70px); display:block; }
.doc-hero .aurora i:nth-child(1){
  width:46vw; height:46vw; left:-10vw; top:-8vw;
  background:radial-gradient(circle at 40% 40%, rgba(14,165,233,.28), transparent 62%);
}
.doc-hero .aurora i:nth-child(2){
  width:40vw; height:40vw; right:-8vw; top:-4vw;
  background:radial-gradient(circle at 60% 40%, rgba(99,102,241,.20), transparent 60%);
}
.doc-hero h1{
  font-size:clamp(30px,4.4vw,52px); line-height:1.08; letter-spacing:-.03em;
  font-weight:800; color:#fff; margin:.5em 0 .3em; text-wrap:balance;
}
.doc-hero p{ color:var(--slate-400); max-width:60ch; font-size:clamp(15px,1.4vw,18px); }
.doc-body{ background:var(--paper); color:var(--slate-600); padding:clamp(46px,6vw,84px) 0 clamp(60px,8vw,110px); }
.doc{ width:min(820px, 92vw); margin-inline:auto; }
.doc h2{
  font-size:clamp(20px,2.4vw,27px); font-weight:800; letter-spacing:-.02em;
  color:var(--ink); margin:1.8em 0 .5em;
}
.doc h2:first-child{ margin-top:0; }
.doc h3{ font-size:17px; font-weight:750; color:var(--ink); margin:1.4em 0 .35em; }
.doc p{ margin:.5em 0; font-size:15.5px; line-height:1.72; }
.doc ul, .doc ol{ margin:.6em 0 .6em 1.3em; display:grid; gap:.35em; }
.doc li{ font-size:15.5px; line-height:1.7; }
.doc a{ color:#0369A1; text-decoration:underline; text-underline-offset:2px; }
.doc a:hover{ color:var(--blue); }
.doc strong{ color:var(--ink); }
.doc .lead{ font-size:17px; color:var(--slate-700); }
.doc .card{
  background:#fff; border:1px solid rgba(148,163,184,.28); border-radius:16px;
  padding:22px 24px; margin:1.2em 0; box-shadow:0 14px 36px -24px rgba(15,23,42,.22);
}
.doc .muted{ color:var(--slate-500); font-size:13.5px; }
.doc .placeholder{
  background:rgba(251,191,36,.14); border:1px dashed rgba(202,138,4,.55);
  border-radius:6px; padding:1px 7px; color:#92610a; font-weight:600;
  font-family:var(--mono); font-size:.9em;
}
.doc-back{
  display:inline-flex; align-items:center; gap:8px; margin-top:2.4em;
  font-weight:700; color:#0369A1; text-decoration:none;
}
.doc-back:hover{ color:var(--blue); }

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav-links{
    position:absolute; top:calc(100% + 10px); right:3vw; left:auto;
    flex-direction:column; align-items:stretch; gap:2px;
    min-width:min(280px,86vw); padding:10px;
    background:rgba(2,6,23,.97);
    border:1px solid var(--glass-line); border-radius:16px;
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .nav.open .nav-links{ opacity:1; transform:none; pointer-events:auto; }
  .nav-links a{ padding:12px 14px; border-radius:10px; font-size:15px; }
  .nav-m{ display:block; }
  .nav-m--sep{ margin-top:6px; padding-top:8px; border-top:1px solid rgba(148,163,184,.16); }
  .nav-actions .nav-contact, .nav-actions .nav-portal, .nav-actions .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}
@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .footer-grid{ grid-template-columns:1fr; }
  body{ font-size:16px; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}