/*
Theme Name: MotorradSpuren
Theme URI: https://motorradspuren.de
Author: Armin Würfl
Description: Eigenes Theme für MotorradSpuren.de (Reisen, die bleiben.)
Version: 0.5.1
Text Domain: motorradspuren
*/

@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("assets/fonts/Inter-Regular.otf") format("opentype")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("assets/fonts/Inter-Medium.otf") format("opentype")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("assets/fonts/Inter-SemiBold.otf") format("opentype")}

:root{
  --navy:#0e2841; --navy-2:#0f2b44; --blue:#0263bf; --blue-d:#0158a8; --sky:#8fc4ee;
  --ice:#f3f9fe; --ice-2:#e2f0fc; --line:#d3e0ec; --ink:#14283d; --muted:#4b5f73;
  --serif:"Source Serif 4","Source Serif Pro",Charter,"Bitstream Charter",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{font-size:clamp(16px,1.772vw,26px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.45;font-size:.75rem}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);margin:0;font-weight:700;color:var(--navy)}
.wrap{padding-left:3.3rem;padding-right:3.3rem;max-width:90rem;margin:0 auto}
.btn{display:inline-flex;align-items:center;gap:.5rem;height:1.9rem;padding:0 1rem;border-radius:.2rem;font-size:.72rem;font-weight:500;border:1px solid transparent;cursor:pointer;font-family:var(--sans);white-space:nowrap}
.btn--blue{background:var(--blue);color:#fff}.btn--blue:hover{background:var(--blue-d)}
.btn--ghost{background:rgba(255,255,255,.04);color:#fff;border-color:rgba(255,255,255,.75)}
.btn--outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.8);border-radius:1rem}
.ico{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Header */
.site-header{background:#f5f6f7;height:2.6rem;border-bottom:1px solid #e3e7ea;position:relative;z-index:5}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;max-width:none;padding-left:3.5rem;padding-right:3.4rem}
.logo{display:flex;align-items:center;gap:.25rem;line-height:1}
.logo svg{width:2.4rem;height:1.55rem}
.logo b{display:block;font-family:var(--serif);font-weight:700;font-size:1.12rem;color:var(--navy);letter-spacing:-.01em}
.logo small{display:block;font-size:.37rem;letter-spacing:.2em;color:var(--navy);margin-top:.12rem;font-weight:500}
.main-nav ul{display:flex;gap:2.5rem;list-style:none;margin:0;padding:0}
.main-nav a{font-size:.72rem;font-weight:500;color:var(--navy)}
.main-nav a:hover{color:var(--blue)}
.hdr-ico{display:flex;gap:1rem;font-size:.95rem;color:var(--navy)}
.nav-toggle{display:none}

/* Hero */
.hero{position:relative;min-height:23rem;color:#fff;background:#0a1d31 url('assets/img/hero.jpg') right 35%/auto 125% no-repeat;display:flex;align-items:center;overflow:hidden}

.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,24,41,1) 0%,rgba(8,24,41,1) 25%,rgba(8,24,41,.6) 44%,rgba(8,24,41,.08) 62%,rgba(8,24,41,0) 80%)}
.hero-kick{font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--sky);margin-bottom:.6rem}
.hero .wrap{position:relative;z-index:1;width:100%;max-width:none;padding-left:3.5rem;padding-right:3.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.hero-cover{display:block;flex:none;width:13.4rem;margin:1rem 0;box-shadow:0 .9rem 2.2rem rgba(0,0,0,.45);border-radius:.15rem;overflow:hidden;transform:rotate(1.2deg)}
.hero-cover img{width:100%;height:auto}
.hero h1{color:#fff;font-size:2.5rem;line-height:1.1;font-weight:600;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.hero h1 em{display:block;font-style:normal;color:var(--sky)}
.hero p{font-size:.95rem;line-height:1.35;margin:.6rem 0 1rem;max-width:21rem;color:#fff}
.hero .btns{display:flex;gap:.7rem}

/* Suche */
.finder{background:#fff;height:3.1rem;display:flex;align-items:center;justify-content:center;gap:.9rem;border-bottom:1px solid #eef2f6}
.finder strong{font-family:var(--serif);font-size:.98rem;color:var(--navy);font-weight:600}
.finder .sel{width:18.6rem;height:1.85rem;border:1px solid var(--line);border-radius:.2rem;display:flex;align-items:center;justify-content:space-between;padding:0 .8rem;font-size:.62rem;color:#33475c;background:#fff}
.finder .sel span{display:flex;align-items:center;gap:.6rem}
.finder .btn{width:11.1rem;justify-content:center;height:1.85rem}

/* Stories */
.stories{background:var(--ice);padding:1.05rem 0 .75rem}
.sec-head{display:flex;justify-content:space-between;align-items:flex-start}
.sec-head h2{font-size:1.72rem;line-height:1.1;font-weight:600}
.sec-head p{margin:.25rem 0 0;font-size:.72rem;color:var(--muted)}
.chips{display:flex;gap:.4rem;margin-top:.1rem}
.chip{font-size:.55rem;padding:.2rem .75rem;border-radius:1rem;background:#dfecf7;color:#2b4157;font-weight:500;border:0;cursor:pointer;font-family:var(--sans)}
.chipwrap{display:flex;flex-direction:column;align-items:flex-end}.chips-sub{margin-top:.5rem;flex-wrap:wrap;justify-content:flex-end}.chips[hidden]{display:none}
.chip.is-on{background:var(--blue);color:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:.9rem}
.card{background:#fff;border:1px solid #e7eef5;border-radius:.2rem;overflow:hidden;position:relative;display:block}
.card img{width:100%;height:7rem;object-fit:cover}
.card .tx{padding:.45rem .75rem .55rem}
.card .kick{font-size:.43rem;letter-spacing:.06em;color:#5a6b7c;text-transform:uppercase}
.card h3{font-size:.84rem;line-height:1.2;margin:.2rem 0 .15rem;font-weight:700}
.card p{margin:0;font-size:.6rem;line-height:1.4;color:var(--muted);padding-right:1rem}
.card .go{position:absolute;right:.7rem;bottom:.7rem;font-size:.8rem;color:var(--navy)}

/* Werte */
.values{background:var(--ice-2);height:3.4rem}
.values .wrap{height:100%;display:grid;grid-template-columns:repeat(3,1fr);align-items:center}
.val{display:flex;gap:.55rem;align-items:center;padding:0 .8rem;border-left:1px solid #bfd3e6;height:1.9rem}
.val:first-child{border-left:0;padding-left:.2rem}
.val .ico{font-size:1.3rem;color:var(--navy)}
.val b{display:block;font-family:var(--serif);font-size:.72rem;color:var(--navy)}
.val span{font-size:.54rem;line-height:1.3;display:block;color:var(--muted)}

/* Touren */
.tours{padding:.85rem 0 .9rem;background:#fff}
.tours .more{font-size:.72rem;color:var(--blue);display:flex;gap:.4rem;align-items:center;font-weight:500;margin-top:.3rem}
.tcard{border:1px solid #e1e8ef;border-radius:.2rem;overflow:hidden;position:relative;display:block;background:#fff}
.tcard img{width:100%;height:5.2rem;object-fit:cover}
.tcard .tx{padding:.45rem .7rem .55rem}
.tcard h3{font-family:var(--serif);font-size:.82rem;margin-bottom:.12rem;font-weight:600}
.tcard p{margin:0;font-size:.58rem;color:var(--muted)}
.tag{display:inline-flex;align-items:center;gap:.3rem;margin-top:.3rem;font-size:.52rem;color:var(--blue);background:#e8f2fc;padding:.1rem .4rem;border-radius:.2rem}
.tcard .go{position:absolute;right:.7rem;bottom:.6rem;font-size:.8rem}

/* Hotel */
.hotel{background:linear-gradient(90deg,#e3f1fc 0%,#e3f1fc 30%,#d4e6f6 100%);position:relative;height:10rem;overflow:hidden}
.hotel .wrap{display:grid;grid-template-columns:36% 36% 28%;height:100%;align-items:center;max-width:none;padding:0}
.hotel .tx{padding-left:3.5rem;white-space:normal;position:relative;z-index:2}
.hotel h2{font-size:1.38rem;line-height:1.1;font-weight:600}
.hotel p{font-size:.6rem;line-height:1.4;color:#3a4e63;max-width:15rem;margin:.4rem 0 .5rem}
.hotel .lnk{font-size:.7rem;color:var(--blue);font-weight:500;display:flex;gap:.4rem;align-items:center}
.hotel .pic{height:100%;margin:0 0 0 -2rem;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28%,#000 100%)}
.hotel .pic img{width:100%;height:100%;object-fit:cover}
.hotel .panel{background:#e9f3fc;height:100%;padding:.45rem 3.3rem 0 1.6rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.hotel .panel small{position:absolute;right:.5rem;top:.35rem;font-size:.42rem;color:#4b5f73}
.hotel .panel .logo{justify-content:center}
.hotel .panel .logo b{font-size:.8rem}.hotel .panel .logo svg{width:1.9rem}
.hotel .panel h3{font-size:1.05rem;margin:.25rem 0 .1rem;font-weight:600}
.hotel .panel p{font-size:.52rem;margin:.1rem 0 .6rem;text-align:center}

/* Bücher */
.books{background:var(--navy);color:#fff;height:10rem;overflow:hidden;position:relative}
.books .bg{position:absolute;inset:0;background:url("assets/img/books-bg.jpg") center/cover;opacity:.0}
.books .wrap{height:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;max-width:none;padding:0;position:relative}
.books .pic{height:100%;overflow:hidden}
.books .pic img{height:100%;width:100%;object-fit:cover;object-position:left center;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.books .tx{padding:0 3rem 0 .3rem}
.books h2{color:#fff;font-size:1.65rem;line-height:1.12;font-weight:600}
.books .btns{display:flex;gap:.6rem;flex-wrap:wrap}.books p{font-size:.64rem;line-height:1.45;color:#dbe6f0;margin:.6rem 0 .85rem;max-width:20rem}

/* Newsletter */
.news{background:#fff;height:3.4rem;border-bottom:1px solid #eef2f6}
.news .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;max-width:none;padding-left:3.5rem;padding-right:3.3rem}
.news .l{display:flex;gap:.9rem;align-items:center}
.news .l .ico{font-size:1.5rem;color:var(--navy)}
.news b{font-family:var(--serif);font-size:.95rem;color:var(--navy);display:block;font-weight:600}
.news span{font-size:.64rem;color:var(--muted)}

/* Footer */
.site-footer{background:var(--navy-2);color:#fff;height:4.4rem}
.site-footer .wrap{height:100%;max-width:none;padding-left:3.5rem;padding-right:3.4rem;display:grid;grid-template-columns:19.5rem 1fr;align-items:center}
.f-logo b{font-family:var(--serif);font-size:1.2rem;font-weight:600;color:#fff}
.f-logo b i{font-style:normal;color:#4da3f0}
.f-logo small{display:block;font-size:.4rem;letter-spacing:.2em;color:#cfe0ef;margin-top:.15rem}
.f-cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:3.2rem;font-size:.48rem;line-height:1.7;position:relative}
.f-cols h4{margin:0 0 .15rem;font-size:.52rem;font-weight:600}
.f-cols a{display:block;color:#cdddea}
.f-cols .two.r2{grid-template-rows:repeat(2,auto)}
.f-cols .two{display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:0 2rem}
.f-soc{display:flex;gap:.6rem;font-size:.8rem;margin-top:.25rem}
.sep{border-left:1px solid rgba(255,255,255,.2)}

/* Mobil */
@media (max-width:760px){
  html{font-size:16px}
  .wrap,.hero .wrap,.site-header .wrap,.news .wrap,.site-footer .wrap{padding-left:1.1rem!important;padding-right:1.1rem!important}
  .site-header{height:3.4rem}
  .main-nav{display:none;position:absolute;top:3.4rem;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:1rem}
  .main-nav.open{display:block}.main-nav ul{flex-direction:column;gap:.9rem}.main-nav a{font-size:.95rem}
  .nav-toggle{display:block;background:none;border:0;font-size:1.3rem;color:var(--navy)}
  .hdr-ico{display:none}
  .hero{min-height:26rem}.hero h1{font-size:2.1rem}.hero p{font-size:1rem}
  .hero{background-size:cover;background-position:62% 0}
  .hero::before{background:linear-gradient(180deg,rgba(8,24,41,.05) 0%,rgba(8,24,41,.1) 30%,rgba(8,24,41,.93) 58%,#0a1d31 100%)}
  .hero .btns{flex-wrap:wrap}.btn{height:2.5rem;font-size:.9rem}
  .finder{flex-direction:column;height:auto;padding:1rem 1.1rem;gap:.6rem}
  .finder .sel,.finder .btn{width:100%;height:2.5rem;font-size:.9rem}
  .sec-head{flex-direction:column;gap:.8rem}.sec-head h2,.hotel h2{font-size:1.7rem}.sec-head p{font-size:.95rem}
  .chips{flex-wrap:wrap}.chip{font-size:.8rem;padding:.35rem .9rem}
  .cards{grid-template-columns:1fr}.card img{height:11rem}.card h3{font-size:1.2rem}.card p,.card .kick{font-size:.9rem}
  .values{height:auto;padding:1rem 0}.values .wrap{grid-template-columns:1fr;gap:1rem}.val{border-left:0;padding:0}.val b{font-size:1rem}.val span{font-size:.85rem}
  .tcard img{height:9rem}.tcard h3{font-size:1.1rem}.tcard p{font-size:.9rem}.tag{font-size:.8rem}
  .hotel{height:auto}.hotel .wrap{grid-template-columns:1fr}.hotel .tx{padding:1.4rem 1.1rem}.hotel p{font-size:.95rem;max-width:none}.hotel .lnk{font-size:1rem}
  .hotel .pic{height:11rem;margin:0}.hotel .panel{padding:1.4rem 1.1rem}.hotel .panel p{font-size:.85rem}.hotel .panel h3{font-size:1.4rem}
  .books{height:auto}.books .wrap{grid-template-columns:1fr}.books .pic{height:13rem}.books .tx{padding:1.4rem 1.1rem}.books h2{font-size:1.7rem}.books .btns{display:flex;gap:.6rem;flex-wrap:wrap}.books p{font-size:.95rem}
  .news{height:auto;padding:1.1rem 0}.news .wrap{flex-direction:column;align-items:flex-start;gap:.9rem}.news b{font-size:1.1rem}.news span{font-size:.85rem}
  .site-footer{height:auto;padding:1.4rem 0}.site-footer .wrap{grid-template-columns:1fr;gap:1.2rem}.f-cols{grid-template-columns:1fr;gap:1rem;font-size:.9rem}.f-cols h4{font-size:1rem}.f-soc{font-size:1.3rem}.f-cols .two.r2{grid-template-rows:repeat(2,auto)}
.f-cols .two,.f-cols .two.r2{grid-template-columns:1fr 1fr;grid-auto-flow:row;grid-template-rows:none}.sep{border:0;padding-left:0!important}
}

/* Beitrag (Reisegeschichte) */
.ms-art-head{background:var(--ice);padding:1.4rem 0 1.1rem;border-bottom:1px solid #e1ebf4}
.ms-art-head .kick{font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);font-weight:600}
.ms-art-head h1{font-size:2.2rem;line-height:1.12;margin-top:.3rem;font-weight:600;max-width:44rem}
.ms-article{padding:1.4rem 0 2rem}
.ms-body{max-width:38rem;margin:0 auto;padding:0 1.1rem;font-size:.82rem;line-height:1.7;color:#1b2f45}
.ms-body p{margin:0 0 .9rem}
.ms-body h2{font-size:1.25rem;margin:1.6rem 0 .5rem;font-weight:600}
.ms-body h3{font-size:.95rem;margin:0 0 .25rem}
.ms-byline{font-size:.62rem;color:var(--muted);letter-spacing:.02em}
.ms-lead{font-family:var(--serif);font-size:1.02rem!important;line-height:1.55;color:var(--navy)}
.ms-fig{margin:1.1rem 0}
.ms-fig img{width:100%;height:auto;border-radius:.2rem;display:block}
.ms-fig figcaption{font-size:.58rem;line-height:1.45;color:var(--muted);padding:.4rem .1rem 0}
.ms-wide{margin-left:-4rem;margin-right:-4rem}
.ms-gallery{display:grid;gap:.7rem;margin:1.1rem 0}
.ms-gallery .ms-fig{margin:0}
.ms-g2{grid-template-columns:1fr 1fr;margin-left:-3rem;margin-right:-3rem}
.ms-g3{grid-template-columns:repeat(3,1fr);margin-left:-3rem;margin-right:-3rem}
.ms-g4{grid-template-columns:repeat(4,1fr);margin-left:-3rem;margin-right:-3rem}
.ms-g4 .ms-gh{grid-column:1/-1;margin:.4rem 0 0}
.ms-gallery img{aspect-ratio:4/3;object-fit:cover}
.ms-note{background:var(--ice);border-left:3px solid var(--blue);padding:.6rem .8rem;font-size:.7rem;margin:1rem 0;border-radius:.1rem}
.ms-map{max-width:9rem;float:right;margin:0 0 .8rem 1rem}
.ms-tips{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.8rem;clear:both}
.ms-tip{background:var(--ice);border:1px solid #e1ebf4;border-radius:.2rem;padding:.7rem .85rem}
.ms-tip p,.ms-tip ul{margin:0;font-size:.68rem;line-height:1.55}
.ms-tip ul{padding-left:1rem}
.ms-credit{font-size:.62rem;color:var(--muted);margin-top:1.4rem}
@media (max-width:760px){
  .hero .wrap{flex-direction:column;align-items:flex-start;padding-left:1.1rem!important;padding-right:1.1rem!important}
  .hero{min-height:0;padding:11.5rem 0 1.8rem}
  .hero-cover{width:62%;align-self:center;margin:1.2rem 0 0}
  .ms-art-head h1{font-size:1.7rem}
  .ms-body{font-size:1rem}.ms-lead{font-size:1.1rem!important}.ms-fig figcaption{font-size:.8rem}
  .ms-wide,.ms-g2,.ms-g3,.ms-g4{margin-left:0;margin-right:0}
  .ms-g2,.ms-g3,.ms-g4{grid-template-columns:1fr 1fr}
  .ms-tips{grid-template-columns:1fr}.ms-tip p,.ms-tip ul{font-size:.9rem}.ms-note{font-size:.9rem}
  .ms-map{max-width:6rem}
}

.ms-narrow{max-width:17rem;margin-left:auto;margin-right:auto}
.ms-g4 figcaption{display:none}
.ms-hotel-link{color:var(--blue);text-decoration:underline;text-underline-offset:2px}.ms-aff{color:var(--muted)}
.ms-aff-note{margin:.6rem 0 0!important;font-size:.58rem!important;color:var(--muted);line-height:1.4}
@media(max-width:760px){.ms-aff-note{font-size:.78rem!important}}