/* ==========================================================================
   Roadessa – zentrales Stylesheet
   Das Design wird NUR hier gepflegt. Alle Seiten laden diese Datei über
   partials/head.html.

   Aufbau
    1. Tokens      Farben, Schriften, Abstände (:root) – hier ändern, wenn sich das Design ändert
    2. Basis       Reset, Typografie, Fokus
    3. Bänder      Farbwelten Creme / Marineblau (setzen die Variablen für Text, Linien, Akzent)
    4. Header      Logo + Navigation (Markup: partials/header.html)
    5. Footer      (Markup: partials/footer.html)
    6. Hero        Kopfband jeder Seite
    7. Straße      Trenner zwischen den Bändern (.road)
    8. Bausteine   Titel, Links, Buttons, Linienlisten, Teaser, Fakten
    9. Seiten      Startseite, Ratgeber, Artikel, Vorlagen, Fahrtenbuch, Radio
   10. Formulare   Bestellung, Kontakt
   11. Rechtstexte Impressum, Datenschutz, AGB, Widerruf
   12. Bewegung    Einblenden beim Scrollen, prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* Farben – Marke */
  --blue:#001837;              /* Marken-Marine = Hintergrund des Logos (roadessa-logo.jpg), damit das Logo nahtlos im Header sitzt */
  --blue-deep:#00122b;
  --blue-glow:#0a2b50;
  --orange:#BF511E;            /* Logo-Orange (aus roadessa-logo.jpg gemessen); weiß darauf ≈ 4,8:1 */
  --orange-hover:#A3441A;
  --orange-on-dark:#DC7540;    /* Orange als Text/Linie auf Marineblau (≈ 4,9:1) */
  --orange-text:#A94718;       /* Orange als kleiner Text auf Creme (≈ 5:1, auch über dem Papierkorn) */
  --cream:#F4EFE6;
  --ink:#1B2430;

  /* Farben – Text und Linien */
  --muted:#5b6472;             /* Nebentext auf Creme (≥ 4,5:1) */
  --muted-on-dark:#aebccb;     /* Nebentext auf Marineblau */
  --nav-link:#b4c0cd;
  --footer-text:#9fb0c2;
  --line:rgba(0,24,55,.16);
  --line-dark:rgba(244,239,230,.2);

  /* Farben – Formulare */
  --field-bg:#fdfbf7;
  --field-border:#8c8579;      /* ≥ 3:1 gegen Creme (Rand von Bedienelementen) */
  --error:#9c2f24;
  --error-bg:#fbeae7;
  --error-border:#f0c7bd;
  --success:#2b6b37;
  --success-bg:#e9f3ea;
  --success-border:#c3e0c7;

  /* Papierkorn auf Creme-Bändern */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .15 0 0 0 0 .25 0 0 0 .07 -.012'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Schriften */
  --font-head:'Playfair Display',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --weight-head:500;

  /* Abstände und Breiten */
  --gutter:20px;               /* Seitenrand */
  --band-top:72px;             /* Innenabstand der Bänder */
  --band-bottom:100px;
  --wrap:820px;                /* Standard-Inhaltsbreite */
  --wrap-wide:900px;
  --wrap-text:700px;           /* Lesetexte (Artikel, Rechtstexte) */
  --road-height:90px;          /* Höhe der Straßen-Trenner */
  --radius:2px;

  /* Standardwerte für Elemente außerhalb von Bändern (Bänder überschreiben sie, Abschnitt 3) */
  --fg:var(--ink);
  --fg-muted:var(--muted);
  --heading:var(--blue);
  --rule:var(--line);
  --accent:var(--orange);       /* Linien, Unterstreichungen */
  --accent-text:var(--orange-text); /* Orange als Text (Ziffern, Zeilen-Titel) */
  --focus:var(--orange);
}
@media (max-width:600px){
  :root{
    --band-top:56px;
    --band-bottom:80px;
    --road-height:60px;
  }
}


/* ==========================================================================
   2. BASIS
   ========================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--orange);color:#fff;}
h1,h2,h3{
  font-family:var(--font-head);
  font-weight:var(--weight-head);
  letter-spacing:.02em;
  text-wrap:balance;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}


/* ==========================================================================
   3. BÄNDER – setzen die Farbwelt für alles, was darin liegt
   ========================================================================== */
