/* =========================================================================
   ALBUS LEGAL — Design Tokens & Basis-Komponenten
   Kanzlei fuer Medizin + Wirtschaft, Goettingen
   Einzige Quelle der Wahrheit fuer Farben, Typografie, Abstaende, Komponenten.
   ========================================================================= */

/* ---- Hausschrift Urbanist (lokal eingebettet, mit Fallback) -------------- */
@font-face {
  font-family: "Urbanist";
  src: url("../assets/fonts/Urbanist-VariableFont_wght.ttf") format("truetype-variations"),
       url("../assets/fonts/Urbanist-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Urbanist";
  src: url("../assets/fonts/Urbanist-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("../assets/fonts/Urbanist-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Markenfarben (Quelle: logodaten Styleguide) ---------------------- */
  --al-anthracite:   #29353A; /* Primaer  CMYK 30/0/0/90  RGB 41/53/58   */
  --al-steel:        #466777; /* Sekundaer CMYK 45/0/0/65 RGB 70/103/119 */
  --al-mist:         #9DAFBA; /* Tertiaer CMYK 20/0/0/35  RGB 157/175/186 */
  --al-sand:         #D8C8AD; /* Akzent   CMYK 0/10/25/20 RGB 216/200/173 */
  --al-cloud:        #ECECEC; /* Neutral  CMYK 0/0/0/10   RGB 236/236/236 */
  --al-white:        #FFFFFF;

  /* ---- Primaer-Tonleiter (auf Weiss gerechnet) -------------------------- */
  --al-anthracite-80: #54605F;
  --al-anthracite-60: #7F888A;
  --al-anthracite-40: #A9AFB0;
  --al-anthracite-20: #D4D7D7;

  /* ---- Semantische Rollen ---------------------------------------------- */
  --al-bg:           var(--al-white);
  --al-surface:      #F6F7F8;
  --al-surface-alt:  var(--al-cloud);
  --al-text:         var(--al-anthracite);
  --al-text-muted:   var(--al-steel);
  --al-text-invert:  var(--al-white);
  --al-border:       #DCE1E4;
  --al-border-strong:var(--al-mist);
  --al-link:         var(--al-steel);
  --al-focus:        var(--al-steel);

  /* ---- Typografie ------------------------------------------------------- */
  --al-font: "Urbanist", "Avenir Next", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --al-w-light: 300;
  --al-w-regular: 400;
  --al-w-medium: 500;
  --al-w-semibold: 600;
  --al-w-bold: 700;

  --al-fs-display: 3.5rem;   /* 56 */
  --al-fs-h1:      2.5rem;   /* 40 */
  --al-fs-h2:      1.875rem; /* 30 */
  --al-fs-h3:      1.375rem; /* 22 */
  --al-fs-body-l:  1.125rem; /* 18 */
  --al-fs-body:    1rem;     /* 16 */
  --al-fs-body-s:  0.875rem; /* 14 */
  --al-fs-label:   0.8125rem;/* 13 */

  --al-lh-tight: 1.15;
  --al-lh-snug:  1.35;
  --al-lh-body:  1.6;
  --al-track-label: 0.08em;
  --al-track-caps:  0.12em;

  /* ---- Abstaende (8px-Raster) ------------------------------------------ */
  --al-space-1: 0.25rem;
  --al-space-2: 0.5rem;
  --al-space-3: 0.75rem;
  --al-space-4: 1rem;
  --al-space-5: 1.5rem;
  --al-space-6: 2rem;
  --al-space-7: 3rem;
  --al-space-8: 4rem;

  /* ---- Radius, Rahmen, Schatten ---------------------------------------- */
  --al-radius-sm: 4px;
  --al-radius:    8px;
  --al-radius-lg: 14px;
  --al-radius-pill: 999px;
  --al-shadow-sm: 0 1px 2px rgba(41,53,58,.06), 0 1px 3px rgba(41,53,58,.08);
  --al-shadow:    0 4px 14px rgba(41,53,58,.10);
  --al-shadow-lg: 0 12px 32px rgba(41,53,58,.14);
  --al-maxw: 1180px;
}

/* =========================================================================
   Basis
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--al-font);
  font-weight: var(--al-w-light);
  font-size: var(--al-fs-body);
  line-height: var(--al-lh-body);
  color: var(--al-text);
  background: var(--al-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-weight: var(--al-w-semibold); line-height: var(--al-lh-tight); color: var(--al-text); margin: 0 0 var(--al-space-4); }
h1 { font-size: var(--al-fs-h1); }
h2 { font-size: var(--al-fs-h2); }
h3 { font-size: var(--al-fs-h3); }
p  { margin: 0 0 var(--al-space-4); }
a  { color: var(--al-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.al-eyebrow {
  font-size: var(--al-fs-label);
  font-weight: var(--al-w-semibold);
  letter-spacing: var(--al-track-label);
  text-transform: uppercase;
  color: var(--al-steel);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.al-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--al-font);
  font-weight: var(--al-w-semibold);
  font-size: var(--al-fs-body);
  letter-spacing: .01em;
  line-height: 1;
  padding: .85em 1.6em;
  border-radius: var(--al-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
  text-decoration: none;
}
.al-btn:active { transform: translateY(1px); }
.al-btn:focus-visible { outline: 3px solid var(--al-mist); outline-offset: 2px; }

.al-btn--primary { background: var(--al-anthracite); color: var(--al-white); }
.al-btn--primary:hover { background: var(--al-steel); }

.al-btn--secondary { background: transparent; color: var(--al-anthracite); border-color: var(--al-anthracite); }
.al-btn--secondary:hover { background: var(--al-anthracite); color: var(--al-white); }

.al-btn--ghost { background: transparent; color: var(--al-steel); }
.al-btn--ghost:hover { background: var(--al-cloud); }

.al-btn--accent { background: var(--al-sand); color: var(--al-anthracite); }
.al-btn--accent:hover { filter: brightness(.96); }

.al-btn--sm { font-size: var(--al-fs-body-s); padding: .6em 1.2em; }
.al-btn--lg { font-size: var(--al-fs-body-l); padding: 1em 2em; }
.al-btn[disabled], .al-btn--disabled { opacity: .45; pointer-events: none; }

/* =========================================================================
   Formularelemente
   ========================================================================= */
.al-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--al-space-4); }
.al-label { font-size: var(--al-fs-label); font-weight: var(--al-w-semibold); letter-spacing: var(--al-track-label); text-transform: uppercase; color: var(--al-steel); }
.al-input, .al-textarea, .al-select {
  font-family: var(--al-font); font-size: var(--al-fs-body); font-weight: var(--al-w-light);
  color: var(--al-text); background: var(--al-white);
  border: 1.5px solid var(--al-border); border-radius: var(--al-radius);
  padding: .7em .9em; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.al-input::placeholder, .al-textarea::placeholder { color: var(--al-anthracite-40); }
.al-input:focus, .al-textarea:focus, .al-select:focus {
  outline: none; border-color: var(--al-steel);
  box-shadow: 0 0 0 3px rgba(70,103,119,.18);
}
.al-textarea { min-height: 96px; resize: vertical; }
.al-help { font-size: var(--al-fs-body-s); color: var(--al-text-muted); }

/* =========================================================================
   Cards
   ========================================================================= */
.al-card {
  background: var(--al-white);
  border: 1px solid var(--al-border);
  border-radius: var(--al-radius-lg);
  padding: var(--al-space-5);
  box-shadow: var(--al-shadow-sm);
}
.al-card__eyebrow { margin-bottom: var(--al-space-2); }
.al-card__title { font-size: var(--al-fs-h3); margin-bottom: var(--al-space-2); }
.al-card__text { color: var(--al-text-muted); font-size: var(--al-fs-body); margin: 0; }
.al-card__accent-bar { height: 4px; width: 48px; background: var(--al-sand); border-radius: var(--al-radius-pill); margin-bottom: var(--al-space-4); }

/* =========================================================================
   Header / Footer
   ========================================================================= */
.al-header { display: flex; align-items: center; justify-content: space-between; padding: var(--al-space-4) var(--al-space-6); background: var(--al-white); border-bottom: 1px solid var(--al-border); }
.al-nav { display: flex; gap: var(--al-space-5); align-items: center; }
.al-nav a { color: var(--al-anthracite); font-weight: var(--al-w-medium); font-size: var(--al-fs-body-s); letter-spacing: .02em; }
.al-nav a:hover { color: var(--al-steel); text-decoration: none; }

.al-footer { background: var(--al-anthracite); color: var(--al-mist); padding: var(--al-space-7) var(--al-space-6); }
.al-footer a { color: var(--al-cloud); }
.al-footer h4 { color: var(--al-white); font-size: var(--al-fs-label); letter-spacing: var(--al-track-label); text-transform: uppercase; }

/* =========================================================================
   Key-Visual-Muster (Streifen, abgeleitet aus dem Logo)
   ========================================================================= */
.al-pattern {
  background-color: var(--al-anthracite);
  background-image: repeating-linear-gradient(
    -28deg,
    var(--al-anthracite) 0, var(--al-anthracite) 7px,
    var(--al-steel) 7px, var(--al-steel) 9px,
    var(--al-anthracite) 9px, var(--al-anthracite) 16px,
    var(--al-mist) 16px, var(--al-mist) 17px
  );
}