/* ============================================================
   Coachyourlife · base.css
   Reset, Grundtypografie, Layoutprimitive. Mobile First.
   ============================================================ */

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

html{
  font-size:100%;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

body{
  position:relative;
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.7;
  color:var(--text);
  background:var(--leinen);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{flex:1;}

/* Typografie */
h1,h2,h3,h4{
  font-weight:500;
  color:var(--ink);
  line-height:1.12;
  letter-spacing:-.01em;
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);line-height:1.05;}
h2{font-size:var(--fs-h2);}
h3{font-size:var(--fs-h3);}

p{max-width:var(--measure);}
.lead{font-size:var(--fs-lead);line-height:1.5;font-weight:300;max-width:var(--measure);color:var(--text-soft);}
.small{font-size:var(--fs-small);color:var(--text-mute);}

.kicker{
  display:flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-small);
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--acc-deep);
}
.kicker::before{
  content:"";display:inline-block;width:2.25rem;height:var(--stroke);
  background:var(--acc);flex:none;
}

a{color:var(--acc-deep);text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-1) var(--ease);}
a:hover{color:var(--acc);}

ul,ol{padding-left:1.2em;max-width:var(--measure);}
li{margin-block:var(--sp-2);}
li::marker{color:var(--acc);}

img{max-width:100%;height:auto;display:block;}
strong{font-weight:500;color:var(--ink);}

hr{border:0;border-top:var(--stroke) solid var(--line);margin-block:var(--sp-6);}

/* Layoutprimitive */
.wrap{padding-inline:var(--gutter);max-width:55rem;margin-inline:auto;width:100%;}
/* Einspaltig bleibt immer 55rem. Grids (am Wrap oder darin) sowie Kopf und Fuß dürfen breiter. */
.wrap.grid,
.wrap:has(.grid),
.wrap.cc-hero__grid,
.wrap.cc-header__bar,
.wrap.cc-footer__inner{max-width:75rem;}
/* Die Angebotsboxen sind auf 66rem ausgelegt. Ohne diese Zeile begrenzt das
   Wrap sie auf 55rem, die 66rem in components.css liefen ins Leere und die
   rechte Spalte wurde so schmal, dass lange Knopftexte umbrachen. */
.wrap:has(.cc-offers),
.wrap:has(.cc-offer--feature){max-width:66rem;}
/* Inhalt liegt über der Serpentinen-Wegelinie, deren Sektionshintergrund darunter */
main > section > .wrap{position:relative;z-index:2;}
.section{padding-block:var(--section-y);}

.grid{display:grid;gap:clamp(2rem,4vw,3.5rem);}
@media (min-width:48rem){ .grid-2{grid-template-columns:1fr 1fr;} }
@media (min-width:64rem){ .grid-3{grid-template-columns:repeat(3,1fr);} }

/* Fokus sichtbar, überall: feine Linie, passend zum Linien-System */
:focus-visible{outline:var(--stroke) solid var(--acc-deep);outline-offset:3px;border-radius:var(--radius);}

/* Auf dunklen und farbigen Flächen ist --acc-deep als Fokusrahmen unsichtbar,
   auf .section--dark liegt der Kontrast bei 1,0 zu 1. Dort Fokus in Weiss,
   Kontrast 9,6 zu 1. */
.section--dark :focus-visible,
.section--accent :focus-visible,
.cc-footer :focus-visible,
.nojs-foot :focus-visible{outline-color:#fff;}

/* Sprungziele nicht unter dem klebenden Header parken.
   WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum). */
[id]{scroll-margin-top:6.5rem;}

/* Skip Link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--acc-deep);color:#fff;
  padding:var(--sp-3) var(--sp-5);border-radius:0 0 var(--radius-lg) 0;
}
.skip-link:focus{left:0;color:#fff;}

/* Scroll Reveal (motion.js setzt is-in).
   Grundzustand ist sichtbar. Erst wenn motion.js wirklich läuft, setzt es
   js-motion auf das html Element und blendet die Blöcke aus. Sonst wäre der
   halbe Seiteninhalt unsichtbar, falls components.js lädt und die Klasse
   no-js entfernt, motion.js aber scheitert. */
.reveal{opacity:1;transform:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);}
.js-motion .reveal{opacity:0;transform:translateY(12px);}
.js-motion .reveal.is-in{opacity:1;transform:none;}

/* Reduced Motion: alles ruhigstellen */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}

/* Ohne JavaScript trotzdem alles lesbar */
.no-js .reveal{opacity:1;transform:none;}
/* Blöcke, die nur mit JavaScript sinnvoll sind, weil ihr Inhalt aus
   Komponenten besteht. Ohne JavaScript blieben sonst leere Zeilen stehen.
   Der zugehörige noscript Block liefert den Inhalt dann direkt. */
.no-js .nojs-hide{display:none;}