/* R.S.K Reifen-Service-Keupp – Gestaltung
   Idee: eine Werkstatt im Chiemgau. Blau vom Logo und vom bayerischen Rautenmuster, Gelb vom Punkt auf der Reifenflanke,
   Schrift wie die Prägung am Reifen (breit, schwer) und ein Fließtext, der auch im Halbdunkel der Werkstatt lesbar bleibt. */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("../fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --night: #0e2247;      /* Nachtblau: Text und dunkle Flächen */
  --gentian: #1e4fa3;    /* Enzianblau: Links, Winterreifen */
  --snow: #f4f6f9;       /* Seitenhintergrund */
  --signal: #f7c600;     /* Signalgelb: Handlungen */
  --asphalt: #566074;    /* Nebentext */
  --frost: #d9e0eb;      /* Linien */
  --danger: #b3261e;
  --ok: #1b7a46;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Atkinson", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rauten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M9 0l9 4.5L9 9 0 4.5z' fill='%231e4fa3'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.125rem/1.6 var(--body); color: var(--night); background: var(--snow); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: var(--gentian); text-underline-offset: .18em; }
p { margin: 0 0 1em; max-width: 62ch; }
h1, h2, h3 { font-family: var(--display); font-stretch: 108%; margin: 0 0 .5em; line-height: 1.08; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-weight: 800; font-size: clamp(2.35rem, 5.6vw, 4.5rem); line-height: 1.03; font-stretch: 114%; }
h2 { font-weight: 750; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-weight: 700; font-size: 1.25rem; letter-spacing: 0; }
.wrap { width: min(70rem, 100% - 2.5rem); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--gentian); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .site-footer :focus-visible { outline-color: var(--signal); }

/* Rautenband wie an bayerischen Fahnen und Fensterläden */
.rauten { height: 9px; background: var(--rauten) repeat-x 0 0 / 18px 9px; background-color: #fff; }

/* Schaltflächen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.4rem; border: 2px solid transparent; border-radius: 6px; font: 700 1rem/1.2 var(--display); font-stretch: 105%; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s; }
.btn-primary { background: var(--signal); color: var(--night); }
.btn-primary:hover { background: #ffd62e; }
.btn-line { background: transparent; color: inherit; border-color: currentColor; }
.btn-line:hover { background: rgb(255 255 255 / .1); }
.btn-dark { background: var(--night); color: #fff; }
.btn-dark:hover { background: #1b3466; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Kopfzeile */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--frost); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.brand { display: flex; align-items: center; gap: .8rem; color: var(--night); text-decoration: none; }
.brand img { height: 3rem; width: auto; }
.brand b { display: block; font: 800 1.35rem/1 var(--display); font-stretch: 118%; letter-spacing: .02em; }
.brand small { display: block; font-size: .8rem; color: var(--asphalt); margin-top: .15rem; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .4rem; }
.nav a:not(.btn) { color: var(--night); text-decoration: none; padding: .5rem .8rem; font-weight: 700; border-radius: 4px; }
.nav a:not(.btn):hover, .nav a[aria-current="page"]:not(.btn) { background: var(--snow); }
.nav .btn { margin-left: .5rem; min-height: 2.6rem; padding-block: .45rem; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--night); padding: .5rem; cursor: pointer; }
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--frost); padding: .5rem 1.25rem 1.2rem; margin: 0; }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: .9rem .4rem; border-bottom: 1px solid var(--frost); border-radius: 0; }
  .nav .btn { margin: 1rem 0 0; }
}

