/* RS Shared CSS — Base, Nav, Buttons, Footer
 * Extracted from 1543.css zur Wiederverwendung in allen rs_is_new_page() Pages
 * (Home, Subpages 1958-2029, CPT-Singles report/knowledge/crew)
 * Per-page CSS bleibt für Hero/Section-spezifisches Styling.
 */

/* ── BASE RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#181818;
  --dark:#111;
  --card:#161616;
  --orange:#FE5000;
  --white:#fff;
  --grey:#888;
  --border:rgba(255,255,255,0.08);
  --font-d:'League Gothic','Arial Narrow',sans-serif;
  --font-b:'Raleway',sans-serif;
  --pad-x:48px;
}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--font-b);overflow-x:hidden}
section[id]{scroll-margin-top:112px}

/* ── NAV ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 48px;
  transition:background 0.4s,padding 0.4s,border-color 0.4s;
  border-bottom:1px solid transparent;
}
#nav.scrolled{
  background:rgba(18,18,18,0.94);backdrop-filter:blur(12px);
  padding:16px var(--pad-x);border-color:var(--border);
}
.nav-logo-space{width:64px;height:64px;display:block;flex-shrink:0;cursor:pointer}
.nav-links{display:flex;gap:30px;list-style:none}
.nav-links a{
  display:inline-flex;align-items:center;gap:7px;
  color:rgba(255,255,255,0.7);text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;
  transition:color 0.2s;white-space:nowrap;
}
.nav-links a:hover{color:var(--white)}
.nav-ico{width:15px;height:15px;flex-shrink:0;opacity:.6;transition:opacity .2s}
.nav-links a:hover .nav-ico{opacity:1}
.nav-cluster{display:flex;align-items:center;gap:24px}
.nav-divider{width:1px;height:20px;background:rgba(255,255,255,0.15);flex-shrink:0}
.nav-social{display:flex;align-items:center;gap:14px}
.nav-social a{color:rgba(255,255,255,0.55);display:flex;transition:color 0.2s,transform 0.2s}
.nav-social a:hover{color:var(--white);transform:translateY(-1px)}
.nav-social svg{width:18px;height:18px;display:block;fill:currentColor}

/* ── BUTTONS ── */
.btn-outline{
  border:1px solid rgba(255,255,255,0.3);color:var(--white);text-decoration:none;
  padding:14px 32px;font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  transition:all 0.25s;display:inline-block;
}
.btn-outline:hover{background:var(--white);color:var(--black)}
.btn-primary{
  background:var(--orange);color:var(--white);text-decoration:none;
  padding:14px 32px;font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  transition:all 0.25s;display:inline-block;
}
.btn-primary:hover{background:#d94400;transform:translateY(-1px)}

/* ── FOOTER ── */
footer{background:var(--black);padding:80px 48px 40px;border-top:1px solid var(--border)}
.footer-top{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:80px;
}
.footer-logo{height:36px;margin-left:-26px}
.footer-tagline{font-size:13px;color:var(--grey);margin-top:12px;font-weight:300}
.footer-nav{display:flex;gap:64px}
.footer-nav-col h4{font-size:10px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:var(--grey);margin-bottom:20px}
.footer-nav-col a{display:block;font-size:14px;color:rgba(255,255,255,0.65);text-decoration:none;margin-bottom:10px;transition:color 0.2s}
.footer-nav-col a:hover{color:var(--white)}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:32px;border-top:1px solid var(--border);
}
.footer-bottom p{font-size:12px;color:var(--grey)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  #nav{padding:16px 24px}
  .nav-links{gap:18px}
  .nav-links a{font-size:11px}
  footer{padding:48px 24px 24px}
  .footer-top{flex-direction:column;gap:40px;align-items:stretch;margin-bottom:48px}
  .footer-nav{flex-direction:row;flex-wrap:wrap;gap:24px}
  .footer-nav-col{width:calc(50% - 12px)}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
}

/* ── RS-Tile Erweiterungen (Blog-Hub Tile-Editor, 2026-06-06) ──
   Per-Page CSS (z.B. 1970.css) hat die Basis-Styles für .crew-card / .crew-photo etc.
   Dieses Stylesheet ergänzt die NEUEN Layout-Varianten + die Chip-Tags. */

/* Chip-Tags auf der Kachel */
.rs-tile-tags{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.rs-tile-tags li{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--orange,#ff6b00);background:rgba(255,107,0,.08);border:1px solid rgba(255,107,0,.28);padding:3px 8px;border-radius:2px}

/* Layout: center-photo (zentriertes Foto, Story-Stil) */
.rs-tile--center-photo{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 28px;background:var(--card,#1a1a1a);min-width:0}
.rs-tile--center-photo .rs-tile-center-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.rs-tile--center-photo .rs-tile-eyebrow--center{font-size:.62rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--orange,#ff6b00)}
.rs-tile--center-photo .rs-tile-center-photo{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:0}
.rs-tile--center-photo .rs-tile-center-photo img{width:100%;height:100%;object-fit:cover;display:block}
.rs-tile--center-photo .rs-tile-body--center{display:flex;flex-direction:column;gap:10px;align-items:center;max-width:100%}
.rs-tile--center-photo .rs-tile-title{font-family:'League Gothic',sans-serif;font-size:clamp(28px,3.5vw,42px);letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1.05;margin:0}
.rs-tile--center-photo .rs-tile-meta{font-size:.65rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange,#ff6b00);margin:0}
.rs-tile--center-photo .rs-tile-sub{font-size:.92rem;color:var(--muted,#bbb);line-height:1.65;margin:0;max-width:48ch}

/* Layout: split (Foto + Text nebeneinander) */
.rs-tile--split{display:flex;flex-direction:row;align-items:stretch;background:var(--card,#1a1a1a);overflow:hidden;min-width:0}
.rs-tile--split .rs-tile-photo--split{flex:0 0 45%;position:relative;overflow:hidden}
.rs-tile--split .rs-tile-photo--split img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s,filter .35s;filter:brightness(.85)}
.rs-tile--split:hover .rs-tile-photo--split img{transform:scale(1.04);filter:brightness(1)}
.rs-tile--split .rs-tile-body--split{flex:1 1 55%;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.rs-tile--split .rs-tile-title{font-family:'League Gothic',sans-serif;font-size:clamp(24px,2.8vw,34px);letter-spacing:.04em;text-transform:uppercase;color:#fff;line-height:1.05;margin:0}
.rs-tile--split .rs-tile-meta{font-size:.62rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--orange,#ff6b00);margin:0}
.rs-tile--split .rs-tile-sub{font-size:.86rem;color:var(--muted,#bbb);line-height:1.65;margin:0}

/* Wrapper-Aliase: rs-hub-scroller / rs-hub-grid sind nur Markierung — Basis-Layout kommt
   von den alten .crew-scroller / .crew-grid Klassen, die vom Shortcode mitgesetzt werden. */
.rs-hub-scroller{position:relative}
.rs-hub-grid{display:flex;gap:16px;align-items:stretch}

@media(max-width:768px){
  .rs-tile--split{flex-direction:column}
  .rs-tile--split .rs-tile-photo--split{flex:0 0 auto;aspect-ratio:16/9}
  .rs-tile--center-photo{padding:24px 20px}
}