/* =========================================================
   CMG – Minimal CSS (clean)
   ========================================================= */

/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  /* Layout */
  --wrap: 70rem;
  --measure: 40rem;      /* Lesebreite (Text + Header-Kante) */
  --padding: 1.5rem;

  /* Typo */
  --lead: 1.35rem;
  --meta: .92rem;

  /* Colors */
  --color-black: #000;
  --color-white: #fff;
  --color-grey: #777;
  --color-light: #efefef;

  --color-text: var(--color-black);
  --color-text-grey: var(--color-grey);
  --color-background: var(--color-white);

  /* Fonts */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}


html{
  font-family: var(--font-family-sans);
  color: var(--color-text);
  background: var(--color-background);
}

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

a{ color: currentColor; text-decoration: none; }
strong, b{ font-weight: 600; }
small{ font-size: inherit; color: var(--color-text-grey); }

/* =========================================================
   Layout
   ========================================================= */

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

/* Optional: wenn du möchtest, dass Text + Header wirklich
   exakt dieselbe Lesekante haben, nutze measure. */
.cmg-measure{
  max-width: var(--measure);
}

/* Section: weniger „Hero-Luft“ */
.section{
  padding: 1rem 0 3rem;
}

/* =========================================================
   CMG Header (ultra-minimal)
   ========================================================= */

.cmg-header{
  margin-bottom: 1.5rem;  /* war 4rem -> zu viel */
}

.cmg-nav{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: baseline;
  justify-content: space-between;

  /* Kante/Lesebreite */
  max-width: var(--measure);
}

.cmg-brand{
  font-weight: 600;
  white-space: nowrap;
}

.cmg-links{
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
}

.cmg-links a{
  padding: .25rem 0;
}

.cmg-nav a[aria-current="page"]{
  text-decoration: underline;
}

/* Optional: „Schwelle“ unter Header (sehr leise) */
/*
.cmg-header{
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-light);
}
*/

/* =========================================================
   Typography / Content
   ========================================================= */

h1, h2, h3, h4, h5, h6{
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* Leitsatz: ruhig */
.cmg-lead{
  font-size: var(--lead);
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 1.75rem 0;
  letter-spacing: -0.01em;
}

/* Fließtext (Kirbytext) */
.text{
  max-width: var(--measure);
  line-height: 1.55;
}

.text p{ margin: 0 0 1.5rem; }
.text p:last-child{ margin-bottom: 0; }

.text a{ text-decoration: underline; }

/* Listen, falls mal gebraucht */
.text ul, .text ol{ margin: 0 0 1.5rem 1rem; }
.text ul > li{ list-style: disc; }
.text ol > li{ list-style: decimal; }

/* Inline code / pre (optional, aber sauber) */
.text code{
  font-family: var(--font-family-mono);
  background: var(--color-light);
  padding: 0 .35rem;
}

.text pre{
  margin: 2.5rem 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 1.25rem;
  overflow-x: auto;
}

.text pre code{
  background: none;
  padding: 0;
}

/* =========================================================
   Footer
   ========================================================= */

.footer{
  padding: 4rem 0 2rem;
  line-height: 1.5;
  color: var(--color-text-grey);
}

.footer p{ max-width: var(--measure); }

/* =========================================================
   Utility (nur wenn du sie wirklich nutzt)
   ========================================================= */

.bg-light{ background: var(--color-light); }
.color-grey{ color: var(--color-text-grey); }


.cmg-brand{
  font-size: 1.35rem;
   font-weight: 600;
  letter-spacing: -0.03em;
}

/* =========================================================
   Kirby-Zwischenüberschriften (### -> h3)
   ========================================================= */

.text h2,
.text h3{
  max-width: var(--measure);
  font-weight: 600;
  line-height: 1.35;
  margin: 2.25rem 0 .75rem;
}

/* H3 bewusst „ruhig“ (nicht wie H1) */
.text h3{
  font-size: 1rem;
  letter-spacing: .01em;
}

/* falls du h2 mal nutzt: minimal größer */
.text h2{
  font-size: 1.05rem;
}

/* erste Überschrift im Textblock ohne „Top-Luft“ */
.text h2:first-child,
.text h3:first-child{
  margin-top: 0;
}


@media (max-width: 40rem){
  .cmg-links{
    display: grid !important;
    grid-template-columns: repeat(3, max-content);
    column-gap: .75rem;
    row-gap: .35rem;
  }
  .nav1{ grid-column: 1; grid-row: 1; }
  .nav2{ grid-column: 2; grid-row: 1; }
  .nav3{ grid-column: 3; grid-row: 1; }
  .nav4{ grid-column: 1; grid-row: 2; }
  .nav5{ grid-column: 2; grid-row: 2; }
  .nav6{ grid-column: 3; grid-row: 2; }
}