/* vspar.at — Swiss-grid didactic theme (vanilla CSS, vsp- prefix)
   Palette: pastel family — petrol/slate + warm ochre on warm paper. */

/* ---- self-hosted fonts ---- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/bricolage-grotesque-800.woff2') format('woff2');}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/bricolage-grotesque-700.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-tight-400.woff2') format('woff2');}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-tight-600.woff2') format('woff2');}

:root{
  --vsp-ink:#1c1c1c;
  --vsp-paper:#f7f5f0;
  --vsp-primary:#4a6670;
  --vsp-primary-dark:#38505a;
  --vsp-accent:#e0a96d;
  --vsp-accent-soft:#f2e4d0;
  --vsp-muted:#6b6b66;
  --vsp-line:#1c1c1c;
  --vsp-maxw:1320px;
  --vsp-head:'Bricolage Grotesque',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --vsp-body:'Inter Tight','Inter Tight Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;font-family:var(--vsp-body);background:var(--vsp-paper);color:var(--vsp-ink);
  line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block;}
a{color:var(--vsp-primary-dark);text-underline-offset:.18em;}
a:hover{color:var(--vsp-ink);}

h1,h2,h3,h4{font-family:var(--vsp-head);font-weight:800;line-height:1.02;letter-spacing:-0.03em;margin:0 0 .5em;}
h1{font-size:clamp(2.6rem,6vw,5.5rem);text-transform:uppercase;}
h2{font-size:clamp(1.8rem,3.2vw,2.7rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1.1em;}

.vsp-skip{position:absolute;left:-9999px;top:0;background:var(--vsp-ink);color:var(--vsp-paper);padding:.6rem 1rem;z-index:100;}
.vsp-skip:focus{left:.5rem;top:.5rem;}

.vsp-wrap{max-width:var(--vsp-maxw);margin:0 auto;}
.vsp-num{display:block;font-family:var(--vsp-body);font-size:.75rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;border-top:1.5px solid var(--vsp-line);padding-top:.55rem;margin-bottom:1.6rem;color:var(--vsp-muted);}

/* ---- header / nav ---- */
.vsp-header{position:sticky;top:0;z-index:50;background:var(--vsp-paper);border-bottom:1.5px solid var(--vsp-line);}
.vsp-header__grid{max-width:var(--vsp-maxw);margin:0 auto;display:grid;grid-template-columns:minmax(220px,1fr) 2.4fr;}
.vsp-brandcell{border-right:1.5px solid var(--vsp-line);padding:1.1rem 1.4rem;display:flex;align-items:center;}
.vsp-brand{display:inline-flex;}
.vsp-nav{display:grid;grid-template-columns:repeat(7,1fr);}
.vsp-nav a{display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem .35rem;
  font-size:.78rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;color:var(--vsp-ink);
  border-left:1.5px solid var(--vsp-line);transition:background .15s,color .15s;line-height:1.15;}
.vsp-nav a:first-child{border-left:0;}
.vsp-nav a:hover{background:var(--vsp-primary);color:var(--vsp-paper);}
.vsp-nav a[aria-current="page"]{background:var(--vsp-ink);color:var(--vsp-paper);}
/* mobile nav toggle (inline-SVG hamburger; hidden on desktop) */
.vsp-navtoggle{display:none;align-items:center;justify-content:center;background:none;border:0;
  cursor:pointer;padding:.4rem;margin:-0.4rem 0;color:var(--vsp-ink);}
.vsp-navtoggle svg{width:28px;height:28px;display:block;}
.vsp-navtoggle__close{display:none;}
.vsp-navtoggle[aria-expanded="true"] .vsp-navtoggle__open{display:none;}
.vsp-navtoggle[aria-expanded="true"] .vsp-navtoggle__close{display:block;}

/* ---- generic grid section ---- */
.vsp-section{max-width:var(--vsp-maxw);margin:0 auto;display:grid;grid-template-columns:minmax(220px,1fr) 2.4fr;border-bottom:1.5px solid var(--vsp-line);}
.vsp-section__label{border-right:1.5px solid var(--vsp-line);padding:2rem 1.4rem;}
.vsp-section__label.is-fill{background:var(--vsp-ink);color:var(--vsp-paper);}
.vsp-section__label.is-fill .vsp-num{color:rgba(247,245,240,.7);border-color:var(--vsp-paper);}
.vsp-section__label.is-accent{background:var(--vsp-accent);}
.vsp-section__body{padding:2rem 1.8rem;}
.vsp-section__label h2{margin:0;}

