/* TIL Sport Landingpage. Gestaltung nach trading-ist-liebe.de (vermessen 2026-10-02):
   hell, Montserrat, Akzentwort in DM Serif Display kursiv, Kicker in Geist Mono,
   eckige Karten mit heller Linie, runde Knoepfe, hellgraue Fusszeile.
   Gruen als Text immer in der dunklen Stufe (--akzent-text), sonst zu wenig Kontrast. */
@font-face { font-family: "Montserrat"; src: url("schriften/Montserrat-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("schriften/Montserrat-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "DM Serif Display"; src: url("schriften/DMSerifDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("schriften/GeistMono-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }

:root {
  --akzent: #00BC7D;        /* Linien, Fokus, Hover-Rahmen; nie als Text */
  --akzent-rand: #5EE9B5;   /* Kartenrahmen beim Hover */
  --akzent-text: #007A55;   /* Links, Kicker, aktive Navigation (5,5:1 auf Weiss) */
  --akzent-tief: #006045;
  --akzent-hell: #ECFDF5;
  --schrift: #101828;       /* Ueberschriften */
  --text: #364153;          /* Fliesstext */
  --grau: #4A5565;          /* Nebentext */
  --grau-hell: #6A7282;     /* Bildunterschriften, Pfad (4,8:1 auf Weiss) */
  --linie: #E5E7EB;
  --strich: #171717;        /* Linie unter dem Kopf, ueber dem Fuss */
  --flaeche: #F9FAFB;
  --papier: #FFFFFF;
  --knopf: #000000;
  --knopf-hover: #1E2939;
  --breite: 1280px;
  --sans: "Montserrat", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --rund: 999px;
  --dauer: 150ms;
  --test-flaeche: #FFF3CD; --test-text: #6B4E00;  /* nur Testdaten, nie live */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--akzent-text); transition: color var(--dauer) ease-out; }
a:hover { color: var(--akzent-tief); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }

.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }

/* Kopf */
.kopf { border-bottom: 1px solid var(--strich); background: var(--papier); position: sticky; top: 0; z-index: 10; }
.kopf .rahmen { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; flex-wrap: wrap; }
.marke { font-weight: 600; color: var(--schrift); text-decoration: none; font-size: 20px; letter-spacing: -.01em; }
.marke span { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--akzent-text); font-size: 24px; }
.marke:hover { color: var(--schrift); }
.nav { display: flex; gap: 24px; flex-wrap: wrap; }
.nav a { color: var(--strich); text-decoration: none; font-size: 14px; }
.nav a:hover { color: var(--akzent-text); }
.nav a.aktiv { color: var(--akzent-text); font-weight: 600; }

/* Typografie */
/* Lange Woerter (Schulterdrueckmaschine) trennen statt ueber den Rand laufen. */
h1, h2, h3, .kachel strong, .treffer-titel { color: var(--schrift); font-weight: 600; overflow-wrap: break-word; hyphens: auto; }
h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 16px; }
h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; letter-spacing: -.015em; margin: 48px 0 16px; }
h3 { font-size: 20px; line-height: 1.4; margin: 32px 0 8px; }
.kicker {
  font-family: var(--mono); font-weight: 600; color: var(--akzent-text);
  text-transform: uppercase; letter-spacing: .2em; font-size: 12px; line-height: 1.4; margin: 48px 0 12px;
}
.lead { font-size: 18px; line-height: 1.6; max-width: 680px; color: var(--text); }
.pfad { font-size: 14px; color: var(--grau-hell); margin: 24px 0 0; }
.pfad a { color: var(--grau-hell); }
.pfad a:hover { color: var(--akzent-text); }

/* Start: Einstieg mit hellem Verlauf ueber die volle Breite (border-image ragt
   ohne seitliches Scrollen ueber den Rahmen hinaus). */
.held {
  padding: 80px 0 64px;
  border-image: linear-gradient(to bottom right, var(--akzent-hell), var(--papier) 50%, var(--akzent-hell)) fill 0 / 0 / 0 100vw;
}
.held h1 { font-size: clamp(36px, 6vw, 64px); max-width: 880px; }
.held .kicker { margin-top: 0; }
.suchform { display: flex; gap: 8px; max-width: 640px; margin-top: 32px; }
.suchform input, .suchseite input {
  flex: 1; min-width: 0; font: inherit; padding: 12px 20px; background: var(--papier);
  border: 1px solid var(--linie); border-radius: var(--rund); color: var(--schrift);
  transition: border-color var(--dauer) ease-out;
}
.suchform input:focus, .suchseite input:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }
.knopf {
  display: inline-block; background: var(--knopf); color: var(--papier); border: 1px solid var(--knopf); border-radius: var(--rund);
  padding: 12px 24px; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; cursor: pointer; text-decoration: none;
  transition: background-color var(--dauer) ease-out, border-color var(--dauer) ease-out;
}
.knopf:hover { background: var(--knopf-hover); border-color: var(--knopf-hover); color: var(--papier); }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 16px 0; }
.kachel {
  display: block; padding: 24px; border: 1px solid var(--linie); border-radius: 0;
  text-decoration: none; color: var(--text); background: var(--papier);
  transition: border-color var(--dauer) ease-out;
}
.kachel:hover { border-color: var(--akzent-rand); color: var(--text); }
.kachel strong { display: block; font-size: 17px; line-height: 1.4; }
.kachel small { color: var(--grau-hell); font-size: 14px; }
.kachel .bild { aspect-ratio: 4 / 3; overflow: hidden; background: var(--flaeche); margin-bottom: 16px; }
.kachel .bild img { width: 100%; height: 100%; object-fit: contain; }