/* Einstieg: ein Rad mit den Bergen aus dem Logo als Nabe */
.hero { position: relative; overflow: hidden; background: var(--night); color: #fff; isolation: isolate; }
.hero .wrap { position: relative; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 10vw, 8rem); }
.hero-copy { max-width: 36rem; position: relative; z-index: 2; }
.hero h1 { color: #fff; }
.hero .lead { font-size: 1.25rem; color: #d3dcee; max-width: 34ch; }
.hero .cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.wheel { position: absolute; z-index: 1; right: max(-15rem, -14vw); top: 50%; width: min(52rem, 78vw); aspect-ratio: 1; translate: 0 -50%; pointer-events: none; }
.wheel svg { width: 100%; height: 100%; }
.wheel .spin { transform-origin: 50% 50%; transform-box: fill-box; animation: wheel-in 1.6s cubic-bezier(.16, .8, .24, 1) both; }
@keyframes wheel-in { from { transform: rotate(-115deg); } to { transform: rotate(0); } }
@media (max-width: 760px) {
  .wheel { right: -9rem; top: auto; bottom: -13rem; translate: none; width: 26rem; opacity: .9; }
  .hero .wrap { padding-bottom: 12rem; }
}

/* Abschnitte */
section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.head { max-width: 40rem; margin-bottom: 2.4rem; }
.head p { color: var(--asphalt); }

/* Leistungen als Tafel: Name, Beschreibung, Dauer */
.board { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--frost); }
.board a { display: grid; grid-template-columns: minmax(12rem, 1.1fr) 2fr 7.5rem; gap: .4rem 2rem; align-items: baseline; padding: 1.25rem .8rem; margin-inline: -.8rem; border-top: 1px solid var(--frost); color: inherit; text-decoration: none; border-radius: 2px; transition: background-color .15s, box-shadow .15s; }
.board a:hover { background: #fff; box-shadow: inset 4px 0 0 var(--signal); }
.board .name { font: 700 1.3rem/1.2 var(--display); font-stretch: 108%; }
.board .desc { color: var(--asphalt); }
.board .dur { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
@media (max-width: 720px) { .board a { grid-template-columns: 1fr auto; } .board .desc { grid-column: 1 / -1; order: 3; } }

/* Von O bis O: das Reifenjahr */
.season { background: #fff; border-block: 1px solid var(--frost); }
.season .two { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: center; }
@media (max-width: 900px) { .season .two { grid-template-columns: 1fr; gap: 2rem; } }
.year { position: relative; padding-top: 2.6rem; }
.year-bars { display: grid; grid-template-columns: repeat(24, 1fr); height: 3.4rem; gap: 2px; }
.year-bars span { display: flex; align-items: center; padding-inline: .7rem; font: 700 .95rem/1 var(--display); white-space: nowrap; overflow: hidden; }
.year-bars .w { background: var(--gentian); color: #fff; }
.year-bars .s { background: var(--frost); color: var(--night); }
.year-months { display: grid; grid-template-columns: repeat(12, 1fr); margin-top: .5rem; font-size: .85rem; color: var(--asphalt); }
.year-months span { padding-left: .25rem; border-left: 1px solid var(--frost); }
.year-tick { position: absolute; top: 0; display: flex; flex-direction: column; font: 700 .9rem/1.1 var(--display); }
.year-tick::after { content: ""; width: 3px; height: 1.3rem; margin-top: .25rem; background: var(--signal); }

/* Kontakt */
.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 2rem; } }
.address { font: 750 clamp(1.7rem, 3.4vw, 2.5rem)/1.12 var(--display); font-stretch: 108%; margin: 0 0 1.2rem; }
.phone { display: inline-block; font: 800 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--display); font-stretch: 112%; color: var(--night); text-decoration-color: var(--signal); text-decoration-thickness: .22em; text-underline-offset: .12em; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.facts li { padding-left: 1.1rem; border-left: 3px solid var(--signal); }
.facts b { display: block; font-family: var(--display); }

/* Fußzeile */
.site-footer { background: var(--night); color: #b9c6e1; font-size: 1rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding-block: 2.6rem; }
.site-footer a { color: #fff; }
.site-footer nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.site-footer b { color: #fff; font-family: var(--display); }

/* Terminanfrage */
.demo-banner { background: var(--signal); color: var(--night); text-align: center; padding: .5rem 1rem; font-size: .95rem; font-weight: 700; }
.request { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 3.5rem; align-items: start; }
@media (max-width: 920px) { .request { grid-template-columns: 1fr; gap: 2.5rem; } }
.steps { display: flex; gap: .4rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.steps li { flex: 1; padding-bottom: .5rem; border-bottom: 4px solid var(--frost); font: 700 .95rem/1.2 var(--display); color: var(--asphalt); }
.steps li.on { border-color: var(--signal); color: var(--night); }
.steps li.done { border-color: var(--night); color: var(--night); }
.choice-list { display: grid; gap: .6rem; }
.choice { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; width: 100%; text-align: left; padding: 1rem 1.2rem; background: #fff; border: 2px solid var(--frost); border-radius: 6px; font: inherit; color: inherit; cursor: pointer; transition: border-color .15s; }
.choice:hover { border-color: var(--gentian); }
.choice b { font: 700 1.1rem/1.2 var(--display); font-stretch: 105%; }
.choice small { color: var(--asphalt); font-size: .95rem; white-space: nowrap; }
.choice[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: #fff; box-shadow: inset 6px 0 0 var(--signal); }
.choice[aria-pressed="true"] small { color: #c7d3ea; }
.choice-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; margin-top: .6rem; }
.field { display: grid; align-content: start; gap: .35rem; margin-bottom: 1.1rem; }
.field label { font-weight: 700; font-size: 1rem; }
.field input, .field select, .field textarea { width: 100%; min-height: 3rem; padding: .7rem .85rem; border: 2px solid var(--frost); border-radius: 6px; font: inherit; background: #fff; color: inherit; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gentian); outline: 3px solid rgb(30 79 163 / .2); outline-offset: 0; }
.field .hint { font-size: .9rem; color: var(--asphalt); }
.row2 { display: grid; gap: 0 1.2rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .row2 { grid-template-columns: 1fr; } }
.actions { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1.8rem; flex-wrap: wrap; }
.notice { padding: .9rem 1.1rem; border-left: 5px solid var(--gentian); background: #fff; margin-bottom: 1.2rem; }
.notice.error { border-color: var(--danger); background: #fdeeed; }
.hp { position: absolute; left: -9999px; }

/* Die Anfrage als Auftragsschein, der sich beim Ausfüllen füllt */
.slip { position: sticky; top: 6.5rem; background: #fff; padding: 1.5rem 1.5rem 2.6rem; filter: drop-shadow(0 14px 14px rgb(14 34 71 / .18)); rotate: .8deg;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; }
.slip h2 { font-size: 1.3rem; margin-bottom: 1rem; padding-bottom: .7rem; border-bottom: 3px solid var(--night); }
.slip dl { margin: 0; }
.slip dl div { display: grid; grid-template-columns: 6.2rem 1fr; gap: .5rem; padding: .55rem 0; border-bottom: 1px dotted var(--asphalt); }
.slip dt { color: var(--asphalt); font-size: .95rem; }
.slip dd { margin: 0; font: 700 1rem/1.3 var(--display); overflow-wrap: anywhere; min-height: 1.3em; }
.slip dd:empty::before { content: "…"; color: var(--frost); }
.slip p { margin: 1rem 0 0; font-size: .9rem; color: var(--asphalt); }
@media (max-width: 920px) { .slip { position: static; rotate: 0deg; } }
.done-box { background: #fff; padding: 2.4rem; border-left: 8px solid var(--signal); }

/* Rechtstexte */
.legal { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.legal h2 { font-size: 1.4rem; margin-top: 2.2rem; }
.legal .todo { background: #fff0a8; padding: 0 .25em; border-radius: 3px; }
.legal .hint-box { background: #fff0a8; padding: .9rem 1.1rem; border-radius: 6px; font-size: .95rem; }

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

/* Monatsnamen der Jahresleiste: auf dem Handy nur der Anfangsbuchstabe */
.year-months span::after { content: attr(data-full); }
@media (max-width: 560px) { .year-months span::after { content: attr(data-short); } .year-bars span { font-size: .8rem; padding-inline: .4rem; } }