/* ---- hero ---- */
.vsp-hero{border-bottom:1.5px solid var(--vsp-line);}
.vsp-hero__inner{max-width:var(--vsp-maxw);margin:0 auto;display:grid;grid-template-columns:minmax(220px,1fr) 2.4fr;}
.vsp-hero__aside{border-right:1.5px solid var(--vsp-line);padding:2rem 1.4rem;}
.vsp-hero__aside p{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;line-height:1.4;margin:0;}
.vsp-hero__main{padding:2.4rem 1.8rem;}
.vsp-hero__main h1{margin-bottom:.6em;}
.vsp-hero__lead{font-size:1.15rem;max-width:46ch;}
.vsp-hero figure{margin:1.6rem 0 0;}
.vsp-hero figure img{border:1.5px solid var(--vsp-line);}

/* ---- buttons / links ---- */
.vsp-cta{display:inline-block;background:var(--vsp-ink);color:var(--vsp-paper);text-decoration:none;
  padding:.95rem 1.6rem;font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:background .15s;}
.vsp-cta:hover{background:var(--vsp-primary);color:var(--vsp-paper);}
.vsp-arrowlink{font-family:var(--vsp-head);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;color:var(--vsp-ink);border-bottom:2px solid var(--vsp-accent);}
.vsp-arrowlink:hover{border-color:var(--vsp-ink);}

/* ---- route reference list (evergreen, NOT live status) ---- */
.vsp-routes{display:grid;grid-template-columns:1fr 1fr;}
.vsp-route{border-top:1.5px solid var(--vsp-line);padding:1.3rem 1.4rem;}
.vsp-route:nth-child(odd){border-right:1.5px solid var(--vsp-line);}
.vsp-route__id{font-size:.75rem;font-weight:600;letter-spacing:.1em;color:var(--vsp-muted);}
.vsp-route__name{font-family:var(--vsp-head);font-weight:800;font-size:1.25rem;text-transform:uppercase;letter-spacing:-.02em;margin:.15rem 0 .4rem;}
.vsp-route p{font-size:.9rem;margin:0;color:#333;}

/* ---- route reference table (evergreen, NOT live status) ---- */
.vsp-tablewrap{overflow-x:auto;border-top:1.5px solid var(--vsp-line);}
.vsp-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:680px;}
.vsp-table th,.vsp-table td{border:1.5px solid var(--vsp-line);padding:.7rem .8rem;text-align:left;vertical-align:top;}
.vsp-table thead th{background:var(--vsp-ink);color:var(--vsp-paper);font-family:var(--vsp-head);font-weight:700;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;}
.vsp-table tbody th{background:var(--vsp-accent-soft);font-family:var(--vsp-head);font-weight:800;
  font-size:1rem;white-space:nowrap;}
.vsp-table tbody tr:hover td{background:rgba(74,102,112,.06);}
.vsp-table .vsp-table__name{font-weight:600;}
.vsp-tnote{font-size:.75rem;color:var(--vsp-muted);padding:1rem 1.4rem;margin:0;border-top:1.5px solid var(--vsp-line);}

/* ---- two feature blocks ---- */
.vsp-feats{display:grid;grid-template-columns:1fr 1fr;border-bottom:1.5px solid var(--vsp-line);}
.vsp-feat{padding:1.8rem;}
.vsp-feat:first-child{border-right:1.5px solid var(--vsp-line);}
.vsp-feat h3{color:var(--vsp-primary-dark);}

/* ---- stats strip ---- */
.vsp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.vsp-stat{padding:1.6rem 1.4rem;border-left:1.5px solid var(--vsp-line);}
.vsp-stat:first-child{border-left:0;}
.vsp-stat__num{font-family:var(--vsp-head);font-weight:800;font-size:2.4rem;line-height:1;}
.vsp-stat__lab{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--vsp-muted);margin-top:.4rem;}
.vsp-stat__src{font-size:.75rem;color:var(--vsp-muted);margin-top:.3rem;}

/* ---- article prose ---- */
.vsp-prose{padding:2.4rem 1.8rem;max-width:74ch;margin:0 auto;}
.vsp-prose h2{margin-top:1.8em;border-top:1.5px solid var(--vsp-line);padding-top:.7em;}
.vsp-prose h3{margin-top:1.5em;}
.vsp-prose ul,.vsp-prose ol{padding-left:1.2rem;margin:0 0 1.1em;}
.vsp-prose li{margin-bottom:.4em;}
.vsp-prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.92rem;}
.vsp-prose th,.vsp-prose td{border:1.5px solid var(--vsp-line);padding:.6rem .7rem;text-align:left;vertical-align:top;}
.vsp-prose th{background:var(--vsp-accent-soft);font-family:var(--vsp-head);font-weight:700;}
.vsp-prose figure{margin:1.8em 0;}
.vsp-prose figure img{border:1.5px solid var(--vsp-line);}
.vsp-prose figcaption{font-size:.8rem;color:var(--vsp-muted);margin-top:.5rem;}

