/* equiden-logbuch.ch — ein Stylesheet. Die Seite für die Schweiz (26.09.2026): derselbe Aufbau wie equiden-logbuch.de,
   eigenes Gesicht: «Nebelmorgen». Vorne Toms Foto über die ganze Breite – der Ausritt in den Herbstnebel –, Titel und
   Knopf im Himmel. Darunter ruhig und streng: weisses Papier, eine Schrift (Source Sans 3, die des Buchs) in wenigen
   Grössen, alles linksbündig, viel Luft, und ein Schweizer Rot nur für das, was man anklickt, das Geschenk und einen
   kurzen Balken. Die Umschläge stehen gerade – keine Handschrift, nichts schief. Die Bilder macht ../../bilder/Bilder.java. */
/* Schriften von dieser Seite, nicht von Google: Die Seite verspricht «keine Cookies», und jeder Abruf bei Google Fonts
   schickt die IP-Adresse dorthin. Source Sans 3 (SIL Open Font License, assets/fonts/OFL-SourceSans3.txt), auf Latein
   verkleinert – darin stehen Umlaute, Akzente, «», – und das schmale geschützte Leerzeichen des Französischen. */
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/sourcesans3-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/sourcesans3-600-latin.woff2") format("woff2"); }

:root {
  --papier: #ffffff;
  --flaeche: #f3f3f3;                         /* Kästen: das Grau des Buchs, ganz hell */
  --text: #232323;                            /* neutral, wie die Schrift im Buch */
  --text-2: #5b5b5b;
  --linie: #d9d9d9;
  --linie-hell: #ebebeb;
  --rot: #c8102e;                             /* Schweizer Rot: Knöpfe, Geschenk, der Balken – sonst nirgends */
  --rot-dunkel: #9d0c23;
  --rot-hell: #fbecee;
  --font: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius: 3px;
  --schatten-papier: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .09);
  --edge: clamp(16px, 5vw, 64px);
  --measure: 62ch;
  --breite: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--text); font-family: var(--font); font-size: 18px; line-height: 1.55; text-wrap: pretty; overflow-x: clip; font-variant-numeric: lining-nums; }
h1, h2, h3 { font-weight: 600; line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -0.02em; max-width: 20ch; }
h2 { font-size: clamp(28px, 3.4vw, 40px); max-width: 22ch; }
h3 { font-size: 21px; letter-spacing: -0.005em; margin-bottom: var(--space-2); }
p, ul, ol { margin: 0 0 var(--space-4); max-width: var(--measure); }
ul, ol { padding-left: 1.2em; }
a { color: var(--text); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--rot); }
a:hover { color: var(--rot-dunkel); text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
figcaption { font-size: 15px; line-height: 1.45; margin-top: var(--space-3); color: var(--text-2); max-width: var(--measure); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
::selection { background: var(--rot-hell); }
code { font-size: 0.92em; }

/* — Knöpfe — */
.btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; font: inherit; font-weight: 600; font-size: 17px; line-height: 1.2; padding: 14px 24px; min-height: 50px; border-radius: var(--radius); border: 1px solid transparent; }
.btn-primary { background: var(--rot); color: #fff; }
.btn-primary:hover { background: var(--rot-dunkel); color: #fff; text-decoration: none; }
.nav .btn { font-size: 15px; padding: 10px 16px; min-height: 44px; }

/* — Kopf: weiss auf jeder Seite, auf der Startseite durchsichtig über dem Foto (body.ueber-bild) — */
header { border-bottom: 1px solid var(--linie-hell); background: var(--papier); position: relative; z-index: 5; }
.nav { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-3) var(--edge); position: relative; max-width: calc(var(--breite) + 2 * var(--edge)); margin: 0 auto; }
.nav-brand { font-weight: 600; font-size: clamp(18px, 4.6vw, 21px); line-height: 1.2; flex: 1 1 0; min-width: 0; color: inherit; text-decoration: none; letter-spacing: -0.01em; }
.nav-brand::before { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--rot); margin-right: 9px; vertical-align: 1px; }
.nav-brand:hover { color: inherit; text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: var(--space-6); }
.nav-links a { color: inherit; text-decoration: none; font-size: 16px; padding: 10px 0; }
.nav-links a:hover, .nav-links a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--rot); text-decoration-thickness: 2px; }
.nav-links a.btn:hover { text-decoration: none; }
/* Die Sprache: ein Aufklappmenü, ein <details> – geht auch ohne Skript; das Skript unten in jeder Seite schliesst es
   bei einem Klick daneben */
