/* Che – classical horse equipment. Richtung: Musterbuch der Sattlerei.
   Farben gemessen an den Sattelfotos 2025, siehe .impeccable/surfaces/index-html.md */

@font-face{font-family:"Libre Caslon Display";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/libre-caslon-display-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Caslon Display";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/libre-caslon-display-latin-ext-400-normal.woff2) format("woff2");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/libre-franklin-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/libre-franklin-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --wand:#F4F6F5; --weiss:#fff; --linie:#C9D0CD;
  --nubuk:#1B1F2B; --nubuk2:#2A2F3D; --nubuk3:#3A3F52;
  --cognac:#A06043; --cognac-knopf:#94563A; --cognac-hell:#AD6B4D; --tabak:#5F3929;
  --faden:#F2F0EA; --faden2:#D6D3CB; --krone:#FFCC00;
  --text2:#3B4240;
  --serif:"Libre Caslon Display","Iowan Old Style",Georgia,serif;
  --sans:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --rand:56px; --max:1328px; --abstand:clamp(72px,9vw,128px);
  /* Werte, die sich im Regler-Panel verschieben lassen */
  --einstieg-h1:clamp(46px,6.4vw,92px);
  --einstieg-text-unten:0px;
  --einstieg-foto-x:50%;
  --einstieg-foto-y:8%;
  --einstieg-leiste:150px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-bottom:96px;scroll-padding-top:16px}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--nubuk);background:var(--wand);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
::selection{background:var(--cognac);color:var(--faden)}
:focus-visible{outline:3px solid var(--krone);outline-offset:3px;border-radius:2px}
input,select,textarea,button{font:inherit;color:inherit}
input,textarea{caret-color:var(--cognac)}
h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance;line-height:1.04}
h1{font-size:var(--einstieg-h1);line-height:.98}
h2{font-size:clamp(36px,4.4vw,64px)}
h3{font-size:clamp(26px,2.4vw,34px)}
p{text-wrap:pretty}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--krone);color:var(--nubuk);padding:10px 16px;font-weight:600}
.skip:focus{top:12px}
.innen{max-width:calc(var(--max) + 2 * var(--rand));margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.lead{font-size:19px;line-height:1.6;max-width:56ch}
.klein{font-size:15px}
tbody,dl,dd{margin:0}

/* ---------- Naht ---------- */
.naht{border-top:2px dashed var(--faden)}
.hell .naht,.naht.hell{border-top-color:var(--linie)}
.kante{position:relative}
.kante>.naht{position:absolute;left:0;right:0;top:16px;pointer-events:none}
.kante>.naht.unten{top:auto;bottom:16px}

/* ---------- Knöpfe ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--cognac-knopf);color:#fff;
  padding:15px 26px;font-weight:600;font-size:16px;line-height:1.2;border-radius:4px;text-decoration:none;border:0;cursor:pointer;
  outline:1.5px dashed rgba(242,240,234,.75);outline-offset:-6px;
  transition:background .2s ease-out,transform .2s ease-out;min-height:48px}
.knopf:hover{background:#7F4730}
.knopf:active{transform:translateY(1px)}
.knopf:focus-visible{outline:3px solid var(--krone);outline-offset:3px}
.knopf[disabled]{opacity:.6;cursor:progress}
.knopf.klein{padding:12px 20px;font-size:14px;min-height:44px}
.knopf.hellknopf{background:var(--faden);color:var(--nubuk);outline-color:rgba(27,31,43,.4)}
.knopf.hellknopf:hover{background:#fff}
.leise{font-weight:500;text-underline-offset:.3em}
.leise:hover{text-decoration-thickness:2px}
.knopfreihe{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}

/* ---------- Kopf ---------- */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--rand);position:relative;z-index:20}
.kopf .logo{background:#fff;padding:6px 12px;border-radius:3px;flex:none}
.kopf .logo img{height:46px;width:auto}
.kopf nav ul{display:flex;gap:34px;list-style:none;padding:0;font-size:15px}
.kopf nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.kopf nav a:hover,.kopf nav a[aria-current=page]{border-bottom-color:currentColor}
.kopf .menue{display:none}
.kopf.auf-foto{position:absolute;top:0;left:0;right:0;color:#fff}
.kopf.hell-kopf{background:var(--wand);color:var(--nubuk)}
.kopf.hell-kopf nav a:hover,.kopf.hell-kopf nav a[aria-current=page]{border-bottom-color:var(--cognac)}
.kopf-ende{display:flex;align-items:center;gap:18px}

/* ---------- Einstieg ---------- */
.einstieg{position:relative;min-height:100vh;min-height:100svh;background:var(--nubuk);display:flex;flex-direction:column;justify-content:flex-end}
.einstieg .foto{position:absolute;inset:0}
.einstieg .foto img{width:100%;height:100%;object-fit:cover;object-position:var(--einstieg-foto-x) var(--einstieg-foto-y)}
.einstieg .foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,31,43,.62),rgba(27,31,43,0) 22%,rgba(27,31,43,0) 34%,rgba(27,31,43,.78) 62%,rgba(27,31,43,.88))}
.einstieg .text{position:relative;align-self:flex-start;margin-bottom:var(--einstieg-text-unten);z-index:2;color:#fff;width:min(100%,1100px);
  padding:170px 200px 80px var(--rand);background:radial-gradient(ellipse 68% 62% at 28% 64%,rgba(27,31,43,.86) 0,rgba(27,31,43,.86) 60%,rgba(27,31,43,0) 100%)}