/* site-specific callout (NOT the AI-slop border-l-4 + tint + bold-label box) */
.vsp-note{margin:1.6em 0;border:1.5px solid var(--vsp-line);}
.vsp-note__bar{background:var(--vsp-ink);color:var(--vsp-paper);font-family:var(--vsp-head);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.75rem;padding:.45rem .9rem;}
.vsp-note__body{padding:.9rem;}
.vsp-note__body p:last-child{margin-bottom:0;}

/* ---- FAQ accordion ---- */
.vsp-faq{padding:0;}
.vsp-faq details{border-top:1.5px solid var(--vsp-line);}
.vsp-faq details:last-child{border-bottom:1.5px solid var(--vsp-line);}
.vsp-faq summary{list-style:none;cursor:pointer;padding:1.1rem 1.8rem;font-family:var(--vsp-head);font-weight:700;
  font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;}
.vsp-faq summary::-webkit-details-marker{display:none;}
.vsp-faq summary::after{content:"+";font-size:1.4rem;color:var(--vsp-primary);}
.vsp-faq details[open] summary::after{content:"–";}
.vsp-faq summary:hover{background:var(--vsp-accent-soft);}
.vsp-faq__a{padding:0 1.8rem 1.3rem;max-width:74ch;}
.vsp-faq__a p:last-child{margin-bottom:0;}