.sprachen { position: relative; }
.sprachen summary { list-style: none; cursor: pointer; font-size: 14px; letter-spacing: 0.04em; padding: 10px 12px; border-radius: var(--radius); border: 1px solid var(--linie); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.sprachen summary::-webkit-details-marker { display: none; }
.sprachen summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.sprachen[open] summary::after { transform: translateY(2px) rotate(225deg); }
.sprachen summary:hover { background: rgba(0, 0, 0, .05); }
.sprachen ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; list-style: none; margin: 0; padding: 4px; min-width: 150px; background: #fff; color: var(--text); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.sprachen li a { display: block; padding: 9px 12px; border-radius: 2px; color: inherit; text-decoration: none; font-size: 15px; }
.sprachen li a:hover { background: var(--flaeche); }
.sprachen li a[aria-current] { font-weight: 600; color: var(--rot-dunkel); }
.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--linie); background: transparent; border-radius: var(--radius); color: inherit; cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle:hover { background: rgba(0, 0, 0, .05); }
.nav-toggle svg { display: block; }
.nav-toggle .x { display: none; }
.nav.open .nav-toggle .x { display: block; }
.nav.open .nav-toggle .bars { display: none; }
@media (max-width: 820px) {
  .nav { flex-wrap: wrap; gap: var(--space-2); }
  .nav-toggle { display: inline-flex; order: 3; }
  .sprachen { order: 2; }
  .nav > .btn { display: none; }
  .nav-links { display: none; order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) 0 var(--space-3); }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 14px 0; font-size: 19px; border-bottom: 1px solid var(--linie-hell); }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-links .btn { display: inline-flex; margin-top: var(--space-3); justify-content: center; }
}
@media (min-width: 821px) { .nav-links .btn { display: none; } }

/* Auf der Startseite liegt der Kopf über dem Himmel des Fotos: weisse Schrift, kein Rand. Klappt das Menü auf dem
   Handy auf, bekommt es ein weisses Blatt, sonst stünde weisse Schrift auf dem Nebel. */
