/* =========================================================
   Dornburg-Reisen — Colors & Type
   Source of truth: DR-Logofarbpaletten.pdf + PPTX theme
   Brand colors are official:
     RGB 166 18 26  / CMYK 15 100 90 25 / HEX #A6121A / Pantone 484 / RAL 3002
     RGB 77 77 77   / CMYK 0 0 0 70    / HEX #4D4D4D / Pantone 431 / RAL 7005
   Note: PDF text says "RGB 77 77 77" + "HEX #6F6F6F". 77/77/77 = #4D4D4D, so
   we treat #4D4D4D as the primary neutral (matches the logo). #6F6F6F is kept
   as a secondary lighter neutral.
   Typography: Open Sans (Google Font) — matches the PowerPoint template.
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");

:root {
  /* ------- Brand palette ------- */
  --dr-red:        #A6121A;   /* primary brand red */
  --dr-red-700:    #87101A;   /* deeper hover/press */
  --dr-red-500:    #BC1D26;   /* lifted / interactive */
  --dr-red-100:    #F4D9DA;   /* tint, backgrounds */
  --dr-red-50:     #FBEFEF;   /* faint wash */

  --dr-charcoal:   #4D4D4D;   /* primary neutral, from logo wordmark */
  --dr-charcoal-700: #3A3A3A;
  --dr-charcoal-900: #1F1F1F;
  --dr-gray-600:   #6F6F6F;   /* secondary neutral (per PDF hex) */
  --dr-gray-400:   #9A9A9A;
  --dr-gray-300:   #C8C8C8;
  --dr-gray-200:   #E2E2E2;
  --dr-gray-100:   #EFEFEF;
  --dr-gray-50:    #F7F7F7;
  --dr-white:      #FFFFFF;

  /* ------- Semantic surfaces ------- */
  --bg:            var(--dr-white);
  --bg-muted:      var(--dr-gray-50);
  --bg-inverse:    var(--dr-charcoal);
  --bg-tint:       var(--dr-red-50);
  --surface:       var(--dr-white);
  --surface-2:     var(--dr-gray-100);
  --overlay-dark:  rgba(31,31,31,0.55);
  --overlay-soft:  rgba(255,255,255,0.85);

  /* ------- Semantic text ------- */
  --fg:            var(--dr-charcoal);
  --fg-muted:      var(--dr-gray-600);
  --fg-subtle:     var(--dr-gray-400);
  --fg-inverse:    var(--dr-white);
  --fg-accent:     var(--dr-red);
  --fg-link:       var(--dr-red);
  --fg-link-hover: var(--dr-red-700);

  /* ------- Borders / dividers ------- */
  --border:        var(--dr-gray-200);
  --border-strong: var(--dr-gray-300);
  --border-accent: var(--dr-red);

  /* ------- States (kept restrained — brand uses red sparingly) ------- */
  --success: #6DAA2D;   /* from theme */
  --warning: #FFC000;   /* from theme */
  --info:    #189B94;   /* teal accent in theme; used rarely */
  --danger:  var(--dr-red);

  /* ------- Type scale ------- */
  --font-sans:    "Open Sans", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Open Sans", "Helvetica Neue", Arial, sans-serif; /* same family, heavier weight + italic for "Reisen" feel */

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-3xl:  40px;
  --fs-4xl:  56px;
  --fs-5xl:  72px;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-base:   1.55;
  --lh-loose:  1.7;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;   /* used on uppercase eyebrows / "EINE ÜBERSCHRIFT" */

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

  /* ------- Radii — brand is restrained; avoid heavy roundness ------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ------- Shadows — soft and quiet ------- */
  --shadow-1: 0 1px 2px rgba(31,31,31,0.06), 0 1px 1px rgba(31,31,31,0.04);
  --shadow-2: 0 4px 12px rgba(31,31,31,0.08), 0 1px 2px rgba(31,31,31,0.04);
  --shadow-3: 0 12px 32px rgba(31,31,31,0.14), 0 2px 6px rgba(31,31,31,0.06);
  --shadow-focus: 0 0 0 3px rgba(166,18,26,0.25);

  /* ------- Motion ------- */
  --ease:        cubic-bezier(.2,.6,.2,1);
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* ------- Layout ------- */
  --container:   1200px;
  --gutter:      24px;
}

/* =========================================================
   Element defaults — semantic styles to use throughout.
========================================================= */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Eyebrow / overline — the "EINE ÜBERSCHRIFT" pattern from the deck */
.eyebrow, .dr-eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--dr-red);
}

/* Display / hero — italic "Reisen"-style feel via italic + bold */
.dr-display, h1.dr-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 5vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--dr-charcoal);
}
.dr-display em, .dr-display .accent {
  color: var(--dr-red);
  font-style: italic;
  font-weight: var(--fw-bold);
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--dr-charcoal);
  margin: 0 0 var(--space-5);
}
h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--dr-charcoal);
  margin: 0 0 var(--space-4);
}
h3 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--dr-charcoal);
  margin: 0 0 var(--space-3);
}
h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--dr-charcoal);
  margin: 0 0 var(--space-3);
}
h5 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--dr-charcoal);
  margin: 0 0 var(--space-2);
}
h6 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--dr-red);
  margin: 0 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-4);
  color: var(--fg);
  line-height: var(--lh-base);
  text-wrap: pretty;
}
p.lead {
  font-size: var(--fs-md);
  color: var(--fg-muted);
}
small, .small {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
a:hover {
  color: var(--fg-link-hover);
  border-bottom-color: currentColor;
}

strong, b { font-weight: var(--fw-bold); }
em, i    { font-style: italic; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

code, kbd, samp, pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* Quote / pull-quote — nods to the brand's "Wir lieben Gegensätze" tone */
.dr-quote {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--dr-charcoal);
  border-left: 3px solid var(--dr-red);
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  font-style: italic;
}

/* Brand swoosh utility — the red curved line from the logo, used as a
   horizontal divider/rule under section headings. */
.dr-swoosh {
  display: block;
  width: 120px;
  height: 14px;
  background: url("../swoosh-red.png") center/contain no-repeat;
}