/* ---- infographic ---- */
.vsp-info{margin:0;}
.vsp-info svg{width:100%;height:auto;border:1.5px solid var(--vsp-line);background:#fff;}
.vsp-info figcaption{font-size:.8rem;color:var(--vsp-muted);margin-top:.6rem;}
.vsp-embed{margin-top:.6rem;}
.vsp-embed summary{cursor:pointer;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.vsp-embed textarea{width:100%;min-height:80px;margin-top:.5rem;font-family:ui-monospace,monospace;font-size:.78rem;
  border:1.5px solid var(--vsp-line);padding:.6rem;background:#fff;}

/* ---- footer ---- */
.vsp-footer{border-top:1.5px solid var(--vsp-line);max-width:var(--vsp-maxw);margin:0 auto;}
.vsp-footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;}
.vsp-footer__brand,.vsp-footer__col{padding:2rem 1.4rem;border-right:1.5px solid var(--vsp-line);}
.vsp-footer__col:last-child{border-right:0;}
.vsp-footer__mark{font-family:var(--vsp-head);font-weight:800;font-size:1.6rem;}
.vsp-footer__tag{font-size:.84rem;color:#333;margin-top:.8rem;}
.vsp-footer__head{display:block;font-family:var(--vsp-head);font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.9rem;}
.vsp-footer__col ul{list-style:none;margin:0;padding:0;}
.vsp-footer__col li{margin-bottom:.5rem;}
.vsp-footer__col a{font-size:.86rem;text-decoration:none;color:var(--vsp-ink);}
.vsp-footer__col a:hover{color:var(--vsp-primary-dark);text-decoration:underline;}
.vsp-footer__about p{font-size:.82rem;color:#333;margin:0;}
.vsp-footer__base{border-top:1.5px solid var(--vsp-line);display:flex;justify-content:space-between;gap:1rem;
  padding:1rem 1.4rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--vsp-muted);flex-wrap:wrap;}
.vsp-footer__base a{color:inherit;text-decoration:underline;text-underline-offset:.15em;}

/* ---- responsive ---- */
@media (max-width:960px){
  .vsp-header__grid,.vsp-hero__inner,.vsp-section{grid-template-columns:1fr;}
  .vsp-brandcell{border-right:0;border-bottom:1.5px solid var(--vsp-line);display:flex;justify-content:space-between;align-items:center;}
  .vsp-navtoggle{display:inline-flex;}
  .vsp-nav{display:none;grid-template-columns:1fr;}
  .vsp-nav.is-open{display:block;}
  .vsp-nav a{border-left:0;border-bottom:1.5px solid var(--vsp-line);justify-content:flex-start;
    padding:1rem 1.4rem;font-size:1rem;letter-spacing:.04em;}
  .vsp-nav a:last-child{border-bottom:0;}
  .vsp-hero__aside,.vsp-section__label{border-right:0;border-bottom:1.5px solid var(--vsp-line);}
  .vsp-footer__grid{grid-template-columns:1fr 1fr;}
  .vsp-footer__brand,.vsp-footer__col{border-right:0;border-bottom:1.5px solid var(--vsp-line);}
}
@media (max-width:560px){
  body{font-size:16px;}
  .vsp-routes,.vsp-feats,.vsp-stats,.vsp-footer__grid{grid-template-columns:1fr;}
  .vsp-route:nth-child(odd),.vsp-feat:first-child,.vsp-stat{border-right:0;}
  .vsp-stat{border-left:0;border-top:1.5px solid var(--vsp-line);}
}

/* ---- spritkosten calculator (client-side JS, no runtime dependency) ---- */
.vsp-calc__intro{max-width:60ch;}
.vsp-calc__inputs{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.4rem 0;}
.vsp-calc label{display:flex;flex-direction:column;gap:.4rem;font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--vsp-muted);}
.vsp-calc input{font-family:var(--vsp-body);font-size:1.1rem;padding:.6rem .7rem;border:1.5px solid var(--vsp-line);
  background:#fff;color:var(--vsp-ink);}
.vsp-calc input:focus{outline:2px solid var(--vsp-primary);outline-offset:1px;}
.vsp-calc__out{display:grid;grid-template-columns:repeat(3,1fr);border:1.5px solid var(--vsp-line);}
.vsp-calc__out>div{padding:1.2rem 1rem;border-left:1.5px solid var(--vsp-line);}
.vsp-calc__out>div:first-child{border-left:0;}
.vsp-calc__num{display:block;font-family:var(--vsp-head);font-weight:800;font-size:2rem;line-height:1;}
.vsp-calc__lab{display:block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--vsp-muted);margin-top:.4rem;}
.vsp-calc__save{margin-top:1.2rem;border:1.5px solid var(--vsp-line);background:var(--vsp-accent-soft);
  padding:1rem 1.1rem;font-size:1.02rem;}
.vsp-calc__save strong{font-family:var(--vsp-head);}
@media(max-width:560px){
  .vsp-calc__inputs,.vsp-calc__out{grid-template-columns:1fr;}
  .vsp-calc__out>div{border-left:0;border-top:1.5px solid var(--vsp-line);}
  .vsp-calc__out>div:first-child{border-top:0;}
}

/* ---- interactive tools (client-side, no runtime dependency) ---- */
.vsp-tool__intro{max-width:62ch;}
.vsp-tool__controls{display:grid;gap:1rem;margin:1.4rem 0;}
.vsp-tool label{display:flex;flex-direction:column;gap:.4rem;font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--vsp-muted);}
.vsp-tool select{font-family:var(--vsp-body);font-size:1rem;padding:.6rem .7rem;
  border:1.5px solid var(--vsp-line);background:#fff;color:var(--vsp-ink);}
.vsp-tool select:focus{outline:2px solid var(--vsp-primary);outline-offset:1px;}

/* Wann-fahren result */
.vsp-wf__controls{grid-template-columns:repeat(3,1fr);}
.vsp-wf__result{border:1.5px solid var(--vsp-line);display:flex;align-items:stretch;}
.vsp-wf__level{flex:0 0 auto;min-width:160px;display:flex;flex-direction:column;justify-content:center;
  gap:.3rem;padding:1.2rem;color:#fff;}
.vsp-wf__lab{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:.85;}
.vsp-wf__val{font-family:var(--vsp-head);font-weight:800;font-size:1.6rem;line-height:1.02;}
.vsp-wf__level.is-low{background:#5d8a7b;}
.vsp-wf__level.is-mid{background:var(--vsp-accent);color:var(--vsp-ink);}
.vsp-wf__level.is-mid .vsp-wf__lab{opacity:.7;}
.vsp-wf__level.is-high{background:var(--vsp-primary);}
.vsp-wf__level.is-vhigh{background:var(--vsp-primary-dark);}
.vsp-wf__note{flex:1;padding:1.2rem;font-size:.98rem;display:flex;align-items:center;margin:0;}

/* Park & Ride filterable list */
.vsp-pr__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0;}
.vsp-pr__filters button{font-family:var(--vsp-body);font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;padding:.5rem .9rem;border:1.5px solid var(--vsp-line);background:#fff;color:var(--vsp-ink);cursor:pointer;}
.vsp-pr__filters button[aria-pressed=true]{background:var(--vsp-ink);color:var(--vsp-paper);}

/* Cost slider */
.vsp-slider__row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:1.2rem 0 1.6rem;}
.vsp-slider__cap{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--vsp-muted);}
.vsp-slider__row input[type=range]{flex:1;min-width:220px;accent-color:var(--vsp-primary);}
.vsp-slider__km{font-family:var(--vsp-head);font-weight:800;font-size:1.3rem;min-width:8ch;}
.vsp-slider__bars{display:flex;flex-direction:column;gap:.7rem;}
.vsp-slider__bar{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:.8rem;font-size:.9rem;}
.vsp-slider__track{height:28px;border:1.5px solid var(--vsp-line);background:#fff;}
.vsp-slider__fill{height:100%;display:flex;align-items:center;padding:0 .5rem;color:#fff;font-weight:600;
  font-size:.82rem;white-space:nowrap;min-width:0;}
@media(max-width:560px){
  .vsp-wf__controls{grid-template-columns:1fr;}
  .vsp-wf__result{flex-direction:column;}
  .vsp-slider__bar{grid-template-columns:1fr;gap:.2rem;}
}