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

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

@font-face{
  font-family: "PT Sans";
  src: url("/assets/fonts/ptsans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "PT Sans";
  src: url("/assets/fonts/ptsans-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


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

  /* Typo */
  --lead: 1.55rem;
  --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: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --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: 2.25rem; /* statt 1.5rem */
}


.section > .text{
  margin-top: .75rem;
}



.cmg-nav{
  display: flex;
  align-items: flex-start;   /* WICHTIG */
  justify-content: space-between;
}


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

.cmg-brand{
  display: flex;
  align-items: center;
  white-space: normal;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.03em;
}


.cmg-logo{
  width: auto !important;
  height: 6rem;  /* dein „deutlich größer“ */
  max-width: none;
  display: block;
}


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

.cmg-links a{
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .85rem;
}


.cmg-nav a[aria-current="page"]{
  border-bottom: 1px solid currentColor;
}


/* 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 */
main > .cmg-lead{
  font-size: 1.35rem;     /* kleiner als der Home-Claim */
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1.75rem 0;
}


/* Fließtext (Kirbytext) */
.text{
  max-width: var(--measure);
  line-height: 1.65;
  font-size: 1.11rem;
}


.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);
  font-size: var(--meta);
}
.footer{
  margin-top: 4rem;
}


.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); }



.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}




/* =========================================================
   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.25rem;
}

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

@media (max-width: 40rem){

  .cmg-nav{
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .nav5{
    display: none;
  }

  .cmg-links{
    display: flex;
    flex-wrap: nowrap;
    gap: .75rem;
    white-space: nowrap;
  }

  .cmg-links a{
    font-size: .75rem;
    letter-spacing: .05em;
  }

  .cmg-logo{
    height: 2.8rem;
  }
}