/* =====================================================================
   Werbetechnik Heubach — Design-System „Modernist"

   Eine Datei für die ganze Seite. Vorher trug jede der 18 kundenseitigen
   Dateien ihren eigenen Farbsatz; eine Farbe zu ändern hieß, sie achtzehn
   Mal zu ändern.

   Aufbau:
     1. Schrift
     2. Token (Farben, Abstände, Schatten)
     3. Grundlagen (Reset, Typografie)
     4. Raster und Bänder
     5. Bauteile (Knöpfe, Karten, Felder, Tabellen, Marken)
     6. Kopf- und Fußzeile
     7. Handy  ← steht ganz unten, siehe Hinweis dort
   ===================================================================== */


/* ---------- 1. Schrift -------------------------------------------------
   Archivo als variable Schrift: EINE Datei deckt 400 bis 900 ab.
   Selbst gehostet, damit beim Aufruf keine Daten an Google gehen.
   font-display:swap — sonst bleibt der Text unsichtbar, bis sie da ist. */

@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------- 2. Token --------------------------------------------------- */

:root{
  /* Grundfarben */
  --bg:        #f3f2f2;   /* Seite */
  --surface:   #eae9e9;   /* Karten, Eingabefelder */
  --text:      #201e1d;
  --ink:       #17201f;   /* Kopfzeile, Hero, Fuß */
  --accent:    #ec3013;
  --accent-2:  #e15b47;
  --divider:   color-mix(in srgb, #201e1d 40%, transparent);

  /* Neutralrampe — ein gemeinsamer Helligkeitsverlauf */
  --n-100:#f8f4f4; --n-200:#eae7e7; --n-300:#d7d3d3; --n-400:#bab6b6;
  --n-500:#9b9797; --n-600:#7d7979; --n-700:#605d5d; --n-800:#444141;
  --n-900:#2d2b2b;

  /* Akzentrampe */
  --a-100:#fff2ef; --a-200:#ffe0d9; --a-300:#ffc4b8; --a-400:#ff9783;
  --a-500:#ff563c; --a-600:#dd2b0f; --a-700:#ae1800; --a-800:#7c1405;
  --a-900:#4d170e;

  /* Die sechs Druckfarben — Signatur des Hauses.
     Reihenfolge wie im Streifen: Cyan, Grün, Gelb, Rot, Magenta, Violett. */
  --p1:#0e9bd8; --p2:#12b58f; --p3:#f5a300;
  --p4:#ec3013; --p5:#d61f7a; --p6:#6d3bd6;

  /* Schrift */
  --font: 'Archivo', system-ui, -apple-system, Segoe UI, sans-serif;
  --fw-head: 800;

  /* Abstände */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --s12:48px; --s16:64px;

  /* Eckig. Durchgehend. Das ist der Kern dieses Systems. */
  --radius:0px;

  /* Schatten aus dem Grundton, nicht aus Schwarz */
  --shadow-sm:0 1px 2px  color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md:0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Maße */
  --wrap:1280px;
  --pad:40px;          /* Seitenrand — am Handy überschrieben */
  --headh:54px;        /* Höhe der klebenden Kopfzeile */
}


/* ---------- 2b. Alte Namen weiterreichen -------------------------------
   In den Seiten stehen noch rund 380 Inline-Stile mit den Variablennamen
   der alten Fassung (--amber, --graphite, --silver …). Die einzeln
   umzuschreiben waere fehleranfaellig; hier werden sie auf die neue
   Palette abgebildet. Damit ist auch der letzte Rest im neuen Design,
   ohne dass irgendwo eine Farbe ins Leere zeigt. */

:root{
  --amber:      var(--accent);
  --graphite:   var(--ink);
  --steel:      var(--surface);
  --steel-light:#ffffff;
  --silver:     var(--n-700);
  --silver-dim: var(--n-500);
  --offwhite:   var(--text);
  --mono:       var(--font);
  --green:      #12b58f;
}

/* Auf dunklem Grund kehren sich Vorder- und Hintergrund um: dort muss
   --offwhite wieder hell sein, sonst steht dunkler Text auf dunklem Band. */
.band,.hero,.contact,footer,.summary,#shopTopbar,#shopLegalFooter,
.scrollytell,.price-card.featured,.cookie-banner,#whCookie{
  --offwhite:   #ffffff;
  --silver:     var(--n-300);
  --silver-dim: var(--n-400);
  --steel:      rgba(255,255,255,.07);
  --amber:      var(--p3);
}


