:root {
  /* Farben */
  --gold: #b8962e;
  --gold-dark: #8c6f1f;
  --dark-blue: #1a2a3a;
  --soft-white: #fcfcfc;
  --white: #ffffff;
  --text: #2d3748;
  --muted: #6b7280;
  --muted-light: #9ca3af;
  --border: #e5e7eb;
  --border-soft: #ece9e2;
  --panel: #f7f7f6;
  --panel-warm: #fcf8f0;

  /* Layout */
  --container: 1200px;
  --header-height: 80px;

  /* Schatten */
  --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.18);
  --shadow-strong: 0 25px 50px -12px rgba(0, 0, 0, 0.35);

  /* Motion */
  --transition: 0.2s ease;

  /* Font families */
  --font-body: "Lato", Arial, sans-serif;
  --font-heading: "Playfair Display", serif;
  --font-family-default: var(--font-body);
  --font-family-emphasis: var(--font-heading);
  --font-family-heading: var(--font-heading);

  /* Font weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --font-weight-default: var(--weight-regular);
  --font-weight-heading: var(--weight-bold);

  /* Base typography */
  --text-base-size: 1rem;
  --text-base-line-height: 1.6;
  --heading-line-height: 1.15;
  --heading-letter-spacing: -0.01em;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-default);
  font-size: var(--text-base-size);
  line-height: var(--text-base-line-height);
  background: var(--soft-white);
  color: var(--text);
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
.font-display {
  margin-top: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  color: var(--dark-blue);
}

a {
  color: inherit;
  text-decoration: none;
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition),
    transform var(--transition),
    opacity var(--transition);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}