/* AthletIQ Pro GmbH — v1, 10. August 2026, Entwurf „Solo" */

@font-face{font-family:'Outfit';src:url('fonts/Outfit-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Outfit';src:url('fonts/Outfit-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Outfit';src:url('fonts/Outfit-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
:root {
  --ink:#111111; --body:#1b1d1e; --mid:#5c6063; --pale:#6e6e6e;
  --ghost:#8f9294; --ph:#7a7d7f; --rule:#dddddd;
  --teal:#4B8B84; --teal-d:#2C6E63; --teal-t:#E4F0EE;
  --page:#ffffff;
}

/* Nur die Rechtsseiten kennen einen dunklen Modus. Die Startseite ist
   ohnehin dunkel — dort gäbe es nichts umzudrehen. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#f4f5f5; --body:#e0e2e3; --mid:#a8acae; --pale:#8d9092;
    --ghost:#7a7d7f; --ph:#6d7072; --rule:#33383a;
    --teal-d:#7FB8B0;
    --teal-t:#1b2624;
    --page:#111111;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--body);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--teal); color: #ffffff; }

/* ---- Satzspiegel -------------------------------------------------------
   Eine Spalte, linksbündig, mittig im Fenster. 34rem halten die Zeile bei
   rund 70 Zeichen — darüber verliert das Auge beim Rücksprung die Zeile.
   Der Rand steht nicht fest, sondern wächst mit der Fensterbreite: 2rem auf
   kleinen Telefonen, 2,5rem ab etwa 445px. max() hält zusätzlich Abstand
   von randlosen Bildschirmkanten, wo das Gerät eine Sicherheitszone meldet.
   Ausdrücklich padding-left/right und nie die Kurzform padding — die setzte
   den Seitenrand andernorts wieder auf 0 zurück. */

.blatt {
  max-width: 34rem;
  margin: 0 auto;
  padding-left:  max(clamp(2rem, 9vw, 2.5rem), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(2rem, 9vw, 2.5rem), env(safe-area-inset-right, 0px));
}

/* ---- Logo --------------------------------------------------------------
   Das Zeichen nimmt über currentColor die Textfarbe an: weiß auf dem Foto,
   schwarz auf den Rechtsseiten. Nie Teal, nie Terracotta — Markenprofil. */

.logo { display: block; width: 100%; height: auto; }
.logo-voll { width: clamp(9.5rem, 30vw, 12.5rem); }
.logo-mittel { width: clamp(7.6rem, 24vw, 9.8rem); }
.logo-klein { width: clamp(5.4rem, 17vw, 6.6rem); }

/* ==== Startseite ========================================================
   Foto als Vollfläche, darüber ein Schleier, darauf weißer Satz. Das Foto
   ist bereits beim Erzeugen leicht abgedunkelt und im Kontrast genommen;
   der Schleier hier oben sorgt dafür, dass die Schrift auch dann trägt,
   wenn das Bild später gegen ein helleres getauscht wird. */

.start {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  color: #ffffff;
  background: #0d0f10;
}

.start .foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Der Ausschnitt sitzt links der Bildmitte. Dort liegt die ruhige Fläche
     der Aufnahme; die große Hantelscheibe rückt damit aus dem Satzspiegel
     nach rechts, statt hinter dem Text zu liegen. */
  object-position: 38% 52%;
  z-index: 0;
}

/* Die Startseite trägt keinen Fließtext, sondern eine Schlagzeile. Sie darf
   deshalb breiter stehen als die Rechtsseiten — 44rem sind der Platz, den
   die längere der beiden Zeilen einzeilig braucht. Die 34rem der
   Rechtsseiten sind eine Lesbarkeitsgrenze und bleiben unangetastet.
   Mitte und Fußzeile bekommen denselben Wert, sonst stünden ihre linken
   Kanten nicht übereinander. */
.start .blatt { max-width: 44rem; }

/* Der Schleier. Oben etwas leichter als unten, damit die Aufnahme oben noch
   Aufnahme bleibt und der Satz unten trotzdem ruhig steht. */
.start .schleier {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(10,12,13,0.58) 0%,
      rgba(10,12,13,0.62) 42%,
      rgba(10,12,13,0.84) 100%);
}

.start > .mitte,
.start > .fuss { position: relative; z-index: 2; }

.start .mitte {
  align-self: center;
  padding-top: 4rem;
  padding-bottom: 7vh;   /* optisch mittig liegt höher als rechnerisch */
}

.claim {
  margin: 2.5rem 0 0;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  /* Der mittlere Wert ist nicht frei gewählt: bei 4,6vw passte auf einem
     390px-Telefon „für Prävention und Personal Training." um zwei Zeichen
     nicht mehr in eine Zeile, und „Training." stand allein. */
  font-size: clamp(1.24rem, 4.3vw, 1.8rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
  color: #ffffff;
}

/* Die Markenhaltung. Zwei Sätze, getrennt durch „·" wie überall in der
   Marke. Auf schmalen Geräten reichte die Zeile nicht, und „gefühlt" stand
   allein in der zweiten — deshalb fällt unterhalb von 27rem der Punkt weg
   und jeder Satz bekommt seine eigene Zeile. Umbrochen wird damit nur dort,
   wo es beabsichtigt ist. */
.haltung {
  margin: 1.5rem 0 0;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(0.66rem, 2.5vw, 0.76rem);
  line-height: 1.75;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.74);
}
.haltung .teil { white-space: nowrap; }

@media (max-width: 27rem) {
  .haltung .punkt { display: none; }
  .haltung .teil { display: block; }
}

/* Der einzige Farbfleck der Startseite. Kein Trennstrich zwischen zwei
   Dingen, sondern eine Marke unter dem Satz. */
.takt {
  width: 34px; height: 3px;
  margin: 2.4rem 0 0;
  background: var(--teal);
}

.kontakt {
  margin: 2.4rem 0 0;
  font-size: 0.98rem;
  line-height: 1.85;
  color: rgba(255,255,255,0.82);
}
.kontakt a { color: #ffffff; text-decoration-color: rgba(255,255,255,0.42); }
.kontakt a:hover { text-decoration-color: var(--teal); }
.kontakt .anschrift { color: rgba(255,255,255,0.66); }

.start .fuss {
  border-top: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.66);
}
.start .fuss a { color: rgba(255,255,255,0.78); }
.start .fuss a:hover { text-decoration-color: var(--teal); }

/* ==== Rechtsseiten ====================================================== */

.rechtsseite { padding-top: 3.6rem; }

.kopf a { text-decoration: none; display: inline-block; color: var(--ink); }
.kopf a:hover { color: var(--teal-d); }

h1 {
  margin: 3.2rem 0 2.6rem;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(2rem, 7vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}

section { margin: 0 0 2.7rem; }

h2 {
  margin: 0 0 0.85rem;
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.185em;
  color: var(--mid);
}

p { margin: 0 0 0.95rem; }
p:last-child { margin-bottom: 0; }

.block { line-height: 1.72; }
.block .stark { font-weight: 500; color: var(--ink); }

/* Die Firmierung steht auch mitten im Text als Firmierung und nicht als
   Fließtext: eine Spur größer im Gewicht, leicht gesperrt, in Outfit. */
.firma-inline {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
}

ul { margin: 0 0 0.95rem; padding: 0; list-style: none; }
li { margin: 0 0 0.42rem; padding-left: 1.15rem; position: relative; }
/* Aufzählungszeichen bewusst grau, nicht teal. Das Teal hat auf dieser
   Website zwei Aufgaben — die Marke und die hervorgehobene Stelle, die
   Art. 21 Abs. 4 DSGVO verlangt. Käme es auch an jedem Listenpunkt vor,
   trüge die Hervorhebung nichts mehr. */
li::before {
  content: '';
  position: absolute; left: 0; top: 0.75em;
  width: 5px; height: 5px; background: var(--ph);
}

.ph { color: var(--ph); }

/* Art. 21 Abs. 4 DSGVO verlangt, dass auf das Widerspruchsrecht
   „in hervorgehobener Form" hingewiesen wird. Das ist der Kasten. */
.hervor {
  margin: 0;
  padding: 1.15rem 0 1.15rem 1.15rem;
  border-left: 3px solid var(--teal);
  color: var(--ink);
}
.hervor p:last-child { margin-bottom: 0; }

/* Ein leiser Hinweiskasten. Nur einmal im Einsatz — bei den
   Gesundheitsangaben in der Kontaktaufnahme. */
.notiz {
  margin: 0.2rem 0 0;
  padding: 1rem 1.15rem;
  background: var(--teal-t);
  font-size: 0.94rem;
  line-height: 1.7;
  color: var(--ink);
}
.notiz p:last-child { margin-bottom: 0; }

/* ---- Fußzeile ---------------------------------------------------------- */

.fuss {
  margin-top: 4.6rem;
  padding: 1.5rem 0 2.4rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--pale);
  letter-spacing: 0.015em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.35rem;
  justify-content: space-between;
}
.fuss .firma {
  font-family: 'Outfit', 'Inter', sans-serif;
  letter-spacing: 0.06em;
}
.fuss nav { display: flex; gap: 1.35rem; }
.fuss a { color: inherit; }

/* ---- Verweise ---------------------------------------------------------- */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--rule);
  transition: text-decoration-color .14s ease, color .14s ease;
}
a:hover { text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  text-decoration-color: var(--teal);
}

@media (max-width: 30rem) {
  body { font-size: 16px; }
  .fuss { flex-direction: column; }
  .fuss nav { gap: 1.1rem; }
  .start .mitte { padding-bottom: 4vh; }
}

@media print {
  .fuss { border-top: 1px solid #ccc; }
  a { text-decoration: none; }
  .start .foto, .start .schleier, .bildband { display: none; }
  .start { color: #000; background: #fff; min-height: 0; }
}