/* ==========================================================================
   Tidox Packaging GmbH - Design Tokens
   Farbe, Typografie und Raster nach "Tidox Visual Brand Guideline v1.0",
   August 2026. Die Palette ist unverändert aus der PDF übernommen.
   Regeln stehen in brand/BRAND.md.
   ========================================================================== */

:root {
  /* ---- Palette, exakt aus der PDF ------------------------------------- */
  --forest:      #2F8738;   /* Primäraktion */
  --fresh:       #4FB66A;   /* Highlights */
  --cream:       #FEF8EF;   /* Hauptfläche */
  --sand:        #E7E0D2;   /* Sekundärfläche */
  --ink:         #202421;   /* Überschriften, Fließtext */
  --kraft:       #B98252;   /* Materialakzent */
  --orange:      #FF8A19;   /* Logo-Echo */
  --trust-blue:  #8CB7D3;   /* Serviceakzent */

  /* Echte Logofarben. Nur für Logodarstellung, nicht für UI.
     Die PDF nennt #FF8A19 als Logo-Echo, die Wortmarke selbst
     enthält diese beiden Werte. */
  --logo-orange-deep:  #FF7300;
  --logo-orange-light: #FFAB1D;

  /* ---- Semantik --------------------------------------------------------
     Alles Sichtbare referenziert diese Ebene, nicht die Rohfarben. */
  --surface:          var(--cream);
  --surface-elevated: #FFFFFF;
  --surface-secondary:var(--sand);
  --surface-invert:   var(--ink);

  --text:             var(--ink);
  --text-muted:       #5C635D;
  --text-invert:      var(--cream);
  --text-on-accent:   #FFFFFF;     /* Weiß auf Forest: 4,52:1, besteht AA */

  --border:           #DED6C6;
  --border-strong:    #C9BFAC;

  --accent:           var(--forest);
  --accent-hover:     #256B2C;
  --accent-soft:      #DCEEDF;     /* Forest stark aufgehellt, für Flächen */
  --focus-ring:       var(--forest);

  /* Kicker-Label über Überschriften.
     Die PDF setzt sie in Fresh. Gemessen auf Cream: 2,42:1, das besteht
     WCAG AA nicht. Forest erreicht 4,28:1. Ein Wechsel ist eine Zeile. */
  --kicker:            var(--fresh);
  --kicker-accessible: var(--forest);

  /* ---- Typografie ------------------------------------------------------
     PDF: Montserrat oder eine metrisch ähnliche geometrische Grotesk.
     Eine Familie für Überschriften und Fließtext. */
  --font-display: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, sans-serif;

  /* Fließende Größen für die Serif-Ebenen. */
  --text-display: clamp(2.75rem, 7vw, 5.5rem);    /* Hero */
  --text-section: clamp(2rem, 4.5vw, 3.5rem);     /* Sektionsüberschrift */

  --text-xs:   0.8125rem;  /* 13px - Kicker, Meta */
  --text-sm:   0.9375rem;  /* 15px - Labels, Navigation */
  --text-base: 1.125rem;   /* 18px - Fließtext, PDF: 18-20px */
  --text-lg:   1.25rem;    /* 20px - Einleitungen */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-h2:   3rem;       /* 48px - PDF: 44-56px */
  --text-h1:   4.25rem;    /* 68px - PDF: 64-72px */

  --tracking-display: -0.02em;
  --leading-display:  1.1;
  --leading-body:     1.6;

  /* ---- Raster ----------------------------------------------------------
     PDF: 12 Spalten, Abstandsskala 8/12/16/24/32/48/64/96. */
  --page-width: 1240px;
  --columns:    12;
  --grid-gap:   24px;

  --space-1:  8px;
  --space-2:  12px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  64px;
  --space-8:  96px;

  /* ---- Radien ----------------------------------------------------------
     Aus den Karten und Buttons der PDF abgeleitet. */
  --radius-button: 999px;  /* volle Pille */
  --radius-card:   20px;
  --radius-media:  20px;
  --radius-input:  14px;

  /* ---- Tiefe -----------------------------------------------------------
     Geschichtet und warm getönt. Nie neutrales Schwarz. */
  --shadow-raised:
    0 1px 2px rgba(32, 36, 33, 0.05),
    0 2px 8px rgba(32, 36, 33, 0.05);
  --shadow-float:
    0 2px 4px rgba(32, 36, 33, 0.05),
    0 8px 24px rgba(32, 36, 33, 0.07),
    0 16px 48px rgba(32, 36, 33, 0.05);
  --shadow-accent:
    0 2px 8px rgba(47, 135, 56, 0.20),
    0 8px 24px rgba(47, 135, 56, 0.14);

  /* ---- Bewegung -------------------------------------------------------- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur-base:  240ms;
}

/* ==========================================================================
   Dunkelmodus
   Nicht Teil der PDF, aus deren Palette abgeleitet. Auf dunklem Grund
   übernimmt Fresh die Akzentrolle: Forest erreicht auf Ink nur 3,48:1,
   Fresh dagegen 6,16:1.
   ========================================================================== */

:root[data-theme="dark"] {
  --surface:          var(--ink);
  --surface-elevated: #2B302C;
  --surface-secondary:#343A35;
  --surface-invert:   var(--cream);

  --text:             var(--cream);
  --text-muted:       #A8B0A9;
  --text-invert:      var(--ink);
  --text-on-accent:   var(--ink);   /* Ink auf Fresh: 6,16:1 */

  --border:           #3A403B;
  --border-strong:    #4C534D;

  --accent:           var(--fresh);
  --accent-hover:     #6BC784;
  --accent-soft:      #2A3A2D;
  --focus-ring:       var(--fresh);
  --kicker:           var(--fresh);

  --shadow-raised: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-float:  0 2px 4px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35),
                   0 16px 48px rgba(0,0,0,0.3);
  --shadow-accent: 0 2px 8px rgba(79,182,106,0.25), 0 8px 24px rgba(79,182,106,0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:          var(--ink);
    --surface-elevated: #2B302C;
    --surface-secondary:#343A35;
    --surface-invert:   var(--cream);
    --text:             var(--cream);
    --text-muted:       #A8B0A9;
    --text-invert:      var(--ink);
    --text-on-accent:   var(--ink);
    --border:           #3A403B;
    --border-strong:    #4C534D;
    --accent:           var(--fresh);
    --accent-hover:     #6BC784;
    --accent-soft:      #2A3A2D;
    --focus-ring:       var(--fresh);
    --kicker:           var(--fresh);
    --shadow-raised: 0 1px 2px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
    --shadow-float:  0 2px 4px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35),
                     0 16px 48px rgba(0,0,0,0.3);
    --shadow-accent: 0 2px 8px rgba(79,182,106,0.25), 0 8px 24px rgba(79,182,106,0.16);
  }
}