.einstieg .text p{font-size:19px;line-height:1.5;margin:24px 0 30px;max-width:54ch}
.einstieg .knopfreihe{margin-top:0}
.einstieg .leise{color:#fff}
.leiste{position:relative;min-height:var(--einstieg-leiste);padding:22px 0;background:var(--wand);z-index:2;
  display:grid;grid-template-columns:minmax(220px,1.1fr) repeat(4,1fr);gap:20px;align-items:stretch;
  padding-left:max(var(--rand),calc((100% - var(--max)) / 2));padding-right:max(var(--rand),calc((100% - var(--max)) / 2))}
.leiste .naht{position:absolute;left:0;right:0;top:-1px;border-top-color:var(--faden)}
.leiste .titel{padding:0;font-family:var(--serif);font-size:30px;align-self:center}
.probe{margin:0;border-radius:4px;padding:18px 20px;color:var(--faden);font-size:15px;line-height:1.4;text-decoration:none;display:block;transition:transform .25s ease-out,filter .25s ease-out}
a.probe:hover{transform:translateY(-3px);filter:brightness(1.12)}
.probe b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;margin-bottom:6px}
.p1{background:var(--nubuk)}.p2{background:var(--cognac);color:#fff}.p3{background:var(--tabak)}.p4{background:#E3E7E5;color:var(--nubuk)}

/* ---------- Flächen ---------- */
.flaeche{padding:var(--abstand) 0;position:relative}
.nubuk{background:var(--nubuk);color:var(--faden)}
.tabak{background:var(--tabak);color:var(--faden)}
.leder-cognac{background:var(--cognac);color:#fff}
.weiss{background:#fff}
.nubuk .lead,.tabak .lead{color:#E7E4DC}
.kopfblock h2{max-width:24ch}
.kopfblock .lead{margin-top:26px}
.hell .lead,.wandfl .lead{color:var(--text2)}

/* ---------- Raster ---------- */
.raster2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
fieldset{border:0;padding:0;margin:40px 0 0;min-width:0}
legend{font-weight:600;font-size:16px;margin-bottom:14px;padding:0}

/* ---------- Was im Sattel steckt ---------- */
.raster-bild{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.bild-gross{position:relative}
.bild-gross img{width:100%;aspect-ratio:1/1.08;object-fit:cover;border-radius:4px}
.bild-gross img{position:relative;z-index:1}
.merkmale{list-style:none;padding:0;margin:40px 0 0;counter-reset:m}
.merkmale li{counter-increment:m;display:grid;grid-template-columns:72px 1fr;align-items:center;gap:8px 16px;padding:18px 0;
  border-top:2px dashed rgba(242,240,234,.4);font-size:19px;line-height:1.4}
.merkmale li:last-child{border-bottom:2px dashed rgba(242,240,234,.4)}
.merkmale li::before{content:counter(m);font-family:var(--serif);font-size:48px;line-height:1;color:var(--faden2)}
.hinweis{margin-top:28px;font-size:18px}

/* ---------- Tafeln ---------- */
.tafeln{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.tafeln.vier{grid-template-columns:repeat(4,1fr)}
.tafel{background:#fff;border-radius:4px;overflow:hidden;display:flex;flex-direction:column}
.tafel .bild{aspect-ratio:4/5;background:#fff}
.bild img{width:100%;height:100%;object-fit:cover}
.tafel .karte{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1;border-top:2px dashed var(--linie)}
.tafel h3{font-size:32px}
.daten{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14.5px;line-height:1.45;color:#3a4252;margin-bottom:10px;padding-top:14px;border-top:2px dashed var(--linie)}
.daten dt{font-weight:600;color:var(--nubuk)}
.tafel .knopf{margin-top:auto;align-self:flex-start}
.sattel-kopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px 72px;align-items:start}
.reitweisen{display:block;font-size:16px}
.reitweisen div{border-top:2px dashed var(--linie);padding:14px 0;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6px 24px;align-items:baseline}
.reitweisen div:last-child{border-bottom:2px dashed var(--linie)}
.reitweisen dt{font-family:var(--serif);font-size:22px;line-height:1.15}
.reitweisen dd{color:var(--text2);line-height:1.5}

/* ---------- Ablauf als Strecke ---------- */
.strecke{position:relative;list-style:none;padding:0;margin:64px 0 0;counter-reset:s;display:grid;grid-template-columns:repeat(5,1fr);gap:0 28px}
.strecke::before,.strecke .fortschritt{content:"";position:absolute;left:0;right:0;top:28px;border-top:2px dashed var(--linie)}
.strecke .fortschritt{border-top:3px solid var(--cognac);right:auto;width:0;transition:width .2s linear}
.strecke li{counter-increment:s;position:relative;padding-top:84px}
.strecke li::before{content:counter(s);position:absolute;left:0;top:0;width:58px;height:58px;border-radius:50%;background:var(--wand);
  border:2px solid var(--cognac);font-family:var(--serif);font-size:30px;display:grid;place-items:center;line-height:1;color:var(--tabak)}
.strecke li.da::before{background:var(--cognac-knopf);color:#fff;border-color:var(--cognac-knopf);transition:background .3s ease-out,color .3s ease-out}
.strecke h3{font-size:26px;margin-bottom:10px}
.strecke p{font-size:16px;line-height:1.55;color:var(--text2)}
.wissen{position:relative;margin-top:72px;background:var(--nubuk);color:var(--faden);border-radius:4px;padding:44px 48px;
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:32px 56px;align-items:start}
.wissen ul{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px 48px}
.wissen li{font-size:17px;line-height:1.5;padding-top:14px;border-top:2px dashed rgba(242,240,234,.4)}
.wissen li b{font-weight:600}
.wissen h3{font-size:34px}

/* ---------- Unterwegs ---------- */
.unterwegs .innen{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:center}
.unterwegs h2{max-width:18ch}
.unterwegs p{font-size:19px;line-height:1.6;max-width:54ch}
.unterwegs .bild img{aspect-ratio:3/4;border-radius:4px;object-fit:cover;object-position:center 30%;max-height:600px;width:100%}
.unterwegs .bild{position:relative}
.unterwegs .bild img{position:relative}

/* ---------- Video und Veranstaltung ---------- */
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.platte{border-radius:4px;padding:44px 44px 48px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:#fff}
.platte.dunkel{background:var(--nubuk);color:var(--faden)}
.platte h2{font-size:clamp(32px,3.4vw,46px)}
.platte p{font-size:17px;max-width:48ch}
.platte .knopfreihe{margin-top:auto;padding-top:16px}
.platte .datum{font-family:var(--serif);font-size:26px;line-height:1.2}
.abspiel{width:72px;height:72px}
.platte.dunkel .leise{color:var(--faden)}

/* ---------- Über Evelyn ---------- */
.evelyn{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:center}
.evelyn .bild{position:relative}
.evelyn .bild img{aspect-ratio:1/1;border-radius:4px;object-fit:cover;filter:sepia(.1)}
.evelyn .bild img{position:relative}
blockquote{font-family:var(--serif);font-size:clamp(26px,2.6vw,36px);line-height:1.2;margin:28px 0 0;max-width:30ch;text-wrap:balance}

/* ---------- Fragen ---------- */
.fragen{max-width:900px;margin-top:48px}
.fragen details{border-top:2px dashed var(--linie)}
.fragen details:last-child{border-bottom:2px dashed var(--linie)}
.fragen summary{list-style:none;cursor:pointer;padding:22px 56px 22px 0;position:relative;font-family:var(--serif);font-size:clamp(22px,2vw,28px);line-height:1.2}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:2px solid var(--cognac-knopf);border-bottom:2px solid var(--cognac-knopf);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease-out}
.fragen details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.fragen summary:hover{color:var(--cognac-knopf)}
.fragen details p{padding:0 56px 26px 0;font-size:17px;color:var(--text2);max-width:62ch}

/* ---------- Formular / Anfrage ---------- */
.anfrage .raster2{gap:72px}
.anfrage .raster2>div:first-child{position:sticky;top:32px;align-self:start}
.kontaktwege{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.anfrage .lead{margin-top:24px}
.kontaktwege .knopf{min-width:220px}
.kontaktzeilen{margin-top:36px;font-size:16px;line-height:1.7;color:#E7E4DC}
.kontaktzeilen a{color:#fff}
.form-kopf{font-size:clamp(28px,2.6vw,36px);margin-bottom:22px}
.formular{display:grid;gap:18px}
.field{display:grid;gap:6px;min-width:0}
.field label,.field .lab{font-weight:600;font-size:15px}
.field .opt{font-weight:400;color:var(--faden2)}
.field input,.field select,.field textarea{width:100%;background:var(--nubuk2);color:var(--faden);border:1.5px solid rgba(242,240,234,.35);border-radius:4px;padding:13px 14px;font-size:16px;min-height:48px}
.field textarea{min-height:120px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faden) 50%),linear-gradient(135deg,var(--faden) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(242,240,234,.7)}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--krone);outline-offset:1px;border-color:transparent}
.field input::placeholder,.field textarea::placeholder{color:#A8ABB5}
.hilfe{font-size:14.5px;color:var(--faden2);line-height:1.45}
.field-error{display:none;font-size:14px;font-weight:600;color:#FFB4A6}
.field.has-error .field-error{display:block}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#FFB4A6;border-width:2px}
.zeile2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label.haken{font-weight:400}
.haken{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.5}
.haken input{width:22px;height:22px;min-height:0;margin-top:2px;accent-color:var(--cognac)}
.haken a{color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:15px;min-height:1.4em}
.form-status.is-error{color:#FFB4A6;font-weight:600}
.form-status a{color:#fff}
#form-wrap.is-sent form{display:none}
#form-success{background:var(--nubuk2);border-radius:4px;padding:36px}
#form-success h3{font-size:34px;margin-bottom:12px}
#form-success[hidden]{display:none}

/* ---------- Fuß ---------- */
.fuss{background:var(--nubuk);color:var(--faden);padding:72px 0 48px;position:relative}
.fuss .naht{position:absolute;left:0;right:0;top:0}
.fuss .innen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);gap:48px}
.fuss .logo{display:inline-block;background:#fff;padding:6px 12px;border-radius:3px}
.fuss .logo img{height:50px;width:auto}
.fuss p,.fuss address{font-style:normal;font-size:15.5px;line-height:1.7;color:#E2DFD7}
.fuss a{color:#fff}
.fuss ul{list-style:none;padding:0;display:grid;gap:8px;font-size:15.5px}
.fuss .slogan{font-family:var(--serif);font-size:28px;color:var(--faden);margin-top:24px}
.fuss .klein-zeile{max-width:var(--max);margin:44px auto 0;padding:24px var(--rand) 0;border-top:2px dashed rgba(242,240,234,.3);font-size:13.5px;color:var(--faden2)}

/* ---------- Unterseiten ---------- */
.sub{--abstand:clamp(56px,6.5vw,88px)}
.seitenkopf{padding:clamp(40px,5vw,72px) 0 calc(var(--abstand) * .8)}
.kopf-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.kopfbild img{width:100%;aspect-ratio:5/4;object-fit:cover;object-position:center 35%;border-radius:4px}
.kopfbild.frei img{aspect-ratio:1/1;object-fit:cover;object-position:center 45%}
.zwei-texte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px}
.zwei-texte h2{font-size:clamp(30px,3.2vw,44px)}
.seitenkopf h1{font-size:clamp(40px,5.2vw,76px);max-width:20ch}
.seitenkopf .lead{margin-top:28px;color:var(--text2)}
.seitenkopf.nubuk .lead{color:#E7E4DC}
.modell{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 24px;align-items:center;margin-top:72px}
.modell:first-of-type{margin-top:48px}
.modell .bild{grid-column:1 / span 5;aspect-ratio:4/5;border-radius:4px;overflow:hidden;background:#fff}
.modell .bild img{border-radius:4px}
.modell .inhalt{grid-column:7 / span 6}
.modell.umgekehrt .bild{grid-column:8 / span 5;grid-row:1}
.modell.umgekehrt .inhalt{grid-column:1 / span 6;grid-row:1}
.modell h3{font-size:clamp(34px,3.4vw,48px);margin-bottom:16px}
.modell p{font-size:17px;max-width:54ch;margin-bottom:18px}
.modell .daten{margin:20px 0 26px;max-width:54ch}
.nubuk .daten,.tabak .daten{color:#E7E4DC;border-top-color:rgba(242,240,234,.4)}.nubuk .daten dt,.tabak .daten dt{color:var(--faden)}
.nubuk .modell p,.tabak .modell p,.leder-cognac .modell p{color:inherit}
.tabak .knopf,.nubuk .knopf{outline-color:rgba(242,240,234,.75)}
.zubehoer-raster{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;margin-top:40px}
.zubehoer-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 88%;border-radius:4px}
.zubehoer{list-style:none;padding:0;margin:0}
.zubehoer li{padding:18px 0;border-top:2px dashed var(--linie);font-size:18px}
.zubehoer li b{font-weight:600}
.zusatzbild{margin-top:56px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.zusatzbild .bild{grid-column:1 / span 4;border-radius:4px;overflow:hidden}
.zusatzbild .bild img{aspect-ratio:2/3;object-fit:cover;border-radius:4px}
.zusatzbild p{grid-column:6 / span 6;font-size:19px}
.schritte-liste{list-style:none;padding:0;counter-reset:z;margin-top:44px;max-width:760px}
.schritte-liste li{counter-increment:z;display:grid;grid-template-columns:72px 1fr;gap:16px;padding:20px 0;border-top:2px dashed rgba(242,240,234,.4);font-size:19px;line-height:1.5}
.schritte-liste li::before{content:counter(z);font-family:var(--serif);font-size:48px;line-height:1;color:var(--faden2)}
.schritte-liste li:last-child{border-bottom:2px dashed rgba(242,240,234,.4)}
.flyer{max-width:420px}
.flyer img{border-radius:4px;box-shadow:0 14px 36px rgba(27,31,43,.28)}
.termin{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start;margin-top:40px}
.termin-daten{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;margin:26px 0 8px;font-size:18px;max-width:50ch}
.termin-daten dt{font-weight:600}
.partner{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:48px;list-style:none;padding:0}
.partner li{background:#fff;border-radius:4px;padding:28px;display:flex;flex-direction:column;gap:16px}
.partner img{height:110px;width:auto;max-width:100%;object-fit:contain;object-position:left}
.partner strong{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2}
.partner span{font-size:15px;color:var(--text2)}
.zweispalt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.fliess p+p{margin-top:1em}
.fliess{font-size:18px;max-width:54ch}
.rechtstext h2{font-size:30px;margin:44px 0 12px}
.rechtstext p,.rechtstext address{font-style:normal;max-width:70ch;margin-bottom:12px}

/* ---------- Handy-Leiste ---------- */
.handy{display:none}

@media (max-width:1180px){
  .tafeln.vier{grid-template-columns:repeat(2,1fr)}
  .strecke{grid-template-columns:1fr;gap:0}
  .strecke::before,.strecke .fortschritt{left:28px;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--linie)}
  .strecke::before{width:0;height:auto}
  .strecke .fortschritt{width:0!important;height:0;border-left:3px solid var(--cognac);transition:height .2s linear}
  .strecke li{padding:0 0 40px 90px;min-height:96px}
  .strecke li:last-child{padding-bottom:0}
  .wissen{grid-template-columns:1fr}
}
@media (max-width:980px){
  .kopf nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--nubuk);color:var(--faden);padding:12px var(--rand) 28px}
  .kopf nav.offen{display:block}
  .kopf nav ul{flex-direction:column;gap:0}
  .kopf nav a{display:block;padding:16px 0;font-size:19px;border-bottom:2px dashed rgba(242,240,234,.3)}
  .kopf nav a:hover,.kopf nav a[aria-current=page]{border-bottom-color:rgba(242,240,234,.3);color:var(--krone)}
  .kopf .menue{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:transparent;border:1.5px solid currentColor;border-radius:4px;cursor:pointer}
  .raster2,.raster-bild,.evelyn,.zweispalt,.termin,.unterwegs .innen,.kopf-grid,.sattel-kopf,.zwei-texte{grid-template-columns:1fr;gap:40px}
  .anfrage .raster2>div:first-child{position:static}
  .kopfbild{max-width:520px}
  :root{--einstieg-leiste:150px}
  .leiste{grid-template-columns:repeat(2,1fr);gap:8px;padding:14px var(--rand)}
  .leiste .titel{display:none}
  .probe{padding:14px 12px}
  .probe span{font-size:14px;line-height:1.35}
  .probe b{font-size:21px;line-height:1.1;margin:0 0 4px}
  .zwei{grid-template-columns:1fr}
  .fuss .innen{grid-template-columns:1fr 1fr}
  .partner{grid-template-columns:1fr}
  .reitweisen{grid-template-columns:repeat(2,1fr)}
  .tafeln{grid-template-columns:repeat(2,1fr)}
  .modell{display:block}
  .modell .bild{max-width:480px;margin-bottom:28px}
  .zubehoer-raster{grid-template-columns:1fr;gap:32px}
  .zubehoer-bild{max-width:420px}
  .zusatzbild{display:block}.zusatzbild .bild{max-width:300px;margin-bottom:24px}
}
@media (max-width:760px){
  :root{--rand:22px;--einstieg-leiste:150px;--abstand:72px}
  .kopf-ende>.knopf{display:none}
  .termin-daten{grid-template-columns:1fr;gap:2px}.termin-daten dd{margin-bottom:12px}
  body{font-size:16.5px;padding-bottom:76px}
  .kopf{padding:14px var(--rand)}
  .kopf .logo img{height:38px}
  /* Handy: Foto oben frei unter dem Kopf, Text darunter auf Nubuk, damit der Sattel sichtbar bleibt */
  .einstieg{min-height:0;padding-top:70px;display:block}
  .einstieg .foto{position:relative;inset:auto;height:clamp(260px,78vw,420px)}
  .einstieg .foto::after{display:none}
  .einstieg .text{padding:30px var(--rand) 30px;background:var(--nubuk)}
  .einstieg .text p{font-size:17px;margin:18px 0 24px}
  .einstieg .leise{display:none}
  .einstieg .foto img{object-position:62% 40%}
  .leiste{grid-template-columns:repeat(2,1fr);gap:8px;padding:14px var(--rand)}
  .leiste .titel{display:none}
  .probe{padding:12px 12px 14px}
  .probe span{font-size:13.5px;line-height:1.35}
  .probe b{font-size:20px;line-height:1.1;margin:0 0 4px}
  .tafeln,.tafeln.vier{grid-template-columns:1fr}
  .wissen{padding:32px 24px}.wissen ul{grid-template-columns:1fr}
  .platte{padding:32px 26px 36px}
  .reitweisen div{grid-template-columns:1fr}
  .zeile2{grid-template-columns:1fr}
  .fuss .innen{grid-template-columns:1fr}
  .merkmale li{grid-template-columns:52px 1fr;font-size:18px}
  .merkmale li::before,.schritte-liste li::before{font-size:38px}
  .schritte-liste li{grid-template-columns:52px 1fr}
  .handy{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--nubuk);
    padding:10px 10px calc(10px + env(safe-area-inset-bottom));gap:10px;border-top:2px dashed var(--faden)}
  .handy .knopf{padding:12px 10px}
}
/* ---------- Knopf nach oben ---------- */
.nach-oben{position:fixed;z-index:45;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));
  width:52px;height:52px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--nubuk);color:var(--faden);outline:1.5px dashed rgba(242,240,234,.7);outline-offset:-6px;
  box-shadow:0 12px 28px -12px rgba(27,31,43,.65);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),background .2s ease-out,visibility 0s .25s}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:none;
  transition:opacity .25s ease,transform .25s cubic-bezier(.2,.8,.2,1),background .2s ease-out}
.nach-oben svg{width:22px;height:22px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.nach-oben:hover{background:var(--cognac-knopf)}
.nach-oben:hover svg{transform:translateY(-2px)}
.nach-oben:focus-visible{outline:3px solid var(--krone);outline-offset:3px}
@media (max-width:760px){
  .nach-oben{width:48px;height:48px;right:14px;bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media print{.nach-oben{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
.rechtstext .offen{background:#FFF4C2;border-left:4px solid #FFCC00;padding:10px 14px}
.rechtstext h2{scroll-margin-top:90px}

/* ---------- Ergänzungen 07.11.2026 ---------- */
.leiste .leder-hinweis{grid-column:1 / -1;font-size:14px;line-height:1.5;color:var(--text2);max-width:none;margin:2px 0 0}
.bild,.kopfbild{position:relative}
.sline{position:absolute;top:4%;left:4%;width:24%;max-width:130px;z-index:2;pointer-events:none}
.bild .sline img,.kopfbild .sline img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:0}
.neu-marke{display:inline-block;background:var(--krone);color:var(--nubuk);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:3px;margin-bottom:14px}
.foto-klein{max-width:360px;margin-top:28px}
.foto-klein img{border-radius:4px;width:100%}
.bild-gross.matte img{aspect-ratio:auto;object-fit:contain;background:#fff;padding:24px}
.rechtstext h3{font-size:24px;margin:32px 0 10px}
.rechtstext ul{max-width:70ch;margin:0 0 14px;padding-left:1.2em}
.rechtstext li{margin-bottom:6px}
@media (max-width:1240px) and (min-width:981px){.kopf nav ul{gap:22px;font-size:14.5px}}
.kopfbild.mit-sline img{object-fit:contain;padding:15% 0 0 13%;background:var(--wand)}
.kopfbild.mit-sline .sline{top:2%;left:1%;width:21%}
.tafel .neu-marke{align-self:flex-start;margin-bottom:0}
.leiste .probe b{margin-bottom:0}
.neu-marke.ecke{position:absolute;top:14px;right:14px;margin:0;z-index:2}