/* Ergänzungen für WordPress (Gestaltung selbst steht unverändert in site.css) */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.lb-error { color: #c0392b; font-size: 14px; margin: -8px 0 16px; }
.lb form .btn[disabled] { opacity: .6; cursor: wait; }
.news.done { justify-content: center; padding: 12px 14px; color: #fff; font-weight: 600; }
#dText > *:first-child { margin-top: 0; }
#dText ul, #dText ol { color: var(--muted); max-width: 620px; }

/* Einfache Seiten (Impressum, Datenschutz) */
.prose { max-width: 760px; padding: 56px 0 96px; }
.prose h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 800; margin-bottom: 28px; }
.prose h2 { font-size: 30px; font-weight: 800; margin: 40px 0 12px; }
.prose h3 { font-size: 22px; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--ink-2); }
.prose a { color: var(--accent); text-decoration: underline; }

/* Angemeldet: WordPress-Leiste nicht unter den klebenden Kopf schieben */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 0; } }

/* Handy-Menü (bis 1000 px, dort blendet der Entwurf die Navigation aus) */
.menu-btn { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; cursor: pointer; position: relative; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: transform .25s, opacity .2s, top .25s; }
.menu-btn span:nth-child(1) { top: 15px; } .menu-btn span:nth-child(2) { top: 21px; } .menu-btn span:nth-child(3) { top: 27px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.mnav { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px rgba(13,22,38,.18); max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow: auto; }
.mnav[hidden] { display: none; }
.header .mnav .wrap { display: block; height: auto; padding-top: 8px; padding-bottom: 28px; }
.mnav > .wrap > a { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font: 700 20px/1.2 var(--head); font-stretch: 85%; letter-spacing: -.01em; }
.mnav > .wrap > a i { font-style: normal; font-size: 17px; color: var(--accent); transition: transform .15s; }
.mnav > .wrap > a:active i, .mnav > .wrap > a:hover i { transform: translateX(4px); }
.mnav-actions { display: grid; gap: 10px; margin-top: 24px; }
.header .mnav-actions .btn { display: flex; justify-content: center; padding: 15px; }
.mnav-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.mnav-contact a { background: var(--card); border-radius: 2px; padding: 12px; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; box-shadow: var(--shadow); }
.mnav-contact small { display: block; font: 700 10px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px; }
.mnav-lang { padding: 8px 0 12px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--muted); }
.mnav-lang a, .mnav-lang b { display: inline-block; padding: 4px 6px; }
.mnav-lang { text-align: right; }
.mnav-lang > :last-child { padding-right: 0; }
.mnav-lang b { color: var(--ink); }
body.mnav-open { overflow: hidden; }
@media (max-width: 1000px) { .menu-btn { display: block; } }
@media (min-width: 1001px) { .mnav { display: none !important; } }
@media (max-width: 420px) { .mnav-contact { grid-template-columns: 1fr 1fr; } .mnav-contact a:last-child { grid-column: 1 / -1; } }

/* Startseite: Streifen hinter „Featured rides“ wandern langsam von links nach rechts.
   Kachel = eine Streifenbreite (28 px · √2), dadurch nahtlos */
.featured-bg { background-size: 39.598px 39.598px; animation: ar4u-stripes 4s linear infinite; }
@keyframes ar4u-stripes { from { background-position: 0 0; } to { background-position: 39.598px 0; } }
@media (prefers-reduced-motion: reduce) { .featured-bg { animation: none; } }

/* Handy: mehr Luft zwischen Überschrift und Text im Titelbild (etwa zweieinhalb Zeilen) */
@media (max-width: 760px) {
  .hero .wrap { padding-top: 48px; }
  /* Kurze Fassung des Absatzes mit goldener Linie links */
  .hero p.lead { margin-top: 100px; color: #fff; text-shadow: 0 1px 2px rgba(13,22,38,.45); border-left: 2px solid var(--gold); padding-left: 14px; }
}
.hero .lead-short { display: none; }
@media (max-width: 760px) { .hero .lead-full { display: none; } .hero .lead-short { display: inline; } }

/* Handy: oberste Zeile („Trusted broker …“) ausblenden – Kontakt steht im Menü */
@media (max-width: 600px) { .topbar { display: none; } }

/* „View all rides“: auf schmalen Bildschirmen rechts und zusätzlich unter den Karten */
.more-link { display: none; }
@media (max-width: 1000px) {
  #featured-rides .block-head .link-arrow { align-self: flex-end; }
  .more-link { display: flex; justify-content: flex-end; margin-top: 24px; }
}

/* Porträt bei „Why All Rides For You“: auf schmalen Bildschirmen hochkant statt Querformat, Gesicht im Ausschnitt */
@media (max-width: 1000px) {
  .trust-photo { aspect-ratio: 1 / 1; max-width: 560px; }
  .trust-photo img { object-position: 50% 22%; }
}
@media (max-width: 600px) { .trust-photo { aspect-ratio: 4 / 5; max-width: none; } }