.band{padding:var(--band-top) var(--gutter) var(--band-bottom);}
.band--cream{
  background:var(--cream) var(--grain);
  --fg:var(--ink);
  --fg-muted:var(--muted);
  --heading:var(--blue);
  --rule:var(--line);
  --accent:var(--orange);
  --accent-text:var(--orange-text);
  --focus:var(--orange);
  color:var(--fg);
}
.band--blue,
.hero-intro{
  background:var(--blue);
  --fg:var(--cream);
  --fg-muted:var(--muted-on-dark);
  --heading:var(--cream);
  --rule:var(--line-dark);
  --accent:var(--orange-on-dark);
  --accent-text:var(--orange-on-dark);
  --focus:var(--orange-on-dark);
  color:var(--fg);
}
.wrap{max-width:var(--wrap);margin:0 auto;}
.wrap--wide{max-width:var(--wrap-wide);}
.wrap--text{max-width:var(--wrap-text);}
.wrap--form{max-width:620px;margin:0 auto;}
.band--compact{padding-top:56px;padding-bottom:72px;}


/* ==========================================================================
   4. HEADER + NAVIGATION  (Logo und Markup bleiben in partials/header.html)
   ========================================================================== */
header.hero-header{
  --logo-h:clamp(230px,36vw,310px);   /* Höhe des Logo-Bildes; Ränder werden unten weggeschnitten */
  background:var(--blue);
  color:var(--cream);
  padding:clamp(20px,4vw,36px) 0 0;
  text-align:center;
  --focus:var(--orange-on-dark);
}
/* Das Logo-Bild hat viel leeren Rand in genau der Hintergrundfarbe des Headers.
   Der Ausschnitt zeigt nur Motiv + Schriftzug großzügig, ohne das Bild selbst zu verändern. */
header.hero-header a.logo-link{
  display:block;overflow:hidden;
  height:calc(var(--logo-h) * .60);
}
header.hero-header img.hero-logo{
  height:var(--logo-h);width:auto;max-width:none;
  margin:calc(var(--logo-h) * -.144) auto 0;display:block;
}
nav.sub-nav{
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px 34px;padding:26px var(--gutter) 30px;margin-top:10px;
}
/* feine Haarlinie, zu den Seiten auslaufend */
nav.sub-nav::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(720px,88%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,239,230,.3),transparent);
}
nav.sub-nav a{
  position:relative;padding-bottom:4px;
  color:var(--nav-link);text-decoration:none;
  font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:color .3s;
}
nav.sub-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--orange-on-dark);transition:width .4s ease;
}
nav.sub-nav a:hover,
nav.sub-nav a.active{color:var(--cream);}
nav.sub-nav a:hover::after,
nav.sub-nav a.active::after{width:100%;}


/* ==========================================================================
   5. FOOTER  (Markup in partials/footer.html)
   ========================================================================== */
footer{
  background:var(--blue);color:var(--footer-text);text-align:center;
  padding:56px var(--gutter) 52px;font-size:.8rem;letter-spacing:.04em;line-height:2.1;
  --focus:var(--orange-on-dark);
}
footer a{
  color:var(--cream);text-decoration:none;
  border-bottom:1px solid var(--line-dark);
  transition:border-color .3s,color .3s;
}
footer a:hover{border-bottom-color:var(--orange-on-dark);}


/* ==========================================================================
   6. HERO – Kopfband jeder Seite (h1 + Untertitel)
   ========================================================================== */