body.ueber-bild header { position: absolute; top: 0; left: 0; right: 0; background: transparent; border-bottom: 0; color: #fff; }
body.ueber-bild .sprachen summary, body.ueber-bild .nav-toggle { border-color: rgba(255, 255, 255, .55); }
body.ueber-bild .sprachen summary:hover, body.ueber-bild .nav-toggle:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 820px) {
  body.ueber-bild .nav.open { background: var(--papier); color: var(--text); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
  body.ueber-bild .nav.open .nav-toggle, body.ueber-bild .nav.open .sprachen summary { border-color: var(--linie); }
}

/* — Seite — */
main { padding: 0 var(--edge); max-width: calc(var(--breite) + 2 * var(--edge)); margin: 0 auto; }
.section { padding: clamp(44px, 7vw, 80px) 0; border-top: 1px solid var(--linie-hell); }
.section:first-child, .band + .section, .vorne + .section { border-top: 0; }
.lede { font-size: 20px; line-height: 1.5; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.note { color: var(--text-2); font-size: 16px; margin-top: var(--space-6); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6) var(--space-8); }
.grid-3 p { font-size: 16px; margin: 0; }
.papier { background: #fff; box-shadow: var(--schatten-papier); }
.foto { border-radius: 2px; }
/* Zwei Spalten: Text und Bild, auf dem Handy untereinander */
.zweispaltig { display: grid; gap: var(--space-8) var(--space-12); align-items: center; }
@media (min-width: 900px) {
  .zweispaltig { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .zweispaltig.bild-links > figure { order: -1; }
  .zweispaltig.schmal { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .zweispaltig.schmal.bild-links { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .zweispaltig.breit-bild { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* — Vorne: das Foto über die ganze Breite (ausserhalb von main), Titel und Knopf im Himmel. Oben dunkler, damit Kopf
     und Titel lesbar bleiben; unten bleibt das Bild, wie es ist. — */
.vorne { position: relative; min-height: min(92svh, 900px); color: #fff; display: flex; align-items: flex-start; overflow: hidden; background: #3b5f86; }
.vorne picture, .vorne > picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.vorne picture img { object-fit: cover; object-position: 30% 70%; }
/* Oben und links dunkler – dort stehen Kopf, Titel und Text –, rechts unten bleibt das Foto, wie es ist */
.vorne::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 22, 40, .5) 0%, rgba(8, 22, 40, .2) 40%, rgba(8, 22, 40, 0) 65%),
              linear-gradient(90deg, rgba(8, 22, 40, .42) 0%, rgba(8, 22, 40, .18) 42%, rgba(8, 22, 40, 0) 60%); }
.vorne-text { position: relative; z-index: 1; width: 100%; max-width: calc(var(--breite) + 2 * var(--edge)); margin: 0 auto; padding: clamp(110px, 16vh, 170px) var(--edge) var(--space-16); }
.vorne h1 { color: #fff; font-size: clamp(38px, 6.4vw, 78px); line-height: 1.0; letter-spacing: -0.025em; max-width: 13ch; margin: 0 0 var(--space-6); text-shadow: 0 1px 24px rgba(8, 22, 40, .25); }
.vorne h1::after { content: ""; display: block; width: 72px; height: 6px; background: var(--rot); margin-top: var(--space-6); }
.vorne .lede { color: #fff; max-width: 44ch; font-size: clamp(18px, 1.6vw, 21px); text-shadow: 0 1px 14px rgba(8, 22, 40, .35); }
.vorne .cta a:not(.btn) { color: #fff; text-decoration-color: rgba(255, 255, 255, .7); }
@media (max-width: 700px) {
  .vorne { min-height: 88svh; }
  .vorne picture img { object-position: 30% 50%; }
  .vorne-text { padding-top: 104px; }
}

/* Das Geschenk für neue Konten (geschenk=promo): gleich unter dem Foto, ein Kasten mit rotem Rand */
.gift { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; background: var(--rot-hell); border-left: 4px solid var(--rot); padding: var(--space-3) var(--space-4); max-width: var(--measure); margin: 0; font-size: 17px; }
.gift span { flex: 1 1 18rem; }
.gift strong { color: var(--rot-dunkel); white-space: nowrap; }
.nach-vorne { padding-top: var(--space-8); }

/* Die drei Umschläge, gerade nebeneinander, darunter wer darin steht */
.buecher { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2.4vw, 32px); }
.buecher img { width: 100%; background: #fff; box-shadow: var(--schatten-papier); }
.buecher .wer { display: block; margin-top: var(--space-3); font-size: 15px; line-height: 1.35; color: var(--text-2); }
.buecher .wer b { display: block; color: var(--text); font-weight: 600; font-size: 17px; }

/* Ein Foto über die ganze Breite, als Atempause zwischen den Abschnitten */
.band { margin: 0 calc(50% - 50vw); position: relative; }   /* aus main heraus, über die ganze Breite */
.band img { width: 100%; height: clamp(260px, 48vw, 620px); object-fit: cover; object-position: 50% 62%; }
.band figcaption { max-width: calc(var(--breite) + 2 * var(--edge)); margin: var(--space-3) auto 0; padding: 0 var(--edge); }

/* Die Schritte sind eine Folge – darum Nummern, auf einer Linie wie eine Zeile im Buch */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6) var(--space-8); max-width: none; }
.steps li { border-top: 2px solid var(--text); padding-top: var(--space-3); }
.steps .num { font-weight: 600; font-size: 15px; color: var(--rot); margin-bottom: var(--space-2); font-variant-numeric: tabular-nums; }
.steps p { font-size: 16px; margin: 0; }

.trust { list-style: none; padding: 0; max-width: var(--measure); }
.trust li { padding: var(--space-3) 0 var(--space-3) 30px; border-bottom: 1px solid var(--linie-hell); position: relative; }
.trust li:last-child { border-bottom: 0; }
.trust li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 14px; height: 8px; border-left: 2px solid var(--rot); border-bottom: 2px solid var(--rot); transform: rotate(-45deg); }
.big { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.3; margin: 0 0 var(--space-4); max-width: 34ch; }
.kosten { display: grid; gap: var(--space-8) var(--space-12); align-items: start; }
@media (min-width: 900px) { .kosten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Blick ins Buch: eine Tafel nach der anderen */
.plates { display: grid; gap: var(--space-12); }
.plates figure { max-width: 900px; }
.plate-seite { max-width: 460px !important; }
.plates h2 { margin: 0 0 var(--space-4); }

/* — Preise — */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); max-width: 860px; }
.plan { background: var(--flaeche); padding: var(--space-6); border-top: 3px solid var(--linie); }
.plan:last-child { border-top-color: var(--rot); }
.plan h3 { margin-bottom: var(--space-1); }
.plan .betrag { font-weight: 600; font-size: 30px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.plan p { font-size: 15px; margin: var(--space-2) 0 0; color: var(--text-2); }
.table { width: 100%; max-width: 720px; border-collapse: collapse; font-size: 17px; font-variant-numeric: tabular-nums; }
.table th { text-align: left; font-size: 14px; color: var(--text-2); padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--linie); font-weight: 600; }
.table td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--linie-hell); }
.table td:not(:last-child) { white-space: nowrap; }
.table .zahl { text-align: right; }
@media (max-width: 560px) { .table { font-size: 15px; } .table th, .table td { padding-right: var(--space-2); } .table .reicht { display: none; } }
.kurz h2 { font-size: 22px; letter-spacing: 0; margin: var(--space-8) 0 var(--space-2); }
.kurz h2:first-child { margin-top: 0; }

/* — Drucken — */
.settings { list-style: none; padding: 0; max-width: var(--measure); }
.settings li { display: grid; grid-template-columns: 9ch 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--linie-hell); }
.settings li:last-child { border-bottom: 0; }
.settings b { font-weight: 600; }
@media (max-width: 420px) { .settings li { grid-template-columns: 1fr; gap: 0; } }

/* — Fuss — */
footer { border-top: 1px solid var(--linie); margin-top: var(--space-12); padding: var(--space-8) var(--edge); font-size: 15px; color: var(--text-2); }
footer .inner { max-width: var(--breite); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; }
footer a { color: var(--text); text-decoration: none; padding: 8px 0; }
footer a:hover { text-decoration: underline; text-decoration-color: var(--rot); }
footer .brand { margin-right: auto; }
footer .brand a { text-decoration: underline; text-decoration-color: var(--rot); }
footer .fotos { flex-basis: 100%; font-size: 13px; margin: var(--space-2) 0 0; max-width: none; }
footer .fotos a { padding: 0; text-decoration: underline; color: inherit; }

/* Das Geschenk nur, solange horselogbook.com Plätze meldet – assets/geschenk.js setzt die Klasse sonst */
html.ohne-geschenk [data-geschenk] { display: none !important; }

/* Besucherstatistik für diesen Browser abschalten (Impressum, assets/statistik.js) */
#statistik { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
#statistik button { font: inherit; font-size: 15px; color: inherit; background: transparent; cursor: pointer; padding: 10px 16px; min-height: 44px; border-radius: var(--radius); border: 1px solid var(--linie); }
#statistik button:hover { background: var(--flaeche); }

@media (prefers-reduced-motion: no-preference) {
  .btn, .nav-links a, .sprachen summary { transition: background-color .12s ease, color .12s ease; }
}