/* ==========================================================================
   default.override.css:
   (fluessiges clamp system) - Porto-freundlicher override
   Ziel: konsistente Typografie/Abstaende/Radius/Container mit clamp()
   ========================================================================== */

/* 1) Root & Basis ---------------------------------------------------------- */

:root{
  /* Annahme fuer den Fluid-Bereich (Dokumentation): 360px -> 1200px */

  /* Typografie-Skala */
  --fs-00: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);       /* klein */
  --fs-0:  clamp(1rem,     0.95rem + 0.3vw, 1.125rem);   /* basis */
  --fs-1:  clamp(1.125rem, 1.02rem + 0.6vw, 1.375rem);   /* h5 */
  --fs-2:  clamp(1.25rem,  1.10rem + 1.0vw, 1.75rem);    /* h4 */
  --fs-3:  clamp(1.5rem,   1.25rem + 1.6vw, 2.25rem);    /* h3 */
  --fs-4:  clamp(1.875rem, 1.50rem + 2.2vw, 3rem);       /* h2 */
  --fs-5:  clamp(2.25rem,  1.70rem + 3.0vw, 3.75rem);    /* h1 */

  /* Zeilenhoehen */
  --lh-body: 1.6;
  --lh-tight: 1.15;
  --lh-head: 1.2;

  /* Abstands-Skala */
  --sp-1:  clamp(0.25rem, 0.20rem + 0.2vw, 0.5rem);
  --sp-2:  clamp(0.5rem,  0.40rem + 0.4vw, 0.875rem);
  --sp-3:  clamp(0.75rem, 0.60rem + 0.6vw, 1.25rem);
  --sp-4:  clamp(1rem,    0.80rem + 0.8vw, 1.75rem);
  --sp-5:  clamp(1.5rem,  1.10rem + 1.2vw, 2.5rem);
  --sp-6:  clamp(2rem,    1.40rem + 1.8vw, 3.5rem);
  --sp-7:  clamp(2.75rem, 1.80rem + 2.6vw, 5rem);

  /* Radius */
  --r-1: clamp(0.375rem, 0.30rem + 0.2vw, 0.5rem);
  --r-2: clamp(0.625rem, 0.50rem + 0.4vw, 0.875rem);
  --r-3: clamp(0.875rem, 0.70rem + 0.6vw, 1.25rem);

  /* Schatten */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 8px 20px rgba(0,0,0,.08);

  /* Container: max 1200px, fluessiges seitliches Padding */
  --container-pad: clamp(1rem, 3vw, 2.5rem);
  --container-max: 1200px;
  --container: min(var(--container-max), calc(100% - (var(--container-pad) * 2)));
}

/* Benutzer-Schriftgroessen respektieren */
html{ font-size: 100%; }

/* 2) Porto-kompatible Container-Overrides --------------------------------- */
/* Porto nutzt .container / .container-fluid. Wir ueberschreiben das Sizing sicher. */

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl{
  width: var(--container);
  margin-inline: auto;
  padding-inline: 0; /* doppelte Paddings vermeiden */
}

/* Wenn du Padding im Container willst, nutze .container-pad */
.container-pad{
  padding-inline: var(--container-pad);
}

/* Uebliches Section-Spacing */
section,
.section{
  padding-block: var(--sp-6);
}

/* Enge Sections (optionales Utility) */
.section--tight{
  padding-block: var(--sp-5);
}

/* 4) Abstands-Utilities (kompakte, sinnvolle Teilmenge) -------------------- */
/* Nutze diese statt zufaelliger rem-Werte */

.mt-1{ margin-top: var(--sp-1) !important; }
.mt-2{ margin-top: var(--sp-2) !important; }
.mt-3{ margin-top: var(--sp-3) !important; }
.mt-4{ margin-top: var(--sp-4) !important; }
.mt-5{ margin-top: var(--sp-5) !important; }
.mt-6{ margin-top: var(--sp-6) !important; }

.mb-1{ margin-bottom: var(--sp-1) !important; }
.mb-2{ margin-bottom: var(--sp-2) !important; }
.mb-3{ margin-bottom: var(--sp-3) !important; }
.mb-4{ margin-bottom: var(--sp-4) !important; }
.mb-5{ margin-bottom: var(--sp-5) !important; }
.mb-6{ margin-bottom: var(--sp-6) !important; }
.mb-7{ margin-bottom: var(--sp-7) !important; }

.py-5{ padding-block: var(--sp-5) !important; }
.py-6{ padding-block: var(--sp-6) !important; }
.py-7{ padding-block: var(--sp-7) !important; }

.p-4{ padding: var(--sp-4) !important; }
.p-5{ padding: var(--sp-5) !important; }
.p-6{ padding: var(--sp-6) !important; }

.gap-2{ gap: var(--sp-2) !important; }
.gap-3{ gap: var(--sp-3) !important; }
.gap-4{ gap: var(--sp-4) !important; }
.gap-5{ gap: var(--sp-5) !important; }

/
/* 9) Grid-Helfer ----------------------------------------------------------- */

.grid{
  display: grid;
  gap: var(--sp-4);
}

.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

@media (max-width: 600px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* 13) Motion-Sicherheit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}