.hero-intro{
  background:radial-gradient(ellipse 70% 120% at 50% 0%,var(--blue-glow) 0%,var(--blue) 72%);
  text-align:center;
  padding:84px var(--gutter) 100px;
}
.hero-intro h1{
  font-size:clamp(1.7rem,4.5vw,2.3rem);color:#fff;
  max-width:640px;margin:0 auto 22px;line-height:1.3;
}
.hero-intro p.hero-sub{
  max-width:540px;margin:0 auto;color:var(--fg-muted);font-size:1.05rem;letter-spacing:.03em;
}
.hero-intro p.hero-sub::after,
.hero-intro .meta-line::after{
  content:"";display:block;width:48px;height:1px;background:var(--accent);margin:36px auto 0;
}
/* Unterseiten: etwas niedriger als die Startseite */
.hero-intro--page{padding:60px var(--gutter) 76px;}
.hero-intro--page h1{margin-bottom:18px;}
/* Artikel: längere Titel, Breadcrumb und Datum im Kopfband */
.hero-intro--article{padding:48px var(--gutter) 72px;}
.hero-intro--article h1{font-size:clamp(1.5rem,4vw,2rem);max-width:760px;margin-bottom:16px;}
.hero-intro .breadcrumb{
  margin:0 0 28px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
}
.hero-intro .breadcrumb a{
  color:var(--nav-link);text-decoration:none;
  padding-bottom:3px;border-bottom:1px solid var(--line-dark);
  transition:color .3s,border-color .3s;
}
.hero-intro .breadcrumb a:hover{color:var(--cream);border-bottom-color:var(--orange-on-dark);}
.hero-intro .meta-line{
  margin:0 auto;font-size:.8rem;letter-spacing:.06em;color:var(--fg-muted);
}
/* Produktbild im Kopfband (Fahrtenbuch) */
.hero-intro .product-showcase{
  margin:52px auto 0;display:flex;flex-direction:column;align-items:center;gap:28px;
}


/* ==========================================================================
   7. STRASSEN-TRENNER (Motiv aus dem Logo)
   Markup:  <div class="road road--on-blue [flip]" aria-hidden="true">
              <svg class="road-fill" viewBox="0 0 1440 100" preserveAspectRatio="none"><use href="#road-fill" class="fill"/></svg>
              <svg class="road-line" viewBox="0 0 1440 100" preserveAspectRatio="none"><use href="#road-line" class="line" transform="translate(0,-12)"/></svg>
            </div>
   --on-blue  = liegt über einem blauen Band, Fläche ist creme  (Blau → Creme)
   --on-cream = liegt über einem cremefarbenen Band, Fläche ist blau (Creme → Blau)
   flip       = gespiegelt: die Linie zeichnet sich von rechts nach links
   Die Kurve und die Striche stehen in partials/road-defs.html (Striche werden wie im
   Logo zum „Horizont“ hin dünner und kürzer).
   Die Linie zeichnet sich beim Scrollen ein und löst sich nach oben hin wieder auf.
   assets/js/road.js setzt dafür --in (0 → 1, Einzeichnen) und --out (0 → 1, Auflösen).
   Ohne JavaScript oder bei prefers-reduced-motion bleibt die Linie komplett sichtbar.
   ========================================================================== */
.road{display:block;line-height:0;position:relative;}
.road svg{display:block;width:100%;height:var(--road-height);}
.road svg.road-line{position:absolute;left:0;top:0;z-index:1;}
/* Papierkorn auch über dem Trenner, damit die Creme-Fläche ohne sichtbare Kante in das Band übergeht */
.road::after{content:"";position:absolute;inset:0;background:var(--grain);pointer-events:none;}
.road--on-blue{background:var(--blue);}
.road--on-blue .fill{fill:var(--cream);}
.road--on-cream{background:var(--cream);}
.road--on-cream .fill{fill:var(--blue);}
.road .line{
  fill:none;stroke:var(--orange);stroke-linecap:round;opacity:.92;
}
.road--on-blue .line{stroke:var(--orange-on-dark);}
.road.flip svg{transform:scaleX(-1);}
/* Scroll-Animation: sichtbar ist nur der Teil zwischen „links“ (--out) und „rechts“ (--in) */
.road-anim .road svg.road-line{
  clip-path:inset(-12px calc((1 - var(--in,1)) * 100%) -12px calc(var(--out,0) * 100%));
  opacity:min(1,calc(var(--in,1) * 30),calc((1 - var(--out,0)) * 30));
  transition:clip-path .25s ease-out,opacity .25s ease-out;
}


/* ==========================================================================
   8. BAUSTEINE
   ========================================================================== */

/* Abschnittstitel */
h2.section-title{
  font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--heading);margin:0 0 56px;text-align:center;
}
h2.section-title::after{
  content:"";display:block;width:36px;height:1px;background:var(--accent);margin:20px auto 0;
}

