/* ============================================================
   motorrad<region>.de — Regio-Guide, editorial/outdoor.
   Fraunces (Display) + Hanken Grotesk (Body). Papier + Waldgrün
   + Signal-Orange. Strukturiert: Karten, Fact-Boxen, Tabellen,
   Section-Nav. Große Schrift (Zielgruppe 50+).
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --paper:#f5f1e8; --paper-2:#efe9dc; --card:#fffdf8;
  --ink:#1b1f1a; --ink-soft:#3c4138; --muted:#6a6f63; --line:#e2dccd; --line-2:#d3ccba;
  --green:#1f5c3d; --green-d:#16482f; --green-soft:#e4eee5;
  --orange:#d9531e; --orange-d:#bb4414; --orange-soft:#fbe6da;
  --shadow:0 2px 10px rgba(30,40,25,.06); --shadow-h:0 16px 38px rgba(30,40,25,.14);
  --maxw:1140px; --rad:16px;
}
body{background:var(--paper);font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--ink-soft);font-size:19px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,h4{color:var(--ink);font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.1}
strong{color:var(--ink);font-weight:700}

/* ===== Header ===== */
.site-head{position:sticky;top:0;z-index:60;background:rgba(245,241,232,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head-in{max-width:var(--maxw);margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:16px}
.brand{font-family:"Fraunces",serif;font-weight:800;font-size:24px;letter-spacing:-.01em;color:var(--ink);display:inline-flex;align-items:center;gap:10px}
.brand i{color:var(--green)}
.brand span{color:var(--orange)}
.mainnav{margin-left:auto;display:flex;gap:2px;flex-wrap:nowrap}
.mainnav a{font-size:15px;font-weight:600;color:var(--ink-soft);padding:8px 11px;border-radius:999px;white-space:nowrap;transition:.15s}
.mainnav a:hover{background:var(--green-soft);color:var(--green-d)}
.mainnav a.active{background:var(--green);color:#fff}
.navtoggle{display:none;margin-left:auto;background:var(--green);color:#fff;border:0;width:46px;height:46px;border-radius:12px;font-size:20px;cursor:pointer}

/* ===== Hero (Home) ===== */
.hero{position:relative;overflow:hidden;background:#15180f;min-height:clamp(420px,62vh,640px);display:flex;align-items:flex-end}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0}
.hero.tp-right .hero-scrim{background:linear-gradient(90deg,rgba(20,24,14,.10),rgba(20,24,14,.30) 45%,rgba(20,24,14,.78)),linear-gradient(0deg,rgba(20,24,14,.7),transparent 55%)}
.hero.tp-left .hero-scrim{background:linear-gradient(270deg,rgba(20,24,14,.10),rgba(20,24,14,.30) 45%,rgba(20,24,14,.78)),linear-gradient(0deg,rgba(20,24,14,.7),transparent 55%)}
.hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:64px 22px;width:100%;color:#fbfaf5}
.hero-in.right{text-align:right}
.hero-in .kicker{display:inline-block;font-weight:700;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--orange);padding:7px 14px;border-radius:6px}
.hero-in h1{margin:18px 0 0;font-size:clamp(40px,6.6vw,78px);font-weight:800;letter-spacing:-.02em;color:#fff;text-shadow:0 3px 26px rgba(0,0,0,.4)}
.hero-in p{margin:16px 0 0;font-size:21px;max-width:60ch;color:#ece9df;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.hero-in.right p,.hero-in.right .hero-cta,.hero-in.right .hero-stats{margin-left:auto}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-in.right .hero-cta{justify-content:flex-end}
.btn-primary{background:var(--orange);color:#fff;font-weight:700;font-size:17px;padding:14px 24px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;transition:.15s}
.btn-primary:hover{background:var(--orange-d);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:600;font-size:17px;padding:14px 22px;border-radius:999px;display:inline-flex;align-items:center;backdrop-filter:blur(4px);transition:.15s}
.btn-ghost:hover{background:rgba(255,255,255,.24)}
.hero-stats{display:flex;gap:26px;margin-top:26px;font-size:16px;color:#ece9df}
.hero-stats b{font-family:"Fraunces",serif;font-size:26px;color:#fff;margin-right:5px}

/* ===== Page-Hero (Unterseiten) ===== */
.page-hero{background:linear-gradient(125deg,var(--green-d),var(--green) 70%);color:#eef5ee;position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:320px;height:320px;background:radial-gradient(circle,rgba(217,83,30,.5),transparent 65%);pointer-events:none}
.page-hero-in{position:relative;max-width:var(--maxw);margin:0 auto;padding:46px 22px 40px}
.page-hero .crumb{font-size:14px;color:#bcd3c2;margin-bottom:12px}
.page-hero .crumb a{color:#bcd3c2;text-decoration:underline}
.page-hero .crumb i{margin:0 6px;font-size:11px}
.page-hero h1{margin:0;font-size:clamp(32px,5vw,54px);font-weight:800;letter-spacing:-.02em;color:#fff}
.page-hero p{margin:14px 0 0;font-size:20px;max-width:64ch;color:#dcebdd}

/* ===== Section-Nav (sticky Jump-Links) ===== */
.secnav{position:sticky;top:62px;z-index:40;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 4px 14px rgba(30,40,25,.05)}
.secnav-in{max-width:var(--maxw);margin:0 auto;padding:0 14px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin}
.secnav-in a{flex:0 0 auto;font-size:15px;font-weight:600;color:var(--muted);padding:14px 12px;border-bottom:3px solid transparent;white-space:nowrap;transition:.15s}
.secnav-in a:hover{color:var(--green-d);border-color:var(--green)}

/* ===== Layout ===== */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.block{padding:48px 0}
.block.alt{background:var(--paper-2);max-width:none;margin:0 calc(50% - 50vw);padding:48px calc(50vw - 50%)}
.sectitle{font-size:clamp(26px,3.4vw,36px);font-weight:700;margin:0 0 26px;display:flex;align-items:center;gap:12px}
.sectitle i{color:var(--orange);font-size:.82em}

/* ===== Prose ===== */
.prose{font-size:19.5px;line-height:1.72;color:var(--ink-soft)}
.prose p{margin:0 0 16px;max-width:72ch}
.prose.lead p{font-size:21px}
.prose h3{font-family:"Fraunces",serif;font-size:24px;font-weight:600;color:var(--ink);margin:26px 0 10px}
.prose ul{margin:0 0 18px;padding:0;max-width:74ch;list-style:none}
.prose li{position:relative;padding:9px 0 9px 30px;border-bottom:1px solid var(--line)}
.prose li::before{content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--orange);font-size:12px;position:absolute;left:6px;top:13px}
.prose a{color:var(--green-d);text-decoration:underline;text-underline-offset:2px}

/* ===== Sektion-Blöcke (aus Prosa) ===== */
.sec-lead{font-size:21px;line-height:1.6;color:var(--ink);max-width:74ch;margin:8px 0 30px}
.sec{padding:34px 0;border-top:1px solid var(--line);scroll-margin-top:130px}
.sec:first-of-type{border-top:0}
.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.sec-ic{flex:0 0 auto;width:50px;height:50px;border-radius:14px;background:var(--green-soft);color:var(--green-d);display:flex;align-items:center;justify-content:center;font-size:21px}
.sec-h h2{margin:0;font-size:clamp(24px,3vw,32px);font-weight:700}

/* ===== Sehenswürdigkeiten-Karten ===== */
.seegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:18px}
.seecard{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:24px 24px 12px;box-shadow:var(--shadow);transition:.18s}
.seecard:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
.seecard .seeic{display:inline-flex;width:44px;height:44px;border-radius:12px;background:var(--green-soft);color:var(--green-d);align-items:center;justify-content:center;font-size:19px;margin-bottom:10px}
.seecard h3{margin:0 0 6px;font-size:21px;font-weight:600}
.seecard .prose{font-size:17px}
.seecard .prose p{margin:0 0 12px;max-width:none}

/* ===== Topic-Karten (Home) ===== */
.topics{padding:54px 0}
.topicgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.topic{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:26px 22px;display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow);transition:.18s}
.topic:hover{box-shadow:var(--shadow-h);transform:translateY(-4px);border-color:var(--line-2)}
.topic .ic{width:52px;height:52px;border-radius:14px;background:var(--orange-soft);color:var(--orange-d);display:flex;align-items:center;justify-content:center;font-size:22px}
.topic h3{margin:6px 0 0;font-size:22px;font-weight:600}
.topic p{margin:0;font-size:16px;color:var(--muted);line-height:1.5}
.topic .go{margin-top:auto;color:var(--green-d);font-weight:700;font-size:15px;display:inline-flex;align-items:center;gap:7px}
.intro{padding:54px 0 0}

/* ===== Tour-Karten ===== */
.tourgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tourcard{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.18s}
.tourcard:hover{box-shadow:var(--shadow-h);transform:translateY(-4px)}
.tourcard .pic{aspect-ratio:3/2;background:#15180f;overflow:hidden}
.tourcard .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tourcard:hover .pic img{transform:scale(1.06)}
.tourcard .body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px}
.tourcard .meta{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.tourcard .area{color:var(--green-d)}
.tourcard .km{background:var(--orange-soft);color:var(--orange-d);padding:3px 10px;border-radius:6px}
.tourcard h3{margin:0;font-size:21px;font-weight:600;line-height:1.2}
.tourcard p{margin:0;font-size:16px;color:var(--muted);line-height:1.5}

/* ===== Sperrungen-Tabelle ===== */
.sperr-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rad);box-shadow:var(--shadow);background:var(--card)}
table.sperr{width:100%;border-collapse:collapse;min-width:560px}
table.sperr th{background:var(--green);color:#fff;text-align:left;font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em;padding:14px 18px}
table.sperr td{padding:16px 18px;border-top:1px solid var(--line);font-size:17px;vertical-align:top}
table.sperr .st-name{font-weight:700;color:var(--ink)}
.st-badge{display:inline-block;font-size:13px;font-weight:700;padding:5px 11px;border-radius:999px;white-space:nowrap}
.st-badge.st-dauer{background:#eee3d6;color:#8a5a25}
.st-badge.st-temp{background:var(--orange-soft);color:var(--orange-d)}
.sperr-note{margin:14px 4px 0;font-size:14.5px;color:var(--muted)}

/* ===== Hotels ===== */
.hotelgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hotelcard{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow);transition:.18s}
.hotelcard:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
.hotelcard .pic{position:relative;aspect-ratio:16/10;background:#15180f;overflow:hidden}
.hotelcard .pic img{width:100%;height:100%;object-fit:cover}
.hotelcard .body{padding:16px 18px 18px}
.hotelcard .city{font-size:13.5px;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;gap:6px;margin-bottom:5px}
.hotelcard h3{margin:0;font-size:20px;font-weight:600;line-height:1.2}
.hotelcard p{margin:7px 0 0;font-size:15.5px;color:var(--muted);line-height:1.45}
.badge{position:absolute;top:12px;left:12px;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 10px;border-radius:6px;color:#fff}
.badge-rec{background:var(--orange)}
.badge-fewo{background:var(--green)}
.hotelcard.feat{border-color:var(--orange-soft);box-shadow:0 6px 22px rgba(217,83,30,.12)}

/* ===== M&R-Embed ===== */
.embed{margin-top:30px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--green-soft);border:1px solid #cfe1d2;border-left:5px solid var(--green);border-radius:var(--rad);padding:20px 24px}
.embed .t{font-size:17.5px;color:var(--ink-soft)}
.embed a.btn{margin-left:auto;background:var(--green);color:#fff;font-weight:700;padding:13px 22px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap;transition:.15s}
.embed a.btn:hover{background:var(--green-d)}

/* ===== Ads ===== */
.ms-ad{max-width:var(--maxw);margin:0 auto;padding:22px;text-align:center}
.ms-ad .imgimggroup,.ms-ad-ph{min-height:90px;display:flex;align-items:center;justify-content:center}
.ms-ad-ph{color:var(--muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:1px dashed var(--line-2);border-radius:8px}

/* ===== Footer ===== */
.foot{background:var(--green-d);color:#cfe0d3;font-size:16px;margin-top:30px}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:46px 22px 30px;display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:34px}
.foot-brand .logo{font-family:"Fraunces",serif;font-weight:800;font-size:24px;color:#fff;display:flex;align-items:center;gap:9px;margin-bottom:12px}
.foot-brand .logo i{color:var(--orange)}
.foot-brand p{margin:0;line-height:1.6;max-width:42ch}
.foot-brand a{color:#fff;text-decoration:underline}
.mr-badge{display:inline-block;background:#fff;padding:6px 11px;border-radius:8px;margin-top:10px;line-height:0;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.mr-badge img{height:24px;width:auto;display:inline-block}
.mr-badge:hover{box-shadow:0 4px 14px rgba(0,0,0,.28)}
.foot-col h4{color:#fff;font-size:18px;font-weight:600;margin:0 0 13px}
.foot-col a{color:#cfe0d3;display:block;padding:5px 0;transition:.15s}
.foot-col a:hover{color:#fff}
.foot-legal{max-width:var(--maxw);margin:0 auto;padding:16px 22px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13.5px;color:#9bb3a0}
.foot-legal a{color:#fff;text-decoration:underline}

/* ===== Tagesrunden-Karten ===== */
.runden{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:6px}
.rundcard{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--orange);border-radius:var(--rad);padding:22px 24px;box-shadow:var(--shadow);transition:.18s}
.rundcard:hover{box-shadow:var(--shadow-h);transform:translateY(-3px)}
.rundhead{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.rundnum{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--green-d);color:#fff;font-weight:800;font-size:19px;display:flex;align-items:center;justify-content:center}
.rundhead h3{margin:0;font-size:20px;font-weight:600;line-height:1.2}
.rundmeta{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.rundmeta .km,.rundmeta .t{font-size:13.5px;font-weight:700;padding:5px 11px;border-radius:7px;display:inline-flex;align-items:center;gap:6px}
.rundmeta .km{background:var(--orange-soft);color:var(--orange-d)}
.rundmeta .t{background:var(--green-soft);color:var(--green-d)}
.rundcard .prose{font-size:16.5px}
.rundcard .prose p{margin:0;max-width:none}
.rund-notes{margin-top:18px}
.rund-note{background:var(--green-soft);border-left:4px solid var(--green);border-radius:10px;padding:14px 18px;font-size:16px;color:var(--ink-soft);margin-top:10px}
/* Quer-Navi: 3 Karten statt 4 */
.relgrid{grid-template-columns:repeat(3,1fr)}

/* ===== Responsive ===== */
@media (max-width:960px){
  .topicgrid,.relgrid{grid-template-columns:repeat(2,1fr)}
  .tourgrid,.hotelgrid,.runden{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
  .navtoggle{display:block}
  .mainnav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--card);border-bottom:1px solid var(--line);padding:8px 14px 14px;gap:2px}
  body.nav-open .mainnav{display:flex}
  .mainnav a{padding:13px 14px;font-size:18px;border-radius:10px}
  .site-head-in{position:relative}
  .secnav{top:60px}
}
@media (max-width:600px){
  body{font-size:18px}
  .topicgrid,.relgrid,.tourgrid,.hotelgrid,.runden{grid-template-columns:1fr}
  .block.alt{margin:0;padding:40px 0}
  .hero-in.right{text-align:left}
  .hero-in.right p,.hero-in.right .hero-cta,.hero-in.right .hero-stats{margin-left:0}
  .hero-in.right .hero-cta{justify-content:flex-start}
  .embed a.btn{margin-left:0}
  .foot-in{grid-template-columns:1fr;gap:24px}
}