/* ---------- 3. Grundlagen ---------------------------------------------- */

*{ box-sizing:border-box; }

html{
  /* Damit Sprungmarken nicht unter der klebenden Kopfzeile landen */
  scroll-padding-top:calc(var(--headh) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  font-weight:500;
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0;
  font-weight:var(--fw-head);
  letter-spacing:-0.04em;
  line-height:0.9;
  text-transform:uppercase;
  text-wrap:balance;
}
h1{ font-size:clamp(38px,7vw,92px); line-height:0.87; letter-spacing:-0.045em; }
h2{ font-size:clamp(30px,4.6vw,60px); }
/* h1 und h2 bleiben versal - das ist die Handschrift des Designs. Die
   vielen kleinen Zwischenueberschriften nicht: durchgehend Versalien
   ermuedet beim Lesen. */
h3{ font-size:clamp(20px,2.6vw,29px); letter-spacing:-0.02em; line-height:1.1;
    text-transform:none; }
h4{ text-transform:none; letter-spacing:0.02em; }

p{ margin:0; text-wrap:pretty; }

/* Lange Woerter duerfen die Seite nicht breiter machen als das Display.
   "Geschaeftsbedingungen" in 30px war 417px breit und schob die ganze
   Seite zur Seite. Trennung braucht lang="de" im <html>. */
h1,h2,h3,h4{ overflow-wrap:break-word; }
@media (max-width:640px){
  h1,h2{ hyphens:auto; -webkit-hyphens:auto; }
}

a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--accent); }

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

hr,.hr{ border:0; border-top:2px solid var(--text); margin:var(--s6) 0; }

/* Kleintext in Versalien — das Gegenstück zu den großen Überschriften */
.kicker{
  font-size:13px; font-weight:700; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--n-400);
}
.muted{ color:var(--n-700); }

/* Nur für Screenreader */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


/* ---------- 4. Raster und Bänder --------------------------------------- */

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }

/* Dunkles Vollbreitband (Kopf, Hero, Kontakt, Fuß) */
.band{ background:var(--ink); color:#fff; }
.band .muted{ color:var(--n-300); }
.band a:hover{ color:var(--p3); }

.section{ padding:var(--s16) 0 0; }

/* Die sechsfarbige Leiste */
.stripe{ display:flex; height:26px; }
.stripe > *{ flex:1; }
.stripe i:nth-child(1){ background:var(--p1); }
.stripe i:nth-child(2){ background:var(--p2); }
.stripe i:nth-child(3){ background:var(--p3); }
.stripe i:nth-child(4){ background:var(--p4); }
.stripe i:nth-child(5){ background:var(--p5); }
.stripe i:nth-child(6){ background:var(--p6); }

/* Fugenloses Kachelraster: die 2px-Fugen zeigen den Grund und wirken
   dadurch wie gezogene Linien. */
.tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }
.tile{
  padding:30px 28px 34px; min-height:250px;
  display:flex; flex-direction:column; color:#fff;
}
.tile .num{ font-size:13px; font-weight:800; letter-spacing:0.16em; opacity:.85; }
.tile h3{ margin-top:12px; }
.tile p{ margin-top:14px; font-size:16px; font-weight:600; line-height:1.5; }
.tile .spacer{ flex:1 1 auto; min-height:14px; }
.tile:nth-child(1){ background:var(--p1); }
.tile:nth-child(2){ background:var(--p2); }
.tile:nth-child(3){ background:var(--p3); color:var(--text); }
.tile:nth-child(3) .num{ opacity:.7; }
.tile:nth-child(4){ background:var(--p4); }
.tile:nth-child(5){ background:var(--p5); }
.tile:nth-child(6){ background:var(--p6); }