/* Links mit wachsender Unterlinie (Karten, Teaser, Listen) */
a.card-link,
.ratgeber-all a,
.article-card a.read-more{
  display:inline-block;color:var(--heading);text-decoration:none;
  font-size:.86rem;font-weight:500;letter-spacing:.08em;
  padding-bottom:5px;
  background-image:linear-gradient(var(--accent),var(--accent)),linear-gradient(var(--rule),var(--rule));
  background-repeat:no-repeat;background-position:left bottom;
  background-size:0% 1px,100% 1px;
  transition:background-size .5s ease;
}
a.card-link:hover,
.ratgeber-all a:hover,
.article-card a.read-more:hover{background-size:100% 1px,100% 1px;}

/* Fließtext-Links (Artikel, Rechtstexte, Hinweise) */
.prose a,
.legal a,
.alt-order a,
.app-hint a,
.note a,
.feed-link a,
.contact-card a{
  color:var(--heading);
  text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-thickness .2s;
}
.prose a:hover,
.legal a:hover,
.alt-order a:hover,
.app-hint a:hover,
.note a:hover,
.feed-link a:hover,
.contact-card a:hover{text-decoration-thickness:2px;}

/* Button (Download, Bestellen, Senden) */
.cta{
  display:inline-block;
  background:var(--orange);color:#fff;text-decoration:none;
  font-family:var(--font-body);font-size:.8rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:15px 30px;border:0;border-radius:var(--radius);
  cursor:pointer;transition:background-color .3s;
}
.cta:hover{background:var(--orange-hover);}
.cta:disabled{opacity:.6;cursor:not-allowed;}
.band--blue .cta:focus-visible{outline-offset:4px;}

/* Linienliste: Einträge getrennt durch feine Linien, optional nummeriert */
.line-list > *{border-top:1px solid var(--rule);}

/* Fakten-Zeilen (Format, Preis, Lieferzeit …) */
ul.facts{list-style:none;padding:0;margin:28px 0 0;}
ul.facts li{
  padding:12px 0;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:16px;font-size:.95rem;
}
ul.facts li span:first-child{color:var(--fg-muted);}
ul.facts li span:last-child{font-weight:600;text-align:right;}

/* Status-Marke (z. B. „Demnächst verfügbar“) */
.status-badge{
  display:inline-block;margin-top:8px;padding:10px 22px;
  border:1px solid var(--accent);border-radius:var(--radius);
  color:var(--heading);font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}


/* ==========================================================================
   9. SEITEN
   ========================================================================== */

/* ----- Startseite: Über Roadessa ----- */
.about-heading{text-align:center;margin-bottom:40px;}
.about-heading img{max-width:230px;width:100%;height:auto;display:block;margin:0 auto 20px;}
.about-heading .claim{
  font-family:var(--font-body);font-style:normal;
  font-size:.74rem;letter-spacing:.3em;text-transform:uppercase;color:var(--heading);margin:0;
}
.about-card{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:48px 4px;text-align:center;
}
.about-card p{max-width:600px;margin:0 auto 18px;}
.about-card p:last-child{margin-bottom:0;}
.about-card .lead{font-weight:500;color:var(--heading);}
.about-card .closing{
  font-family:var(--font-head);font-style:italic;
  color:var(--heading);font-size:1.25rem;margin-top:30px;
}

/* ----- Startseite: Angebot (Karten 01–04) ----- */
.offer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:48px 64px;counter-reset:offer;}
@media (max-width:600px){.offer-grid{grid-template-columns:1fr;gap:36px;}}
.offer-card{
  border-top:1px solid var(--rule);padding:26px 2px 4px;
  display:flex;flex-direction:column;
}
/* Nummerierung 01/02/03 per CSS-Counter – gilt auch für die Ratgeber-Teaser */
.offer-card::before,
.ratgeber-teaser::before,
.article-card::before,
.vorlage-card::before{
  font-family:var(--font-head);font-size:.9rem;letter-spacing:.16em;
  color:var(--accent-text);display:block;margin-bottom:14px;
}
.offer-card::before{counter-increment:offer;content:counter(offer,decimal-leading-zero);}
.offer-card h3{font-size:1.3rem;color:var(--heading);margin:0 0 12px;}
.offer-card p{margin:0 0 22px;color:var(--fg-muted);font-size:.95rem;flex-grow:1;}

