/* Penny Marketing Redesign 2027, gemeinsame Tokens für alle Mockup-Varianten.
   Quelle: Canvas "Penny Marketing Rebranding", Nunito-Brand-Design (Runde 10). */

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('_fonts/nunito-latin-var.woff2') format('woff2');
}

:root {
  /* Farben, Mengenverhältnis Nebel 55, Petrol 35, Stahl 6, Amber 4 */
  --petrol: #0C2A30;
  --nebel: #EEF1F0;
  --amber: #FFB21A;
  --stahl: #2F6B73;
  --tiefpetrol: #07191D;
  --schiefer: #3E5559;   /* Nebentext auf hell */
  --dunst: #9FB8BC;      /* Nebentext auf dunkel */
  --weiss: #FFFFFF;
  --treffer: var(--amber);

  /* Schrift: nur Nunito 400 und 700 */
  --font: 'Nunito', system-ui, sans-serif;

  /* Raster: 12 Spalten, 24 px Abstand, 64 px Rand (mobil 16 px) */
  --rand: clamp(16px, 4.4vw, 64px);
  --spalt: 24px;
  --max: 1312px;

  /* Linien: Abschnitt beginnt mit 6 px, Trenner 2 px */
  --linie-dick: 6px;
  --linie: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-weight: 400; background: var(--nebel); color: var(--petrol); }
em, i { font-style: normal; }
img, svg { display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }