/* Root & Reset */
:root{
  --space: clamp(20px, 4vw, 60px);    /* Seitenabstände */
  --gap: clamp(20px, 2.5vw, 25px);    /* Grid-Lücke */
  --max-w: 1400px;                    /* zentrale Maxbreite */
  --bg-header: #1C1137;
  --bg-content: #ccc;
  --bg-footer: #ddd;
}

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

html, body { height: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  position: relative;
  transition: background-color .3s, color .3s;
  max-width: 100% !important;
    overflow-x: hidden;
}
main {
  overflow-x: clip;
}
.section.full,
.inner,
.mh2p,
.mh2p-akkordeon,
.akkordeon_spalten_wrapper {
  max-width: 100%;
}
/* Typo */
h1, p { margin-top: 0; }

/* Container-Grid mit Named Lines */
.grid{
  /* min-height: 100vh; */
  display: grid;
  grid-template-rows: auto 1fr auto; /* header, main, footer */
  grid-template-columns:
    [full-start] 1fr
    [main-start] minmax(0, var(--max-w))
    [main-end]   1fr
    [full-end];
}

/* Hilfsklassen für Spannen über "full" oder "main" */
.section { grid-column: main; padding-inline: var(--space); }
.section.full { grid-column: full; padding-inline: 0; }

/* 12-Spalten Utility-Grid für Inhalte */
.spalten{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

/* Beispiele für Links/Rechts-Aufteilung */
.spalten-links  { grid-column: 1 / span 8; }
.spalten-rechts { grid-column: 9 / span 4; }

/* Bereiche */
/* header.section { background: var(--bg-header); color: #fff; padding-block: clamp(24px, 6vw, 80px); } */
main.section   { background: var(--bg-content); padding-block: clamp(24px, 6vw, 80px); }
footer.section { background: var(--bg-footer); padding-block: clamp(24px, 6vw, 80px); }

/* Volle Breite innerhalb "full" mit begrenztem Innen-Wrapper */
.section.full > .inner{
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space);
}

.akkordeon_spalten_wrapper {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--space);
}

/* Motion-Respect */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* Ein einziger großer Breakpoint, falls du möchtest */
@media (min-width: 1570px){
  :root{ --space: 0; }
  /* wenn du am großen Screen echte Randspalten willst, lass --space = 0
     und verlager die Ränder in .inner via padding-inline */
}


/* === EXAKTE RANDEINSTELLUNGEN WIE IM ALTEN GRID ======================== */
/* Basis-Fallback für < 375px (nicht im Alt-Grid definiert) */
:root{ --space: 24px; }

/* 375px */
@media (min-width: 375px){
  :root{ --space: 24px; }
  .grid{
    grid-template-columns:
      [full-start] minmax(0, 24px)
      [main-start] minmax(0, 1fr)
      [main-end]   minmax(0, 24px)
      [full-end];
  }
}

/* 568px */
@media (min-width: 550px){
  :root{ --space: 36px; }
  .grid{
    grid-template-columns:
      [full-start] minmax(0, 36px)
      [main-start] minmax(0, 1fr)
      [main-end]   minmax(0, 36px)
      [full-end];
  }
}

/* 600px */
@media (min-width: 950px){
  :root{ --space: 48px; }
  .grid{
    grid-template-columns:
      [full-start] minmax(0, 48px)
      [main-start] minmax(0, 1fr)
      [main-end]   minmax(0, 48px)
      [full-end];
  }
}



/* 1108px */
@media (min-width: 1150px){
  :root{ --space: 60px; }
  .grid{
    grid-template-columns:
      [full-start] minmax(0, 60px)
      [main-start] minmax(0, 1fr)
      [main-end]   minmax(0, 60px)
      [full-end];
  }
}

/* 1108px */
@media (min-width: 1350px){
  :root{ --space: 72px; }
  .grid{
    grid-template-columns:
      [full-start] minmax(0, 72px)
      [main-start] minmax(0, 1fr)
      [main-end]   minmax(0, 72px)
      [full-end];
  }
}

@media (min-width: 1414px){
  :root{ --space: clamp(
    0px,
    (84 * (1583px - 100vw)) / 169,
    84px
  ); }
  .grid{
    grid-template-columns:
      [full-start] minmax(0, 84px)
      [main-start] minmax(0, 1fr)
      [main-end]   minmax(0, 84px)
      [full-end];
  }
}

/* 1450px: zentrale Maxbreite 1300, keine Außen-Padding mehr */
@media (min-width: 1583px){
  :root{ --space: 0px; --max-w: 1400px; }
  .grid{
    grid-template-columns:
      [full-start] 1fr
      [main-start] minmax(0, var(--max-w))
      [main-end]   1fr
      [full-end];
  }
  /* Bei full-Abschnitten liegt das Padding im .inner; hier ist es 0 */
  .section.full > .inner{ padding-inline: 0; }
}