/* ----- Ratgeber-Teaser (Startseite, erzeugt von build.js) ----- */
#ratgeber-aktuell{counter-reset:art;}
.ratgeber-teaser{border-top:1px solid var(--rule);padding:28px 2px;margin:0;}
.ratgeber-teaser::before{counter-increment:art;content:counter(art,decimal-leading-zero);}
.ratgeber-teaser .meta{font-size:.78rem;letter-spacing:.06em;color:var(--fg-muted);margin:0 0 8px;}
.ratgeber-teaser h3{font-size:1.2rem;color:var(--heading);margin:0 0 10px;}
.ratgeber-all{text-align:center;margin-top:40px;border-top:1px solid var(--rule);padding-top:36px;}
.offer-card,
.ratgeber-teaser,
.article-card{transition:border-color .4s ease;}
.offer-card:hover,
.ratgeber-teaser:hover,
.article-card:hover{border-top-color:var(--accent);}

/* ----- Ratgeber-Übersicht ----- */
/* RSS-Hinweis: bewusst dezent am Ende der Liste */
.feed-link{font-size:.74rem;letter-spacing:.06em;margin:56px 0 0;padding-top:24px;border-top:1px solid var(--rule);text-align:center;}
.feed-link a{color:var(--fg-muted);}
.feed-link a:hover{color:var(--heading);}
.filters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:48px;}
.filter-btn{
  background:transparent;color:var(--heading);
  border:1px solid var(--field-border);border-radius:999px;
  font-family:var(--font-body);font-size:.74rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  padding:9px 18px;cursor:pointer;
  transition:border-color .3s,background-color .3s,color .3s;
}
.filter-btn:hover{border-color:var(--orange);}
.filter-btn.active{background:var(--blue);border-color:var(--blue);color:var(--cream);}
#article-list{counter-reset:art;}
.article-card{border-top:1px solid var(--rule);padding:28px 2px;}
.article-card::before{counter-increment:art;content:counter(art,decimal-leading-zero);}
.article-card .card-meta{font-size:.78rem;letter-spacing:.06em;color:var(--fg-muted);margin:0 0 8px;}
.article-card h2{font-size:1.2rem;color:var(--heading);margin:0 0 10px;}
.article-card p.teaser{margin:0 0 14px;}
.no-results{color:var(--fg-muted);font-size:.95rem;display:none;text-align:center;}
.load-more-row{text-align:center;margin-top:24px;}

/* ----- Artikel ----- */
.prose h2{font-size:1.3rem;color:var(--heading);margin:44px 0 14px;}
.prose h2:first-child{margin-top:0;}
.prose p{margin:0 0 16px;}
.prose ul{margin:0 0 16px;padding-left:22px;}
.prose li{margin-bottom:8px;}
.prose li::marker{color:var(--accent);}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.95rem;}
.prose th,
.prose td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--rule);vertical-align:top;}
.prose th{color:var(--heading);font-weight:600;border-bottom-color:var(--field-border);}
.hinweis-box{
  margin:28px 0;padding:18px 0 18px 22px;
  border-left:1px solid var(--accent);
  font-size:.92rem;color:var(--fg-muted);
}
.product-note{
  margin-top:44px;padding-top:26px;border-top:1px solid var(--rule);
  font-size:.95rem;color:var(--fg-muted);
}
.prevnext{display:flex;justify-content:space-between;gap:32px;margin-top:56px;}
.prevnext a{
  flex:1;border-top:1px solid var(--rule);padding:18px 2px 0;
  text-decoration:none;color:var(--ink);font-size:.9rem;
  transition:border-color .4s;
}
.prevnext a:hover{border-top-color:var(--orange);}
.prevnext .label{
  display:block;color:var(--fg-muted);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;
}
.prevnext .title{font-family:var(--font-head);font-size:1.05rem;color:var(--heading);line-height:1.4;}
.prevnext .next{text-align:right;}
@media (max-width:560px){.prevnext{flex-direction:column;gap:20px;}.prevnext .next{text-align:left;}}

