/* ════════════════════════════════════════════════════
   MVZ Dres. Ramdohr – Leitlinien-Assistent v2.2
   base.css – Design-Grundlagen im Website-Stil
   (Palette/Typografie 1:1 aus mvz-ramdohr.de übernommen)
   ════════════════════════════════════════════════════ */

:root {
  /* ── Farben: identisch zur Praxis-Website ── */
  --paper:      #FBF8F2;
  --paper-2:    #F1E9DC;
  --ink:        #1E2A25;
  --ink-soft:   #55615A;
  --ink-faint:  #647065;

  --petrol:       #0E4D47;
  --petrol-deep:  #0A3A35;
  --petrol-soft:  #DCEAE4;

  --pulse:      #D9544A;
  --pulse-deep: #C84A3E;
  --sand:       #E3D9C8;
  --line:       #E7DECF;

  /* Anwendungsspezifische Zustandsfarben, an die Palette angeglichen */
  --red:      #C84A3E;
  --red-bg:   #FBEDEA;
  --red-mid:  #EFC9C2;
  --amber:    #A9760F;
  --amber-bg: #FBF3E3;
  --blue:     #2C6E7F;
  --blue-bg:  #E8F1F1;
  --blue-mid: #C4DEE0;
  --green:    #4C7A4E;

  /* Rückwärtskompatible Alias-Variablen (bestehende Komponenten nutzen --teal/--surface etc.) */
  --teal:       var(--petrol);
  --teal2:      var(--petrol-deep);
  --teal-dark:  var(--petrol-deep);
  --teal-bg:    var(--petrol-soft);
  --teal-mid:   #BFDAD3;

  --ink-dim:    var(--ink-soft);
  --bg:         var(--paper);
  --surface:    #FFFFFF;
  --surface2:   var(--paper-2);
  --border:     var(--line);
  --border2:    #D9CDB8;

  /* ── Typografie: identisch zur Website ── */
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --serif: "Spectral", Georgia, serif;
  --mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, monospace;

  /* ── Form ── */
  --r-sm: 8px;
  --r:    13px;
  --r-lg: 20px;
  --shadow-sm: 0 1px 3px rgba(14,77,71,.06);
  --shadow:    0 8px 24px rgba(14,77,71,.08);
  --shadow-lg: 0 24px 50px -30px rgba(14,77,71,.30);

  --sidebar-w: 300px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(115% 75% at 90% -10%, rgba(14,77,71,.07), transparent 55%),
    radial-gradient(80% 60% at -5% 105%, rgba(217,84,74,.045), transparent 55%),
    var(--paper);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}

button { font-family: var(--sans); cursor: pointer; }
input, textarea, select { font-family: var(--sans); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 6px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
  border-radius: 4px;
}

.hidden { display: none !important; }

/* Eyebrow-Stil (wie auf der Website: Mono, Sperrung, Großbuchstaben) */
.eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--petrol);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--teal-mid);
  border-top-color: var(--petrol);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}

.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, #ece2ce 50%, var(--surface2) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: var(--r-sm);
}