.pill {
  display: inline-block; background: var(--akzent-hell); color: var(--akzent-text); border-radius: var(--rund);
  padding: 4px 12px; font-size: 13px; font-weight: 600; text-decoration: none; margin: 0 8px 8px 0;
}

/* Artikel und Uebung */
.inhalt { max-width: 720px; }
.inhalt p:not([class]) { margin: 0 0 16px; }  /* Kicker und Lead behalten ihre eigenen Abstaende */
.quellen { font-size: 14px; border-top: 1px solid var(--linie); margin-top: 48px; padding-top: 8px; }
.quellen li { margin-bottom: 8px; }
.stand { color: var(--grau-hell); font-size: 14px; }

.uebung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.uebung .bildfeld { position: sticky; top: 92px; }
.platzhalter {
  aspect-ratio: 4 / 3; border: 1px dashed var(--linie); display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--grau-hell); background: var(--flaeche); text-align: center; padding: 16px;
}
.uebung ol, .uebung ul { padding-left: 24px; }
.uebung li { margin-bottom: 8px; }
.hinweis { background: var(--akzent-hell); border-left: 2px solid var(--akzent); padding: 16px 20px; color: var(--schrift); }
.alternative { border: 1px solid var(--linie); padding: 16px 20px; margin-bottom: 12px; }
.alternative strong { color: var(--schrift); }

/* Suche */
.suchseite { display: flex; margin: 24px 0; max-width: 640px; }
.treffer { display: block; padding: 16px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.treffer:hover .treffer-titel { color: var(--akzent-text); }
.treffer-art { display: block; font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent-text); }
.treffer-titel { display: block; font-size: 18px; transition: color var(--dauer) ease-out; }
.treffer-kurz { display: block; color: var(--text); font-size: 15px; }
.leer { color: var(--grau-hell); }

/* Fuss */
.fuss { background: var(--flaeche); border-top: 1px solid var(--strich); margin-top: 80px; padding: 40px 0 48px; color: var(--grau); font-size: 14px; }

@media (max-width: 760px) {
  .rahmen { padding: 0 16px; }
  .uebung { grid-template-columns: 1fr; gap: 24px; }
  .uebung .bildfeld { position: static; }
  .kopf .rahmen { gap: 8px 16px; min-height: 0; padding-top: 12px; padding-bottom: 12px; }
  .nav { gap: 16px; }
  .held { padding: 48px 0 40px; }
}

/* Einstiege nach Problem */
.einstieg { border-width: 2px; }
.einstieg strong { font-size: 18px; }

/* Trainingsplaene */
.planfilter { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.planfilter label {
  display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--grau);
}
.planfilter select {
  font: inherit; font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none;
  padding: 8px 16px; border: 1px solid var(--linie); border-radius: var(--rund); background: var(--papier); color: var(--schrift); min-width: 160px;
}
.planfilter select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-hell); }
.plankarte[hidden] { display: none; }
.pdfplan strong a { color: inherit; text-decoration: none; }
.pdfplan strong a:hover { color: var(--akzent-text); }
.pdfplan .kurz { margin: 8px 0; font-size: 15px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.tag { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--rund); padding: 2px 12px; font-size: 13px; color: var(--text); }
.pdfknoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.pdfknoepfe .knopf { padding: 8px 16px; font-size: 14px; }
.knopf.hell { background: var(--papier); color: var(--strich); border: 1px solid var(--linie); }
.knopf.hell:hover { background: var(--papier); color: var(--strich); border-color: var(--akzent); }
.pdfansicht { display: block; width: 100%; height: 80vh; margin: 24px 0; border: 1px solid var(--linie); }
@media (max-width: 760px) { .pdfansicht { display: none; } }
.fakten { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 8px; }
.fakten li { background: var(--flaeche); border: 1px solid var(--linie); padding: 8px 16px; font-size: 15px; color: var(--schrift); }
.fakten strong { display: block; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--grau); text-transform: uppercase; letter-spacing: .12em; }
.tabelle { overflow-x: auto; }
table.plan { width: 100%; border-collapse: collapse; font-size: 15px; }
table.plan th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); border-bottom: 1px solid var(--strich); padding: 8px 12px; }
table.plan td { border-bottom: 1px solid var(--linie); padding: 12px; vertical-align: top; }
table.plan td:first-child { width: 2em; color: var(--grau-hell); }

/* Testdaten deutlich zeigen */
.testband { background: var(--test-flaeche); color: var(--test-text); text-align: center; font-weight: 600; font-size: 14px; padding: 8px 16px; }
.testmarke { display: inline-block; background: var(--test-flaeche); color: var(--test-text); border-radius: var(--rund); padding: 2px 8px; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.testhinweis { background: var(--test-flaeche); color: var(--test-text); padding: 12px 16px; font-weight: 600; }

/* Rueckmeldung und Frage */
.rueckmeldung { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 40px 0 12px; color: var(--schrift); font-weight: 600; }
.rueckmeldung button {
  font-size: 20px; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--rund); padding: 4px 16px; cursor: pointer;
  transition: border-color var(--dauer) ease-out;
}
.rueckmeldung button:hover:not(:disabled) { border-color: var(--akzent); }
.rueckmeldung button:disabled { opacity: .5; cursor: default; }
.rueckmeldung .danke { font-weight: 400; color: var(--grau-hell); }
.frage { background: var(--flaeche); border: 1px solid var(--linie); padding: 16px 20px; margin: 32px 0; color: var(--schrift); }
.einstieg.folgt { border-style: dashed; background: var(--flaeche); }
.einstieg.folgt strong { color: var(--grau-hell); }

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