/* Kennzahlenband */
.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 32px; padding:36px 0; }
.stat{ border-top:2px solid var(--text); padding-top:16px; }
.stat b{ display:block; font-size:clamp(24px,2.8vw,34px); font-weight:800; letter-spacing:-0.03em; line-height:1.1; }
.stat span{ display:block; margin-top:6px; font-size:15px; font-weight:500; color:var(--n-700); }


/* ---------- 5. Bauteile ------------------------------------------------ */

/* Die Modifikatoren stehen mit in der Basis, weil bestehendes Markup sie
   einzeln benutzt (class="btn-primary" ohne "btn"). Beide Formen gehen. */
.btn,.btn-primary,.btn-secondary,.btn-ghost,.btn-light{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; text-decoration:none; text-align:center;
  font-family:var(--font); font-weight:var(--fw-head);
  font-size:15px; line-height:1.2; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--text); background:transparent;
  border:1px solid transparent; border-radius:var(--radius);
  padding:15px 24px;
  min-height:48px;                 /* Fingerfläche */
  transition:background .15s, color .15s, border-color .15s;
}
.btn:hover{ color:var(--text); }
.btn:disabled,.btn[disabled],.btn-primary:disabled{ opacity:.4; cursor:not-allowed; }
/* Die Basis oben setzt padding/min-height; die Modifikatoren nur noch Farbe. */

.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--a-600); color:#fff; }
.btn-primary:active{ background:var(--a-700); }

.btn-light{ background:#fff; color:var(--text); }
.btn-light:hover{ background:var(--n-300); }

.btn-secondary{ border-color:var(--divider); }
.btn-secondary:hover{ background:color-mix(in srgb, var(--text) 7%, transparent); }

.btn-ghost{ border-color:var(--divider); background:transparent; font-size:13px; padding:11px 16px; min-height:44px; }
.btn-ghost:hover{ background:color-mix(in srgb, var(--text) 7%, transparent); }

.btn-sm{ font-size:13px; padding:12px 18px; min-height:44px; }
.btn-block{ width:100%; }

/* Knopfpaar mit 2px Fuge — das Muster aus dem Hero */
.btn-row{ display:flex; gap:2px; flex-wrap:wrap; }

.card{
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s4); background:var(--surface);
  border:1px solid transparent; border-radius:var(--radius);
}
.card-kicker{ font-size:11px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); }
.card-title{ font-size:17px; font-weight:800; letter-spacing:-0.02em; line-height:1.25; }
.card-meta{ font-size:14px; color:var(--n-700); }

.tag{
  display:inline-flex; align-items:center; font-size:11px; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:var(--radius);
  background:var(--n-200); color:var(--n-800);
}
.tag-accent{ background:var(--accent); color:#fff; }
.tag-outline{ background:transparent; border:1px solid var(--divider); }

label{
  display:block; font-size:13px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--n-700); margin:var(--s4) 0 var(--s2);
}

.input,input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],input[type=search],input[type=date],input[type=datetime-local],
input[type=url],select,textarea{
  width:100%; min-height:48px; padding:12px 14px;
  font-family:var(--font);
  /* 16px ist Pflicht: darunter zoomt iOS beim Antippen von selbst hinein */
  font-size:16px; font-weight:500;
  color:var(--text); caret-color:var(--accent);
  background:#fff; border:1px solid var(--divider); border-radius:var(--radius);
}
textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.input:focus,input:focus,select:focus,textarea:focus{
  outline:2px solid var(--accent); outline-offset:-2px; border-color:var(--accent);
}
input[type=checkbox],input[type=radio]{ width:auto; min-height:0; accent-color:var(--accent); }

/* Tabellen laufen am Handy sonst über den Rand — immer in .table-scroll */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; font-size:15px; }
.table th,.table td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--divider); }
.table th{ font-size:12px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:var(--n-700); }

.elev-sm{ box-shadow:var(--shadow-sm); }
.elev-md{ box-shadow:var(--shadow-md); }
.elev-lg{ box-shadow:var(--shadow-lg); }


/* ---------- 6. Kopf- und Fußzeile -------------------------------------- */

