/* ============================================================
   diekreadiven — global.css
   Reset, base typography, layout primitives, buttons, utilities.
   Every value references design-tokens.css.
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
}
img, video, svg { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--c-text);
}
h1 { font-size: var(--fs-hero); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-xl); }
p { max-width: var(--max-w-text); }
strong { font-weight: var(--fw-bold); }
em, .italic { font-style: italic; }
.display-italic { font-family: var(--ff-display); font-style: italic; }

/* ---------- LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 820px; }
section { padding-block: var(--section-gap); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.lead { font-size: var(--fs-lg); color: var(--c-text-2); line-height: var(--lh-relaxed); }

/* Background utilities (section rhythm) */
.bg-base    { background: var(--c-bg); }
.bg-2       { background: var(--c-bg-2); }
.bg-3       { background: var(--c-bg-3); }
.bg-surface { background: var(--c-surface); }
.bg-dark    { background: var(--c-dark); color: var(--c-text-inv); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: var(--c-text-inv); }
.bg-brand   { background: var(--c-brand); color: var(--c-text-inv); }
.bg-brand h1, .bg-brand h2, .bg-brand h3 { color: var(--c-text-inv); }

/* ---------- SECTION HEADER ---------- */
.label {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--ff-body);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--c-brand); margin-bottom: var(--sp-5);
}
.label::before { content: ''; width: 24px; height: 1.5px; background: var(--c-brand); flex-shrink: 0; }
.bg-dark .label, .bg-brand .label { color: var(--c-accent); }
.bg-dark .label::before, .bg-brand .label::before { background: var(--c-accent); }
.section-head { max-width: 720px; margin-bottom: var(--sp-12); }
.section-head p { margin-top: var(--sp-4); }

/* ---------- BUTTONS ---------- */
/* FlowButton style: ink-circle fills from centre, pill morphs to rounded,
   arrow slides across. Applied to every .btn via pure CSS — works for
   JS-built buttons (cookie banner) too, and never touches button text. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 0.8rem 2.5rem; border-radius: var(--r-full);
  font-family: var(--ff-body);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  --btn-ink: var(--c-dark);
  background-color: transparent;
  background-image: radial-gradient(circle at 50% 50%, var(--btn-ink) 0%, var(--btn-ink) 100%);
  background-repeat: no-repeat; background-position: center; background-size: 0% 0%;
  transition: background-size .6s cubic-bezier(0.19,1,0.22,1),
              border-radius .6s cubic-bezier(0.23,1,0.32,1),
              color .4s ease, border-color .4s ease,
              transform var(--t-base), box-shadow var(--t-base);
}
.btn:hover { background-size: 250% 250%; border-radius: var(--r-md); }
.btn:active { transform: scale(0.95); }
.btn:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }

/* Sliding arrows (decorative): right arrow at rest, swaps to a left-entering
   arrow on hover. Use currentColor so they follow the text-colour flip. */
.btn::before, .btn::after {
  content: '\2192'; position: absolute; top: 50%; z-index: 2;
  font-size: 1.05em; line-height: 1; transform: translateY(-50%);
  color: currentColor; pointer-events: none;
  transition: left .8s cubic-bezier(0.34,1.56,0.64,1),
              right .8s cubic-bezier(0.34,1.56,0.64,1), opacity .4s ease;
}
.btn::before { left: -30%; opacity: 0; }
.btn::after  { right: 1.15rem; opacity: 1; }
.btn:hover::before { left: 1.15rem; opacity: 1; }
.btn:hover::after  { right: -30%; opacity: 0; }

/* Variants — base colour + ink colour + hover text colour */
.btn-primary { background-color: var(--c-brand); color: var(--c-text-inv); --btn-ink: var(--c-dark); box-shadow: var(--shadow-brand); }
.btn-primary:hover { color: var(--c-text-inv); }
.btn-secondary { background-color: transparent; border-color: var(--c-border-2); color: var(--c-text); --btn-ink: var(--c-dark); }
.btn-secondary:hover { color: var(--c-text-inv); border-color: transparent; }
.btn-ghost { background-color: transparent; color: var(--c-text-2); --btn-ink: var(--c-brand-soft); }
.btn-ghost:hover { color: var(--c-brand-2); }
.btn-on-brand { background-color: var(--c-text-inv); color: var(--c-brand); --btn-ink: var(--c-brand); box-shadow: var(--shadow-lg); }
.btn-on-brand:hover { color: var(--c-text-inv); }
/* On dark / brand sections: outline button fills with light ink, text goes dark */
.bg-dark .btn-secondary, .bg-brand .btn-secondary { color: var(--c-text-inv); border-color: rgba(255,253,250,0.4); --btn-ink: var(--c-text-inv); }
.bg-dark .btn-secondary:hover, .bg-brand .btn-secondary:hover { color: var(--c-dark); border-color: transparent; }

.btn--lg { padding: 1rem 3rem; font-size: var(--fs-base); }
.btn--sm { padding: 0.5rem 1.75rem; font-size: var(--fs-xs); }

/* Ripple */
.ripple {
  position: absolute; border-radius: var(--r-full);
  transform: scale(0); animation: ripple 600ms var(--ease-out);
  background: rgba(255, 253, 250, 0.5); pointer-events: none;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------- LINKS (inline) ---------- */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: var(--fw-semibold); color: var(--c-brand);
  transition: gap var(--t-fast), color var(--t-fast);
}
.link-arrow:hover { gap: var(--sp-3); color: var(--c-brand-2); }

/* ---------- PILL / BADGE ---------- */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.35rem 0.85rem; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  background: var(--c-brand-soft); color: var(--c-brand-2);
}
.pill-teal { background: rgba(22, 139, 125, 0.12); color: var(--c-accent-2); }
.pill-accent { background: rgba(245, 166, 35, 0.16); color: var(--c-accent-2); }

/* ---------- SKIP LINK ---------- */
.skip-link {
  position: absolute; left: var(--sp-4); top: -120px;
  background: var(--c-brand); color: var(--c-text-inv);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md);
  z-index: 1000; transition: top var(--t-base);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- GRID HELPERS (mobile-first, collapse to 1 col) ---------- */
.grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- VISUALLY HIDDEN ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- LANGUAGE TOGGLE ---------- */
/* Translatable nodes carry data-de + data-en attributes; main.js swaps
   textContent based on <html lang>. German is the in-markup default,
   so content is fully readable with JS disabled. */
.lang-toggle { display: inline-flex; align-items: center; gap: 2px; }
.lang-toggle button {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  padding: 0.25rem 0.5rem; border-radius: var(--r-sm);
  color: var(--c-text-3); letter-spacing: var(--ls-wide); text-transform: uppercase;
  transition: color var(--t-fast), background var(--t-fast);
}
.lang-toggle button[aria-pressed="true"] { color: var(--c-brand); background: var(--c-brand-soft); }
.lang-toggle button:hover { color: var(--c-text); }

/* ---------- PRINT ---------- */
@media print {
  #site-header, footer, .btn, #cookie-banner, .lang-toggle, .hero-cards { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}