/* ==========================================================================
   Basis
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  margin: 0;
}

/* PDF: Zeilenlänge 55 bis 75 Zeichen. */
p { max-width: 68ch; }

/* Verweise tragen die Markenfarbe, nie das Browserblau. */
a:not(.t-btn) { color: var(--accent); text-underline-offset: 3px; }
a:not(.t-btn):hover { color: var(--accent-hover); }

/* Alle Überschriften tragen dieselbe Typografie: Montserrat, Schnitt 600,
   enge Laufweite. Eine Familie für die ganze Seite, wie in der Richtlinie. */
.t-display,
.t-section {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.t-display { font-size: var(--text-display); }
.t-section { font-size: var(--text-section); }

/* PDF: Versalien nur als Label, nie als Absatz. */
.t-kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kicker);
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-input);
}

/* ---- Buttons, drei Rollen wie in der PDF ----------------------------- */

.t-btn {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 15px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

/* Beratung anfragen */
.t-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-accent);
}
.t-btn--primary:hover  { background: var(--accent-hover); color: var(--text-on-accent); transform: translateY(-1px); }
.t-btn--primary:active { transform: translateY(1px) scale(0.985); }

/* Sortiment ansehen */
.t-btn--outline {
  background: transparent;
  color: var(--text);
  border-color: var(--ink);
}
.t-btn--outline:hover  { background: var(--accent-soft); color: var(--text); transform: translateY(-1px); }
.t-btn--outline:active { transform: translateY(1px) scale(0.985); }

/* Online bei packit2go, führt aus der Seite heraus */
.t-btn--external {
  background: var(--ink);
  color: var(--cream);
}
.t-btn--external:hover  { background: #10130F; color: var(--cream); transform: translateY(-1px); }
.t-btn--external:active { transform: translateY(1px) scale(0.985); }

/* ---- Karte ------------------------------------------------------------ */

.t-card {
  background: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised);
  padding: var(--space-4);
}

/* ---- Eingabe ---------------------------------------------------------- */

.t-input {
  width: 100%;
  padding: 13px 16px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.t-input::placeholder { color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}