/* ==========================================================
   FOLD FOUNDATION CSS V2.0 BEGINNT
   Variablen, Basis, Typografie, Links und Buttons
========================================================== */


/* ==========================================================
   0. DESIGN TOKENS
========================================================== */

:root{
  --fold-bg:#FFFFFF;
  --fold-surface:#F7F7F4;
  --fold-soft:#F1F1ED;

  --fold-black:#0B0B0B;
  --fold-text:#0B0B0B;
  --fold-text-light:#4A4A4A;
  --fold-muted:#6D7278;

  --fold-border:#DEDEDE;
  --fold-border-light:#E6E6E6;

  --fold-accent:#FACA30;
  --fold-accent-hover:#FFD743;
  --fold-accent-dark:#A97900;

  /* Karten-Akzente: neutral auf Weiß, gelb auf warmer Hinweisfläche. */
  --fold-card-line-neutral:#CFCFC8;
  --fold-card-line-accent:var(--fold-accent);
  --fold-card-tint:#FFF9E7;

  --fold-container:1680px;
  --fold-content:1100px;

  --fold-radius-xs:8px;
  --fold-radius-sm:12px;
  --fold-radius:16px;
  --fold-radius-lg:16px;
  --fold-button-radius:16px;

  /* Aus Kompatibilitätsgründen vorhanden, aktuell ohne Schatten. */
  --fold-shadow-sm:none;
  --fold-shadow:none;

  --space-xs:8px;
  --space-sm:14px;
  --space-md:20px;
  --space-lg:32px;
  --space-xl:48px;
  --space-xxl:72px;
}


/* ==========================================================
   0.1 WIEDERVERWENDBARE KARTEN-AKZENTE
========================================================== */

.fold-card-accent{
  border:1px solid var(--fold-border);
  border-left:3px solid var(--fold-card-line-neutral);
  border-radius:var(--fold-radius);
  background:var(--fold-bg);
}

.fold-card-accent--warm{
  border-left-color:var(--fold-card-line-accent);
  background:var(--fold-card-tint);
}


/* ==========================================================
   0.2 WEBSITEWEITE SEMANTISCHE ANWENDUNG

   Weiß / neutral  = graue Linie
   Warm / wichtig  = gelbe Linie

   Die Selektoren sind bewusst auf echte Hinweisflächen begrenzt.
   Produkt-, Bild-, Formular- und allgemeine Layoutkarten bleiben
   ohne Linie. !important hält die Bedeutung auch gegenüber älteren
   seitenspezifischen Versionsblöcken stabil.
========================================================== */

:where(
  .fold-privacy-highlight,
  .fold-folding-support__notice,
  .fold-maintenance-note:not(.fold-maintenance-note--important),
  .fold-parts-note:not(.fold-parts-note--important)
){
  background:var(--fold-bg) !important;
  border-left:3px solid var(--fold-card-line-neutral) !important;
  border-radius:var(--fold-radius) !important;
}

:where(
  .fold-quote,
  .fold-details-highlight,
  .fold-details-notice,
  .fold-usage-note,
  .fold-folding-support__video-safety-note,
  .fold-folding-support__safety-warning,
  .fold-maintenance-note--important,
  .fold-parts-note--important
){
  background:var(--fold-card-tint) !important;
  border-left:3px solid var(--fold-card-line-accent) !important;
  border-radius:var(--fold-radius) !important;
}


/* ==========================================================
   1. BASIS / SICHERER RESET
========================================================== */

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

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:var(--fold-bg);
  color:var(--fold-text-light);

  font-family:"Inter",Arial,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img,
svg,
video{
  display:block;
  max-width:100%;
}

img,
video{
  height:auto;
}

button,
input,
select,
textarea{
  font:inherit;
}


/* ==========================================================
   2. TYPOGRAFIE
========================================================== */

h1,
h2,
h3,
h4{
  margin:0;

  color:var(--fold-black);

  font-family:"Oswald",Arial,sans-serif;
  font-weight:600;
  line-height:1.08;
  text-transform:none;
}

h1{
  font-size:clamp(34px,3vw,42px);
  letter-spacing:-.025em;
}

h2{
  font-size:clamp(29px,2.4vw,34px);
  letter-spacing:-.02em;
}

h3{
  font-size:clamp(24px,2vw,27px);
  letter-spacing:-.015em;
}

h4{
  font-size:clamp(20px,1.6vw,22px);
  letter-spacing:-.01em;
}

p{
  margin:0 0 1em;
}

p:last-child{
  margin-bottom:0;
}


/* ==========================================================
   3. TEXTLINKS
========================================================== */

a{
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

a:hover{
  text-decoration-color:var(--fold-accent-dark);
}

a:focus-visible{
  outline:3px solid var(--fold-accent);
  outline-offset:3px;
  border-radius:3px;
}


/* ==========================================================
   4. BUTTON-BASIS
========================================================== */

.fold-button,
.fold-btn{
  min-height:48px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:11px 18px;

  border:1px solid transparent;
  border-radius:var(--fold-button-radius);

  font-family:"Inter",Arial,sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1;
  letter-spacing:0;

  text-align:center;
  text-decoration:none !important;

  cursor:pointer;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.fold-button-primary,
.fold-btn--primary{
  background:var(--fold-accent);
  border-color:var(--fold-accent);

  color:var(--fold-black) !important;
}

.fold-button-primary:hover,
.fold-btn--primary:hover{
  background:var(--fold-accent-hover);
  border-color:var(--fold-accent-hover);

  color:var(--fold-black) !important;
}

.fold-button-secondary,
.fold-btn--secondary{
  background:var(--fold-bg);
  border-color:var(--fold-border);

  color:var(--fold-black) !important;
}

.fold-button-secondary:hover,
.fold-btn--secondary:hover{
  background:var(--fold-bg);
  border-color:var(--fold-accent);

  color:var(--fold-black) !important;
}

.fold-button:focus-visible,
.fold-btn:focus-visible{
  outline:3px solid var(--fold-accent);
  outline-offset:3px;
}

.fold-button[aria-disabled="true"],
.fold-btn[aria-disabled="true"],
.fold-button:disabled,
.fold-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}


/* ==========================================================
   5. BEWEGUNGSREDUKTION
========================================================== */

@media (prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
  }

}


/* ==========================================================
   6. RESPONSIVE
========================================================== */

@media (max-width:767px){

  :root{
    --space-xl:40px;
    --space-xxl:56px;
  }

  body{
    font-size:15px;
    line-height:1.6;
  }

  .fold-button,
  .fold-btn{
    min-height:46px;
    padding:10px 16px;
  }

}


/* ==========================================================
   FOLD FOUNDATION CSS V2.0 ENDET
========================================================== */