/* === ReachNova Shared Styles ===
   Quelle: index.html – exakt übernommen
   Enthält: Variablen, Container, Buttons, Skip Nav, Header, Mobile Menu, Footer, Back-to-Top
   ============================================================ */

/* --- CSS VARIABLES --- */
:root {
  --rn-primary: #18b8f0;
  --rn-primary-dark: #0f8cb8;
  --rn-text-main: #0b1220;
  --rn-text-body: #475467;
  --rn-surface-alt: #f8faff;
  --rn-border: #eaecf0;
  --rn-header-height: 80px;
  --rn-max-width: 1240px;
  --rn-gutter: 24px;
  --rn-radius-xl: 20px;
  --rn-radius-lg: 14px;
  --rn-shadow-sm: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --rn-shadow-md: 0 4px 12px -2px rgba(16,24,40,0.1), 0 2px 6px -2px rgba(16,24,40,0.06);
}

/* --- LAYOUT --- */
.rn-container { max-width: var(--rn-max-width); margin: 0 auto; padding: 0 var(--rn-gutter); width: 100%; }
/* Header and footer always use full 1240px regardless of page-level --rn-max-width overrides */
.rn-header .rn-container,
.rn-main-footer .rn-container { max-width: 1240px; }

/* --- BUTTONS --- */
.rn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 50px; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none !important; gap: 8px; border: 1px solid transparent;
  white-space: nowrap; font-family: 'Red Hat Display', sans-serif;
}
.rn-btn-primary { background: var(--rn-primary); color: #fff; box-shadow: 0 4px 16px rgba(24,184,240,0.35); }
.rn-btn-primary:hover { background: var(--rn-primary-dark); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(24,184,240,0.45); color: #fff; }
.rn-btn-sm { padding: 10px 20px; font-size: 0.9rem; }
/* Verhindert dass Seiten-eigene "a { color: ... }" Regeln den Button-Text überschreiben */
a.rn-btn-primary, a.rn-btn-primary:visited { color: #fff; }
a.rn-btn-primary:hover { color: #fff; }

/* --- SKIP NAVIGATION --- */
.rn-skip-nav {
  position: absolute; top: -100%; left: 0;
  padding: 12px 24px; background: var(--rn-primary); color: #fff;
  font-weight: 700; font-size: 1rem; font-family: 'Red Hat Display', sans-serif;
  z-index: 999999; border-radius: 0 0 8px 0;
  text-decoration: none; transition: top 0.2s;
}
.rn-skip-nav:focus { top: 0; outline: 3px solid #fff; outline-offset: -3px; }

/* --- HEADER (exakt aus index.html) --- */
.rn-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  height: var(--rn-header-height);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(234, 236, 240, 0.6);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  display: flex; align-items: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.rn-header.rn-header-hidden { transform: translateY(-100%); }
.rn-header-inner { display: flex; justify-content: space-between; align-items: center; }
.rn-header-logo img { height: 40px; width: auto; display: block; }
.rn-nav-desktop { display: none; gap: 36px; }
.rn-nav-desktop a { font-weight: 600; font-size: 0.95rem; color: var(--rn-text-body); transition: color 0.2s ease; text-decoration: none; }
.rn-nav-desktop a:hover { color: var(--rn-text-main); }
.rn-nav-desktop a[aria-current="page"] { color: var(--rn-primary); font-weight: 700; }
.rn-header-actions { display: flex; align-items: center; gap: 16px; }
.rn-burger {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 24px; height: 18px; cursor: pointer; padding: 0; border: none;
  background: transparent !important; outline: none !important;
}
.rn-burger span { width: 100%; height: 2px; background: var(--rn-text-main); transition: 0.3s; border-radius: 2px; pointer-events: none; }

/* --- MOBILE MENU (exakt aus index.html) --- */
.rn-mobile-menu {
  position: fixed; top: var(--rn-header-height); left: 0; width: 100%; height: 0;
  background: rgba(255,255,255,0.98); backdrop-filter: blur(10px);
  overflow: hidden; transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 999; border-bottom: 1px solid var(--rn-border);
}
.rn-mobile-menu.is-active { height: calc(100vh - var(--rn-header-height)); overflow-y: auto; }
.rn-mobile-links { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 32px; min-height: 100%; }
.rn-mobile-links a:not(.rn-btn) { font-size: 1.5rem; font-weight: 700; color: var(--rn-text-main); text-decoration: none; }
.rn-mobile-links .rn-btn { font-size: 1rem; font-weight: 700; }
.rn-mobile-links .rn-btn-primary { color: #fff; }
.rn-header-btn-desktop { display: none; }
@media(min-width: 992px) {
  .rn-burger { display: none; }
  .rn-nav-desktop { display: flex; }
  .rn-mobile-menu { display: none; }
  .rn-header-btn-desktop { display: inline-flex; }
}

/* --- FOOTER (exakt aus index.html) --- */
.rn-main-footer { background-color: #ffffff; border-top: 1px solid var(--rn-border); padding: 88px 0 44px; color: var(--rn-text-body); }
.rn-footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 64px; }
@media(min-width: 768px) { .rn-footer-grid { grid-template-columns: 1fr 1fr; align-items: start; } .rn-footer-right { text-align: right; } }
.rn-footer-logo img { height: 40px; width: auto; margin-bottom: 24px; }
.rn-footer-desc { max-width: 300px; font-size: 1rem; line-height: 1.65; margin-bottom: 0; color: var(--rn-text-body); }
.rn-footer-links { display: flex; gap: 32px; flex-wrap: wrap; }
@media(min-width: 768px) { .rn-footer-links { justify-content: flex-end; } }
.rn-footer-links a { color: var(--rn-text-body); font-weight: 600; font-size: 0.97rem; transition: color 0.2s; text-decoration: none; }
.rn-footer-links a:hover { color: var(--rn-primary); }
.rn-footer-bottom { padding-top: 32px; border-top: 1px solid var(--rn-border); display: flex; flex-direction: column; gap: 16px; align-items: center; text-align: center; font-size: 0.88rem; color: #98a2b3; }
@media(min-width: 768px) { .rn-footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } }
@media(max-width: 768px) { .rn-footer-grid { grid-template-columns: 1fr !important; text-align: center !important; } .rn-footer-right { text-align: center !important; } .rn-footer-brand p { margin: 0 auto !important; } .rn-footer-links { justify-content: center !important; } .rn-footer-logo img { margin: 0 auto 24px auto !important; display: block; } .rn-footer-bottom { flex-direction: column !important; gap: 16px; text-align: center !important; } }

/* --- BACK TO TOP (exakt aus index.html) --- */
.rn-back-to-top { position: fixed; bottom: 32px; right: 32px; width: 48px; height: 48px; border-radius: 50%; background: var(--rn-primary, #18b8f0); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(24,184,240,0.35); opacity: 0; transform: translateY(16px); transition: opacity 0.3s, transform 0.3s, background 0.2s, box-shadow 0.2s; z-index: 998; }
.rn-back-to-top.visible { opacity: 1; transform: translateY(0); }
.rn-back-to-top:hover { background: #0ea5d4; transform: translateY(-4px); box-shadow: 0 8px 24px rgba(24,184,240,0.45); }