/* ----- Vorlagen ----- */
main.numbered{counter-reset:vorlage;}
.vorlage-card::before{counter-increment:vorlage;content:counter(vorlage,decimal-leading-zero);}
.vorlage-card h2{font-size:1.5rem;color:var(--heading);margin:0 0 6px;}
.vorlage-subtitle{
  color:var(--accent-text);font-size:.78rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 26px;
}
.vorlage-text p{margin:0 0 14px;}
.vorlage-card .cta{margin-top:28px;}
.app-hint{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:.9rem;color:var(--fg-muted);
}
.legal-note{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:22px 4px;font-size:.85rem;color:var(--fg-muted);text-align:center;
}

/* ----- Fahrtenbuch ----- */
.product-showcase img{
  max-width:260px;width:100%;height:auto;border-radius:3px;
  box-shadow:0 18px 40px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.3);
}
.description p{margin:0 0 14px;}
.example-section{margin-top:48px;}
.example-section img{width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--radius);display:block;}
.example-caption{font-size:.85rem;color:var(--fg-muted);margin-top:12px;}
.product-card{text-align:left;}
.price{font-family:var(--font-head);font-size:2.4rem;color:var(--accent-text);margin:0;line-height:1.2;}
.price small{
  font-family:var(--font-body);font-size:.9rem;color:var(--fg-muted);
  display:block;margin-top:6px;font-weight:500;letter-spacing:.02em;
}
.product-card .cta-row{margin:32px 0 0;}
.note{font-size:.9rem;color:var(--fg-muted);margin-top:16px;}
.alt-order{
  margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);
  font-size:.92rem;color:var(--fg-muted);
}
.amazon-box{margin-top:48px;padding:26px 2px 0;border-top:1px solid var(--rule);}
.amazon-box p{margin:0 0 14px;}
.amazon-box a{
  display:inline-block;color:var(--heading);text-decoration:none;
  font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 24px;border:1px solid var(--field-border);border-radius:var(--radius);
  transition:border-color .3s;
}
.band--blue .amazon-box a{border-color:var(--line-dark);}
.amazon-box a:hover{border-color:var(--accent);}
.rechtliches h2{font-size:1.05rem;letter-spacing:.22em;text-transform:uppercase;color:var(--heading);margin:0 0 18px;text-align:center;}
.rechtliches p{text-align:center;margin:0;}
.rechtliches a{
  color:var(--heading);text-decoration:underline;text-decoration-color:var(--accent);
  text-underline-offset:3px;text-decoration-thickness:1px;
}

/* ----- Roadessa Radio ----- */
.radio-photo{margin:0 0 56px;}
.radio-photo img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(0,24,55,.18),0 4px 10px rgba(0,24,55,.12);
}
@media (max-width:600px){
  /* Handy: engerer Ausschnitt, Motiv (rechts im Bild) bleibt sichtbar */
  .radio-photo img{aspect-ratio:4/3;object-position:72% 50%;}
}
.radio-block{padding:0;}
.radio-block + .radio-block{margin-top:52px;}
.radio-block h2{font-size:1.4rem;color:var(--heading);margin:0 0 14px;}
.radio-block p{margin:0 0 14px;}
ul.feature-list{list-style:none;padding:0;margin:0;}
ul.feature-list li{padding:12px 0;border-top:1px solid var(--rule);font-size:.98rem;}
.monetization-box{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:24px 4px;font-size:.95rem;color:var(--fg-muted);text-align:center;margin-bottom:52px;
}
.availability{text-align:center;}
.availability h2{font-size:1.4rem;color:var(--heading);margin:0 0 14px;}


/* ==========================================================================
   10. FORMULARE (Bestellung, Kontakt) – IDs, Klassen und Namen nicht ändern,
       das Seiten-Skript (Turnstile, Versand) greift darauf zu
   ========================================================================== */
