/* ypc1000.de — Golf-Eleganz trifft Robotik. Statisch, selbst gehostete Schriften (OFL). */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("assets/fonts/instrument-serif-latin-400-normal.woff2?v=5eb09b5ac0") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url("assets/fonts/instrument-serif-latin-400-italic.woff2?v=5a51946dff") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("assets/fonts/manrope-latin-wght-normal.woff2?v=a30ddcd349") format("woff2");
}

:root {
  color-scheme: light;
  --papier: #fbfaf6;
  --papier-2: #f3f1ea;
  --tinte: #10201a;
  --grau: #52615a;
  --linie: #dfe3dc;
  --gruen: #13663f;
  --gruen-tief: #0b4029;
  --gruen-nacht: #082e1e;
  --gruen-hell: #e7f0e8;
  --minze: #8af0be;
  --messing: #c9a45c;
  --creme: #f3ebd8;
  --flagge: #d9462b;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rand: clamp(16px, 5vw, 64px);
  --breite: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 1.0625rem/1.65 var(--sans);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--gruen); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gruen-tief); }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -0.01em; margin: 0; }
h1 em, h2 em { font-style: italic; font-weight: 400; color: var(--gruen); }
p { margin: 0; }

.vorrat { position: absolute; width: 0; height: 0; overflow: hidden; }
.sprung { position: absolute; left: 16px; top: -60px; z-index: 20; background: var(--gruen-tief); color: #fff; padding: 10px 16px; border-radius: 999px; }
.sprung:focus { top: 12px; color: #fff; }

/* Kopf */
.kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--rand);
  background: rgba(251, 250, 246, 0.86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
}
.marke { display: inline-flex; align-items: center; gap: 10px; color: var(--tinte); text-decoration: none; }
.marke-zeichen { display: block; flex: none; }
.marke-wort { font: italic 400 2rem/1 var(--serif); letter-spacing: -0.01em; }
.navi { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 32px); font-size: 0.9375rem; font-weight: 550; }
.navi a { color: var(--tinte); text-decoration: none; }
.navi a:hover { color: var(--gruen); }
.navi .navi-kontakt { padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--gruen); color: var(--gruen); }
.navi .navi-kontakt:hover { background: var(--gruen); color: #fff; }

/* Bühne */
.buehne { position: relative; padding-top: clamp(28px, 5vw, 64px); }
.buehne-text { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); position: relative; z-index: 2; }
.vorzeile {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gruen-tief);
  padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--gruen-hell);
}
.status-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 0 rgba(19, 102, 63, 0.45); animation: puls 2.4s ease-out infinite; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(19, 102, 63, 0.45); } 70%, 100% { box-shadow: 0 0 0 9px rgba(19, 102, 63, 0); } }
h1 { font-size: clamp(3.6rem, 13vw, 8.6rem); margin: 22px 0 0; font-weight: 400; letter-spacing: -0.02em; line-height: 0.92; }
.lead { max-width: 36rem; margin-top: clamp(20px, 3vw, 32px); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: var(--grau); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px;
  border-radius: 999px; font-weight: 650; font-size: 1rem; text-decoration: none;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.knopf-voll { background: var(--gruen); color: #fff; }
.knopf-voll:hover { background: var(--gruen-tief); color: #fff; transform: translateY(-1px); }
.knopf-leise { color: var(--tinte); border: 1.5px solid var(--linie); background: #fff; }
.knopf-leise:hover { border-color: var(--gruen); color: var(--gruen); }

.platz { margin: clamp(-40px, -3vw, -8px) 0 0; position: relative; }
.platz-bild { display: block; width: 100%; height: clamp(300px, 36vw, 470px); touch-action: pan-y; cursor: crosshair; }
.ziel { transition: opacity 0.4s; }
.ziel.ruht { opacity: 0.35; }
.fahne-tuch { transform-box: fill-box; transform-origin: left center; animation: wehen 3.2s ease-in-out infinite; }
@keyframes wehen { 0%, 100% { transform: scaleX(1) skewY(0deg); } 50% { transform: scaleX(0.9) skewY(3deg); } }
.auge { transform-box: fill-box; transform-origin: center; animation: blinzeln 5.5s infinite; }
@keyframes blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.1); } 96% { transform: scaleY(1); } }
.platz-hinweis {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  max-width: var(--breite); margin: 0 auto; padding: 14px var(--rand) 0;
  font-size: 0.8125rem; color: var(--grau);
}
.platz-hinweis .skizze { font-style: italic; }
.nur-touch { display: none; }
@media (hover: none) { .nur-zeiger { display: none; } .nur-touch { display: inline; } }

@media (min-width: 1000px) {
  .buehne-text { display: grid; grid-template-columns: 1.3fr 1fr; column-gap: 56px; align-items: end; }
  .buehne-text .vorzeile { grid-column: 1 / -1; justify-self: start; }
  .buehne-text h1 { grid-column: 1; }
  .buehne-text .lead { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 8px; }
  .buehne-text .knoepfe { grid-column: 2; grid-row: 3; margin-top: 24px; }
  .buehne-text h1 { grid-row: 2 / span 2; font-size: clamp(4.8rem, 7.6vw, 7.8rem); }
  .platz-bild { height: clamp(360px, 30vw, 440px); }
}

/* Abschnitte */
.abschnitt { max-width: var(--breite); margin: 0 auto; padding: clamp(80px, 12vw, 150px) var(--rand) 0; }
.loch {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grau);
  margin-bottom: 22px;
}
.loch span {
  font: italic 400 1.0625rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--gruen);
  padding: 6px 12px; border: 1.5px solid currentColor; border-radius: 999px;
}
.loch::after { content: ""; flex: 1; height: 0; border-top: 2px dotted #c5d3ca; }
h2 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
.abschnitt-lead { max-width: 40rem; margin-top: 22px; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: var(--grau); }

/* Idee: Vergleich */
.vergleich { list-style: none; padding: 0; margin: clamp(40px, 6vw, 64px) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vergleich-karte {
  position: relative; padding: 28px 28px 30px; border-radius: 22px; background: #fff; border: 1px solid var(--linie);
}
.vergleich-karte svg { display: block; width: 100%; height: 150px; margin-bottom: 8px; }
.vergleich-karte .zahl { font: 400 clamp(3.8rem, 7vw, 5.4rem)/1 var(--serif); letter-spacing: -0.02em; color: #9aa7a0; }
.vergleich-karte p:last-child { margin-top: 10px; color: var(--grau); font-size: 0.9875rem; }
.vergleich-karte:not(.vergleich-ypc) svg { opacity: 0.9; }
.vergleich-ypc { background: var(--gruen-tief); border-color: var(--gruen-tief); color: #fff; }
.vergleich-ypc .zahl { color: var(--minze); font-style: italic; }
.vergleich-ypc p:last-child { color: #d5e6db; }
.vergleich-ypc svg { filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25)); }

/* Prinzip: Spur */
.spur {
  position: relative; height: clamp(190px, 22vw, 250px); margin-top: clamp(36px, 5vw, 56px);
  border-radius: 26px; overflow: hidden;
  background: repeating-linear-gradient(90deg, #dcebdf 0 70px, #d2e5d6 70px 140px);
}
.spur::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 45%;
  background: linear-gradient(var(--gruen-hell), rgba(231, 240, 232, 0));
}
.spur-boden { position: absolute; left: 0; right: 0; bottom: 22px; border-top: 2px dashed rgba(19, 102, 63, 0.3); }
.laeufer { position: absolute; inset: 0; animation: gehen 16s linear infinite; }
.golfer { animation-delay: -2.2s; }
.golfer-bild { position: absolute; bottom: 20px; left: 0; height: 64%; width: auto; }
.folger-neigung { position: absolute; bottom: 18px; left: 0; height: 60%; aspect-ratio: 120 / 200; transform-origin: 50% 86%; animation: neigen 16s ease-in-out infinite; }
.folger-bild { display: block; width: 100%; height: 100%; overflow: visible; }
.dreh { transform-box: fill-box; transform-origin: center; animation: rollen 1.1s linear infinite; }
@keyframes rollen { to { transform: rotate(360deg); } }
@keyframes gehen {
  0% { transform: translateX(-12%); opacity: 0; }
  4% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(104%); opacity: 0; }
}
@keyframes neigen {
  0%, 100% { transform: rotate(0deg); }
  6% { transform: rotate(7deg); }
  14% { transform: rotate(2deg); }
  50% { transform: rotate(1.5deg); }
  56% { transform: rotate(3deg); }
  62% { transform: rotate(0.5deg); }
}
.bein, .arm { transform-box: fill-box; transform-origin: 50% 0; }
.bein-a { animation: schritt 0.9s ease-in-out infinite alternate; }
.bein-b { animation: schritt 0.9s ease-in-out infinite alternate-reverse; }
.arm { animation: schritt 0.9s ease-in-out infinite alternate-reverse; }
@keyframes schritt { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }

.grundsaetze { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: clamp(40px, 6vw, 64px); }
.grundsaetze article { border-top: 2px solid var(--tinte); padding-top: 20px; }
.grundsatz-nr { font: italic 400 1.25rem/1 var(--serif); color: var(--gruen); }
.grundsaetze h3 { font-size: clamp(1.8rem, 2.8vw, 2.3rem); margin: 14px 0 12px; }
.grundsaetze p:last-child { color: var(--grau); }

/* Stand: Scorekarte */
.stand-raster { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.karte { width: 100%; border-collapse: collapse; background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px var(--linie), 0 24px 60px -30px rgba(11, 64, 41, 0.35); }
.karte caption { caption-side: bottom; text-align: left; padding-top: 14px; font-size: 0.8125rem; color: var(--grau); }
.karte th, .karte td { padding: 17px 24px; text-align: left; border-bottom: 1px solid var(--linie); }
.karte thead th { background: var(--gruen-tief); color: #fff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.karte tbody th { font: 400 1.375rem/1.2 var(--serif); }
.karte tbody tr:last-child th, .karte tbody tr:last-child td { border-bottom: 0; }
.marke-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--grau); }
.marke-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #9aa7a0; flex: none; }
.marke-aktiv { color: var(--gruen-tief); font-weight: 650; }
.marke-aktiv::before { background: var(--gruen); border-color: var(--gruen); }

/* Kontakt */
.kontakt { max-width: none; padding-left: 0; padding-right: 0; }
.kontakt-innen {
  max-width: var(--breite); margin: 0 auto; padding: clamp(56px, 8vw, 104px) var(--rand);
  background: var(--gruen-nacht); color: #fff; border-radius: clamp(0px, 3vw, 32px);
  position: relative; overflow: hidden;
}
.kontakt-innen::after {
  content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%;
  border: 2px dotted rgba(138, 240, 190, 0.25);
}
.loch-hell { color: #b7cbbf; }
.loch-hell span { color: var(--minze); }
.loch-hell::after { border-top-color: rgba(183, 203, 191, 0.35); }
.kontakt h2 em { color: var(--minze); }
.kontakt .abschnitt-lead { color: #c8d8ce; }
.kontakt-mail { margin-top: 36px; font: 400 clamp(2.1rem, 6.4vw, 4.4rem)/1.1 var(--serif); letter-spacing: -0.01em; position: relative; z-index: 1; }
.kontakt-mail a { color: #fff; text-decoration: none; background: linear-gradient(var(--minze), var(--minze)) 0 100% / 100% 2px no-repeat; padding-bottom: 4px; overflow-wrap: anywhere; }
.kontakt-mail a:hover { color: var(--minze); }
.kontakt-daten { display: flex; flex-wrap: wrap; gap: 20px 64px; margin: 40px 0 0; position: relative; z-index: 1; }
.kontakt-daten dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9fb8aa; }
.kontakt-daten dd { margin: 6px 0 0; font-size: 1.0625rem; }
.kontakt-daten a { color: #fff; }
.kontakt :focus-visible { outline-color: var(--minze); }

/* Fuss */
.fuss { margin-top: clamp(64px, 9vw, 110px); border-top: 1px solid var(--linie); }
.fuss-innen {
  max-width: var(--breite); margin: 0 auto; padding: 28px var(--rand) 36px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px;
  font-size: 0.875rem; color: var(--grau);
}
.fuss-firma { font-weight: 550; color: var(--tinte); }
.fuss-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.fuss-links a { color: var(--grau); }
.auctor { width: 100%; margin: 6px 0 0; }

/* Rechtstexte und 404 */
.text-seite { max-width: 46rem; margin: 0 auto; padding: clamp(40px, 7vw, 88px) var(--rand) 0; }
.text-seite h1 { font-size: clamp(3.2rem, 8vw, 5.4rem); margin: 18px 0 0; }
.text-seite h2 { font-size: clamp(1.6rem, 3vw, 1.9rem); margin: 42px 0 12px; letter-spacing: 0; }
.text-seite p, .text-seite address, .text-seite dl { margin: 0 0 14px; color: #33433c; }
.text-seite address { font-style: normal; }
.text-seite dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; }
.text-seite dt { font-weight: 650; color: var(--tinte); }
.text-seite dd { margin: 0; }
.text-seite .stand-zeile { margin-top: 44px; font-size: 0.875rem; color: var(--grau); }
.leer { text-align: center; max-width: 40rem; padding-top: clamp(48px, 9vw, 110px); }
.leer svg { display: block; width: 180px; height: 220px; margin: 0 auto 8px; }
.leer .knoepfe { justify-content: center; }
.leer .abschnitt-lead { margin: 26px auto 0; }
.leer .loch { max-width: 32rem; margin-left: auto; margin-right: auto; }

/* csl atthis — Herstellerhinweis (Familien-Baustein, vorlagen/csl-atthis-signum/signum.css) */
.csl-atthis-signum {
  display: inline-flex; align-items: center; gap: 6px;
  font: 400 11px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0.02em;
  text-transform: none; color: inherit; text-decoration: none; border: 0;
}
.csl-atthis-signum span { opacity: 0.6; transition: opacity 0.2s; }
.csl-atthis-signum svg { display: block; flex: none; opacity: 0.9; }
.csl-atthis-signum:hover span, .csl-atthis-signum:focus-visible span { opacity: 0.95; }

/* Handy */
@media (max-width: 860px) {
  .vergleich, .grundsaetze { grid-template-columns: 1fr; }
  .vergleich-karte { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: center; padding: 20px; }
  .vergleich-karte svg { grid-row: span 2; height: 96px; margin: 0; }
  .vergleich-karte p:last-child { margin-top: 4px; }
  .stand-raster { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .navi a:not(.navi-kontakt) { display: none; }
  .vorzeile-zusatz { display: none; }
  .karte th, .karte td { padding: 14px 16px; }
  .kontakt-innen { border-radius: 0; }
  .spur { border-radius: 18px; }
  .laeufer { animation-duration: 10s; }
  .folger-neigung { animation-duration: 10s; }
  .fuss-links { gap: 18px; }
}

/* Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .laeufer { opacity: 1; }
  .nur-zeiger, .nur-touch { display: none !important; }
  .golfer { transform: translateX(52%); }
  .folger { transform: translateX(30%); }
}
.vorzeile-zusatz { margin-left: -5px; }