/* =================================================================
 * Mountaincamp Pfenningberg — Design Tokens
 * Reverse-engineered from https://www.mountaincamp.at/
 * ================================================================= */

/* External resources --------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Work+Sans:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

:root {
  /* ─── Brand palette ──────────────────────────────────────────── */
  --c-tan:           #7f6e42; /* primary brand — wordmark band, headings */
  --c-tan-light:     #a89266; /* secondary tan, dividers */
  --c-tan-dark:      #6b5b35; /* hover state for tan backgrounds */
  --c-cream:         #f5efe0; /* tinted callout background */

  --c-blue-deep:     #0a4275; /* "Buchung & Wichtige Hinweise" band */
  --c-blue-deep-2:   #083764; /* hover */
  --c-blue-link:     #055ada; /* primary link / .btn-primary in highlight-phone */

  --c-forest:        #49654e; /* secondary nature accent */
  --c-green:         #20bf6b; /* primary CTA — Jetzt buchen */
  --c-green-hover:   #1ca15b;
  --c-green-bright:  #2ecc71;
  --c-green-deep:    #10b418;

  --c-orange-tile:   #da532c; /* msapplication tile */
  --c-amber-bg:      #fff3cd;
  --c-amber-border:  #ffeaa7;
  --c-amber-text:    #856404;

  /* ─── Neutrals (live-CSS exact values) ───────────────────────── */
  --c-white:    #ffffff;
  --c-bg:       #ffffff;
  --c-bg-soft:  #eef4f7; /* highlight-phone band */
  --c-bg-muted: #f8f9fa;
  --c-text:     #313437; /* body */
  --c-text-2:   #4b4c4d; /* footer */
  --c-text-3:   #7d8285; /* muted */
  --c-text-4:   #aaaaaa; /* fine print */
  --c-border:   #e8e8e8;
  --c-divider:  #cccccc;

  /* ─── Semantic ──────────────────────────────────────────────── */
  --c-fg-1:     var(--c-text);
  --c-fg-2:     var(--c-text-2);
  --c-fg-3:     var(--c-text-3);
  --c-fg-muted: var(--c-text-4);
  --c-link:     var(--c-blue-link);
  --c-link-hover: var(--c-blue-deep);
  --c-success:  var(--c-green);
  --c-warning-bg: var(--c-amber-bg);
  --c-warning-border: var(--c-amber-border);
  --c-warning-text: var(--c-amber-text);
  --c-brand:    var(--c-tan);

  /* ─── Typography ─────────────────────────────────────────────── */
  --ff-display: "Manrope", "Work Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ff-body:    "Manrope", "Work Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ff-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-display: 4rem;     /* 64 — hero wordmark */
  --fs-h1:      2.5rem;   /* 40 */
  --fs-h2:      1.75rem;  /* 28 */
  --fs-h3:      1.375rem; /* 22 */
  --fs-h4:      1.125rem; /* 18 */
  --fs-body:    1rem;     /* 16 */
  --fs-small:   0.8125rem;/* 13 */

  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-body:    1.6;

  --tracking-display: 0.04em;
  --tracking-caps:    0.06em;

  /* ─── Spacing (4-step) ───────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ─── Radii ──────────────────────────────────────────────────── */
  --r-sm:    2px;
  --r-md:    4px;  /* default — Bootstrap 4 */
  --r-lg:    8px;
  --r-xl:    16px;
  --r-pill:  9999px;
  --r-circle: 50%;

  /* ─── Elevation ──────────────────────────────────────────────── */
  --sh-card:  0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.04);
  --sh-pop:   0 4px 12px rgba(0,0,0,0.10), 0 12px 32px rgba(0,0,0,0.08);
  --sh-float: 0 8px 24px rgba(0,0,0,0.18);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,0.06);

  /* ─── Layout ─────────────────────────────────────────────────── */
  --container: 1140px;
  --nav-h: 70px;
}

/* Semantic element styles ---------------------------------------- */

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-fg-1);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--c-tan);
  margin: 0 0 var(--sp-5) 0;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-family: var(--ff-body); letter-spacing: 0; }
h4 { font-size: var(--fs-h4); font-family: var(--ff-body); letter-spacing: 0; }

.display {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-white);
}

p   { margin: 0 0 var(--sp-4) 0; }
small { font-size: var(--fs-small); color: var(--c-fg-3); }

a {
  color: var(--c-link);
  text-decoration: none;
}
a:hover { color: var(--c-link-hover); text-decoration: underline; }

code, pre {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  background: var(--c-bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
}

/* Reusable component primitives --------------------------------- */

.mc-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 600;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background-color 150ms ease, color 150ms ease, transform 80ms ease;
}
.mc-btn:active { transform: translateY(1px); }
.mc-btn--primary { background: var(--c-green); color: #fff; }
.mc-btn--primary:hover { background: var(--c-green-hover); color: #fff; text-decoration: none; }
.mc-btn--brand   { background: var(--c-tan); color: #fff; }
.mc-btn--brand:hover { background: var(--c-tan-dark); color: #fff; text-decoration: none; }
.mc-btn--outline { background: transparent; border-color: var(--c-tan); color: var(--c-tan); }
.mc-btn--outline:hover { background: var(--c-tan); color: #fff; text-decoration: none; }
.mc-btn--ghost   { background: transparent; color: var(--c-fg-1); }

.mc-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  padding: var(--sp-5);
}

.mc-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--c-tan);
  color: #fff;
  font-size: var(--fs-small);
  border-radius: var(--r-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.mc-alert--warning {
  background: var(--c-warning-bg);
  border: 1px solid var(--c-warning-border);
  color: var(--c-warning-text);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
}

.mc-band--brand { background: var(--c-tan);     color: #fff; }
.mc-band--blue  { background: var(--c-blue-deep); color: #fff; }
.mc-band--cream { background: var(--c-cream);   color: var(--c-fg-1); }