.site-head{
  position:sticky; top:0; z-index:50;
  background:var(--ink); color:#fff; border-bottom:2px solid var(--ink);
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px 28px; min-height:var(--headh); padding-top:14px; padding-bottom:14px;
}
.brand{ display:flex; align-items:center; gap:14px; color:#fff; }
.brand .mark{ display:block; }
.brand .mark img{ height:46px; width:46px; display:block; }
.brand .name{
  font-size:15px; font-weight:800; letter-spacing:0.14em;
  text-transform:uppercase; line-height:1.25;
}
.site-nav{ display:flex; align-items:center; gap:14px 24px; }
.site-nav a{
  font-size:13px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--n-200);
}
.site-nav a:hover{ color:var(--p3); }
.site-nav .btn{ font-size:13px; padding:13px 20px; letter-spacing:0.06em; }

/* Klappmenü — der Knopf ist nur am Handy sichtbar */
.nav-toggle{
  display:none; width:48px; height:48px; padding:0;
  background:transparent; border:1px solid rgba(255,255,255,.35);
  color:#fff; cursor:pointer; border-radius:var(--radius);
}
.nav-toggle span{ display:block; width:20px; height:2px; background:#fff; margin:4px auto; }

.site-foot{ background:var(--ink); color:#fff; margin-top:var(--s16); padding:var(--s12) 0; }
.site-foot a{ color:var(--n-300); }
.site-foot a:hover{ color:var(--p3); }


/* ---------- 7. Handy ---------------------------------------------------
   ACHTUNG: Dieser Block gehört ans DATEIENDE. Steht er weiter oben,
   überschreiben ihn die Grundregeln — genau der Fehler, der im Editor
   dazu geführt hat, dass das Polster bei 30px blieb und die Zeichenfläche
   22 % zu klein war.

   Das Design ist für den Desktop gezeichnet. Was hier steht, ist deshalb
   Entwurf, keine Anpassung. */

@media (max-width:900px){
  .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  :root{ --pad:24px; }
}

@media (max-width:640px){
  :root{ --pad:16px; --s16:44px; --s12:32px; }

  /* Rueck- und Warenkorblinks waren nur so hoch wie ihr Text (21px) */
  .back,.back-link,.cart-link{ display:inline-flex; align-items:center; min-height:44px; }

  /* Schieberegler: die Leiste ist von Haus aus 16px hoch. Am Finger ist das
     nicht zu treffen - die Flaeche wird vergroessert, der Regler bleibt schlank. */
  input[type=range]{ height:44px; padding:0; background:transparent; }

  body{ font-size:16px; }

  /* Ohne diese Untergrenze ist „Präzision," breiter als ein 375er Display */
  h1{ font-size:clamp(32px,9vw,44px); line-height:0.92; letter-spacing:-0.03em; }
  h2{ font-size:clamp(26px,7.5vw,36px); line-height:0.95; }
  h3{ font-size:20px; }

  .site-head .wrap{ padding-top:10px; padding-bottom:10px; }
  .brand .mark img{ height:34px; width:34px; }
  .brand .name{ font-size:12px; letter-spacing:0.1em; }

  /* Navigation klappt weg, der Angebotsknopf bleibt sichtbar */
  .nav-toggle{ display:block; }
  .site-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:2px solid var(--accent);
    padding:var(--s2) var(--pad) var(--s4);
  }
  .site-nav.offen{ display:flex; }
  .site-nav a{ padding:15px 0; border-bottom:1px solid rgba(255,255,255,.12); }
  .site-nav .btn{ margin-top:var(--s3); }

  .stripe{ height:14px; }

  .tiles{ grid-template-columns:1fr; }
  .tile{ min-height:0; padding:22px 20px 26px; }

  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; padding:24px 0; }
  .stat b{ font-size:26px; }
  .stat span{ font-size:14px; }

  .btn{ font-size:14px; padding:14px 18px; }
  .btn-row{ gap:2px; }
  .btn-row .btn{ flex:1 1 100%; }

  .section{ padding-top:var(--s12); }
  .site-foot{ padding:var(--s8) 0; }
}