.order-card,
.contact-card{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:40px 2px;}
.produkt-badge{
  display:inline-block;margin-bottom:30px;padding:8px 16px;
  border:1px solid var(--rule);border-radius:var(--radius);
  color:var(--heading);font-weight:600;font-size:.88rem;
}
.field{margin-bottom:22px;}
.field-row{display:flex;gap:16px;}
.field-row .field{flex:1;}
@media (max-width:480px){.field-row{flex-direction:column;gap:0;}.field-row .field{flex:none !important;}}
label{
  display:block;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  color:var(--heading);margin-bottom:8px;
}
label .opt{font-weight:500;color:var(--fg-muted);}
input,
textarea{
  width:100%;font-family:var(--font-body);font-size:1rem;
  padding:12px 14px;border:1px solid var(--field-border);border-radius:var(--radius);
  background:var(--field-bg);color:var(--ink);
  transition:border-color .3s;
}
input:hover,
textarea:hover{border-color:var(--blue);}
textarea{resize:vertical;min-height:90px;}
#nachricht{min-height:160px;}
.hint{font-size:.82rem;color:var(--fg-muted);margin-top:6px;}
.error-text{font-size:.82rem;color:var(--error);margin-top:6px;display:none;}
.field.has-error input{border-color:var(--error);}
.field.has-error .error-text{display:block;}
.submit-row{margin-top:30px;}
#turnstile-container{margin-top:22px;min-height:1px;}
.form-msg{margin-top:22px;font-size:.92rem;padding:14px 16px;border-radius:var(--radius);display:none;}
.form-msg.success{display:block;background:var(--success-bg);color:var(--success);border:1px solid var(--success-border);}
.form-msg.error{display:block;background:var(--error-bg);color:var(--error);border:1px solid var(--error-border);}
.form-msg a{color:inherit;font-weight:600;}
.alt-contact{
  margin-top:28px;padding-top:22px;border-top:1px solid var(--rule);
  font-size:.92rem;color:var(--fg-muted);
}


/* ==========================================================================
   11. RECHTSTEXTE – nüchtern: schwarz auf weiß, feine graue Linien, keine Trenner,
       kein Einblenden, serifenlose Zwischenüberschriften
   ========================================================================== */
.band--paper{
  background:#fff;
  --fg:#111;
  --fg-muted:#444;
  --heading:#000;
  --rule:rgba(0,0,0,.16);
  --accent:#000;
  --accent-text:#000;
  --focus:#000;
  --field-border:#767676;
  color:var(--fg);
  padding:64px var(--gutter) 96px;
}
.page-title{
  font-size:clamp(1.8rem,4vw,2.2rem);color:var(--heading);
  text-align:left;line-height:1.3;margin:0 0 40px;
}
.legal-card{border-top:1px solid var(--rule);padding:32px 0 12px;}
.legal-card:last-child{padding-bottom:0;}
.legal h2{
  font-family:var(--font-body);font-weight:600;letter-spacing:0;
  font-size:1.05rem;color:var(--heading);margin:28px 0 8px;
}
.legal h2:first-child{margin-top:0;}
.band--paper .cta{background:#111;}
.band--paper .cta:hover{background:#333;}
.legal h3{
  font-family:var(--font-body);font-weight:600;font-size:1rem;
  letter-spacing:0;color:var(--heading);margin:20px 0 6px;
}
.legal p{margin:0 0 12px;}
.legal ul{margin:0 0 12px;padding-left:20px;}
.legal li{margin-bottom:6px;}
.legal--compact p{margin:0 0 6px;}
.legal .divider{height:1px;background:var(--rule);margin:26px 0;}
.legal .section-title{font-family:var(--font-head);font-size:1.5rem;color:var(--heading);margin:0 0 18px;}
/* Muster-Widerrufsformular */
.muster-form{
  border:1px dashed var(--field-border);border-radius:var(--radius);
  padding:24px;font-size:.92rem;
}
.muster-form p{margin:0 0 10px;}
.muster-line{display:block;border-bottom:1px solid var(--field-border);min-width:220px;height:1.4em;margin:4px 0 16px;}
.muster-note{font-size:.82rem;color:var(--fg-muted);margin-top:16px;}


/* ==========================================================================
   12. BEWEGUNG – Einblenden beim Scrollen (reveal.js) + reduzierte Bewegung
   ========================================================================== */
.js .reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .9s ease,transform .9s ease,border-color .4s ease;
}
.js .reveal.in{opacity:1;transform:none;}
.offer-card:nth-child(2){transition-delay:.08s;}
.offer-card:nth-child(3){transition-delay:.04s;}
.offer-card:nth-child(4){transition-delay:.12s;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  a.card-link,
  .ratgeber-all a,
  .article-card a.read-more,
  nav.sub-nav a::after,
  .cta,
  .filter-btn{transition:none;}
}