/* friends4horses.de - eine Datei, keine fremden Schriften oder Skripte.
   Aufbau wie FEZ Trainer und FW-Wachbuch (deploy/fw-friends4-de), damit
   die Produkte von Friends4 als Familie zu erkennen sind. Farben bleiben
   Heritage wie in der App (Friends4horses-iOS/.../Darstellung/Farben.swift):
   wo FEZ Rot und Blau setzt, steht Waldgruen; Gold nur Akzent und Linie,
   nie Flaeche; statt Weiss und Grau wechseln Elfenbein und Papier.
   Immer hell, wie die App und wie Friends4: eine Seite, die nachts dunkel
   wird, waehrend die App daneben hell bleibt, saehe nach zwei Marken aus.
   EINE Schrift, die des Systems wie bei FEZ: die eng gesetzten grossen
   Titel tragen nur mit ihr, eine Serife daneben waere eine zweite
   Handschrift - und sie laedt nichts nach.
   Sparsam mit Kommentaren hier: Seite, Stil, Favicon und Logo zusammen
   duerfen 80 KB nicht ueberschreiten (friends4horsesWebseiteTempo.test.js). */
:root {
  color-scheme: light;
  --papier: #f6f2ea; --karte: #fbf9f4; --tinte: #1b1f1d; --leise: #3f4542;
  --wald: #1f3d2b; --gold: #b08d57; --link: #1f3d2b; --linie: #ddd5c6;
  /* Lesetext auf Waldgruen, 8,2:1. */
  --auf-wald: #d9d6cc;
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Der Schimmer im Kopf ragt seitlich hinaus. clip, nicht hidden: hidden
   machte body zum Scroll-Behaelter, und die Leiste klebte nicht mehr. */
html, body { overflow-x: clip; }
body { margin: 0; background: var(--karte); color: var(--tinte); font-family: var(--schrift); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { color: var(--tinte); text-wrap: balance; }
a { color: var(--link); text-underline-offset: 2px; }
/* Fokus fuer alle, die mit Tastatur oder Schaltersteuerung unterwegs sind.
   Waldgruen, nicht Gold: Gold hat auf Papier nur 2,8:1, ein Fokusrahmen
   braucht 3:1 (WCAG 1.4.11) - sonst sucht man ihn auf der Seite. */
a:focus-visible { outline: 3px solid var(--wald); outline-offset: 3px; }
/* Ohne Hoehe bis zum Laden waere der Platz des Logos erst 0 und spraenge
   dann - der Text darunter rutschte unter dem Daumen weg (Layout-Sprung).
   width/height im HTML geben das Seitenverhaeltnis vor, height:auto haelt es. */
img { max-width: 100%; height: auto; }
/* Sonst landen Sprungziele unter der Leiste. */
[id] { scroll-margin-top: 68px; }
.rahmen { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }

.leiste { position: sticky; top: 0; z-index: 20; background: rgba(251, 249, 244, .82); border-bottom: 1px solid rgba(27, 31, 29, .08); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.leiste-innen { display: flex; align-items: center; gap: 28px; height: 52px; }
.marke { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: var(--tinte); font-size: 1rem; font-weight: 650; letter-spacing: -.02em; text-decoration: none; }
.marke img { width: 28px; height: 28px; border-radius: 50%; background: var(--papier); }
.leiste-link { color: var(--leise); font-size: .8rem; text-decoration: none; }
.leiste-link:hover { color: var(--tinte); }
.leiste-knopf { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 15px; border-radius: 999px; background: var(--wald); color: var(--papier); font-size: .78rem; font-weight: 550; text-decoration: none; }
.leiste-knopf:hover { background: #17301f; }

/* Schimmer wie AppBackgroundView der Friends4-App (Theme.swift). */
header.kopf { position: relative; isolation: isolate; padding: clamp(44px, 7vw, 88px) 0 clamp(56px, 8vw, 96px); text-align: center; }
header.kopf::before { position: absolute; z-index: -1; top: 46%; left: 50%; width: min(880px, 100vw); height: 560px; border-radius: 50%; background: radial-gradient(circle at 40% 45%, rgba(31, 61, 43, .11), transparent 60%), radial-gradient(circle at 64% 58%, rgba(176, 141, 87, .16), transparent 58%); content: ""; transform: translate(-50%, -50%); filter: blur(8px); }
/* Goldene Linie wie die Kicker-Linie auf friends4.de - Akzent, keine Flaeche. */
header.kopf::after { content: ""; display: block; width: 56px; height: 2px; margin: 48px auto 0; background: var(--gold); }
header.kopf img { width: min(210px, 56vw); height: auto; filter: drop-shadow(0 18px 30px rgba(27, 31, 29, .14)); }
h1 { margin: 18px auto 0; max-width: 940px; font-size: clamp(2.5rem, 10.5vw, 6.6rem); font-weight: 720; letter-spacing: -.055em; line-height: .95; }
/* Suchbegriff als zweite Zeile im selben h1 (store/seo-analyse.md): die
   wichtigste Ueberschrift traegt, wonach gesucht wird, ohne Stichwortliste. */
.h1-zusatz { display: block; margin-top: 10px; color: var(--wald); font-size: clamp(1.55rem, 5vw, 3.3rem); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.unterzeile { max-width: 700px; margin: 26px auto 0; color: var(--leise); font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.4; letter-spacing: -.015em; text-wrap: balance; }
.hinweis { display: inline-block; max-width: 100%; margin: 26px 0 0; padding: 8px 15px; border: 1px solid var(--gold); border-radius: 999px; background: rgba(251, 249, 244, .8); color: var(--leise); font-size: .88rem; text-align: center; }
.hinweis::before { display: inline-block; margin-right: 9px; vertical-align: .1em; width: 7px; height: 7px; border-radius: 50%; background: var(--wald); box-shadow: 0 0 0 4px rgba(31, 61, 43, .12); content: ""; }
/* Eigener Text statt Apples Badge (warum: index.html). Papier auf
   Waldgruen hat 10,7:1. */
.laden { margin: 32px 0 6px; }
.store-knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border-radius: 999px; background: var(--wald); color: var(--papier); font-size: 1.05rem; font-weight: 600; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.store-knopf:hover { background: #17301f; transform: scale(1.025); }
.store-knopf:focus-visible { outline-offset: 4px; }
.leise { color: var(--leise); font-size: .92rem; }

/* Band ueber die ganze Breite ohne Huelle - das Markup, auf dem die Tests
   der Auffindbarkeit liegen, bleibt so, wie es ist. */
.band, .raster { background: var(--papier); box-shadow: 0 0 0 100vmax var(--papier); clip-path: inset(0 -100vmax); }

.raster { counter-reset: karte; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; padding: clamp(64px, 9vw, 112px) 0; }
.karte { counter-increment: karte; border: 1px solid rgba(27, 31, 29, .06); border-radius: 28px; background: var(--karte); padding: 30px 28px 32px; }
.karte::before { display: block; margin-bottom: 18px; color: var(--wald); font-family: var(--mono); font-size: .76rem; font-weight: 700; letter-spacing: .08em; content: counter(karte, decimal-leading-zero); content: counter(karte, decimal-leading-zero) / ""; }
.karte h2 { margin: 0 0 8px; font-size: clamp(1.3rem, 2.2vw, 1.55rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.12; }
.karte p { margin: 0; color: var(--leise); }

.abschnitt { padding: clamp(64px, 9vw, 112px) 0; }
.abschnitt > h2 { margin: 0 auto 36px; max-width: 820px; font-size: clamp(2.1rem, 5.6vw, 4rem); font-weight: 720; letter-spacing: -.05em; line-height: 1.04; text-align: center; }
.felder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.feld { border: 1px solid rgba(27, 31, 29, .06); border-radius: 32px; background: var(--karte); padding: clamp(28px, 4vw, 46px); }
.feld h2 { margin: 0 0 14px; font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 720; letter-spacing: -.045em; line-height: 1.06; }
.feld p { margin: 0; max-width: 620px; color: var(--leise); font-size: 1.04rem; }
.feld.dunkel { grid-column: 1 / -1; border: 0; background: var(--wald); }
.feld.dunkel::before { display: block; width: 44px; height: 2px; margin-bottom: 26px; background: var(--gold); content: ""; }
.feld.dunkel h2 { color: var(--papier); }
.feld.dunkel p { color: var(--auf-wald); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.feld.dunkel a { color: var(--papier); }
/* Waldgruener Rahmen auf Waldgruen waere unsichtbar. */
.feld.dunkel a:focus-visible { outline-color: var(--papier); }

.fragen > h3, .fragen > p { max-width: 760px; margin-inline: auto; }
.fragen > h3 { margin-top: 0; margin-bottom: 8px; padding-top: 24px; border-top: 1px solid var(--linie); font-size: 1.18rem; font-weight: 650; letter-spacing: -.02em; }
.fragen > p { margin-top: 0; margin-bottom: 26px; color: var(--leise); }

/* Brotkrumen und Themenliste als Tap-Ziele mit 44 px wie die Fusslinks. */
.pfad { color: var(--leise); font-size: .88rem; }
.pfad a { display: inline-flex; align-items: center; min-height: 44px; }
.themen { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; max-width: 980px; margin: 8px auto 0; padding: 0; }
.themen li { display: flex; }
.themen a { flex: 1; display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 16px 22px; border: 1px solid rgba(27, 31, 29, .06); border-radius: 20px; background: var(--karte); color: var(--tinte); font-weight: 600; letter-spacing: -.01em; line-height: 1.35; text-decoration: none; }
.themen a::after { margin-left: auto; color: var(--wald); font-size: 1.4em; line-height: 1; content: "›"; content: "›" / ""; }
.themen a:hover { border-color: var(--wald); }
.band .themen a { background: var(--karte); }
main.text .themen a { background: var(--papier); }

main.text { max-width: 760px; margin: 0 auto; padding: 0 20px 80px; }
.seitenkopf { padding: clamp(40px, 7vw, 80px) 0 clamp(36px, 5vw, 56px); text-align: center; }
main.text h1 { margin-top: 6px; font-size: clamp(2.1rem, 6.4vw, 3.8rem); letter-spacing: -.05em; line-height: 1.04; }
.kern { max-width: 680px; margin: 22px auto 0; color: var(--leise); font-size: clamp(1.08rem, 2vw, 1.25rem); line-height: 1.5; }
main.text h2 { margin: 56px 0 12px; font-size: clamp(1.55rem, 3.4vw, 2.1rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.12; }
main.text h3 { margin: 26px 0 6px; font-size: 1.12rem; font-weight: 650; letter-spacing: -.015em; }
main.text li { margin-bottom: 6px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
th { color: var(--leise); font-weight: 600; }
/* Lange deutsche Woerter (Transpondernummer, Kapillarfuellzeit) in einer
   schmalen Tabellenspalte schoben die Seite auf dem Handy seitwaerts. */
td, th { overflow-wrap: break-word; hyphens: auto; }

/* Breite per Innenabstand: die Fusslinks stehen ohne Huelle im footer. */
footer { padding: 18px max(20px, calc((100% - 1120px) / 2)) 30px; border-top: 1px solid rgba(27, 31, 29, .1); color: var(--leise); font-size: .8rem; }
/* Fusslinks waren 23 Pixel hohe Zeilen mit 16 Pixel Abstand - mit dem
   Daumen traf man den Nachbarn. 44 x 44 ist Apples Mass fuer Tap-Ziele. */
footer nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -10px; }
footer a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 10px; color: var(--leise); text-decoration: none; }
footer a:hover { color: var(--tinte); text-decoration: underline; }
.fuss-zeile { margin: 6px 0 0; }

@media (max-width: 720px) {
  .rahmen { width: calc(100% - 28px); }
  /* Wie bei FEZ: auf dem Handy nur Name und Knopf. */
  .leiste-link { display: none; }
  .leiste-innen { gap: 12px; }
  .felder { grid-template-columns: 1fr; }
  .karte { border-radius: 24px; }
  .feld { border-radius: 26px; }
  .hinweis { border-radius: 18px; }
  main.text { padding: 0 16px 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .store-knopf:hover { transform: none; }
}