/* ===========================
   Euregio.Net – Custom Styles
   =========================== */

:root{
  --brand:#2E3192;          /* Hauptnav */
  --accent:#D22128;         /* Fokus/Highlights */
}

/* Fokus gut sichtbar */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}

/* ------- Header / Nav ------- */
.navbar-brand img{ height:72px; width:auto; }
@media (max-width: 991.98px){
  .navbar-brand img{ height:44px; }
}

/* Utility-Bar Buttons (kompakt, Tap-Target >=44px) */
.btn-touch{
  padding:.42rem .6rem;
  min-height:44px;
  border-radius:.55rem;
  font-size:.95rem;
}
.utility-actions{ gap:.4rem; }

/* Hauptmenü-Farben */
.main-nav{ background:var(--brand); }
.main-nav .nav-link{ color:#fff !important; }
.main-nav .nav-link:hover,
.main-nav .nav-link:focus-visible{ text-decoration:underline; }
.main-nav.is-hidden{ transform: translateY(-110%); transition: transform .2s ease; }

/* Sprachbuttons quadratisch */
.lang-switch .btn{
  width:40px; height:40px; padding:0; line-height:40px; border-radius:.4rem;
}

/* ------- Hero / Cards / Misc ------- */
.hero-soft{
  background: linear-gradient(180deg, rgba(46,49,146,.06), rgba(217,225,255,.15));
  border-radius:18px;
}

/* Karten */
.card.shadow-sm{ box-shadow: 0 6px 24px rgba(18,23,59,.06); }
.card .btn{ border-radius:.6rem; }

/* Tabellen */
.table th, .table td{ vertical-align: middle; }

/* Footer */
.site-footer{ background:#0f1322; }
.site-footer a{ text-decoration:none; }
.site-footer a:hover,
.site-footer a:focus-visible{ text-decoration:underline; }

/* Social 32px */
.btn-icon-32{
  width:32px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px;
}
.socials svg{ width:18px; height:18px; }

/* Floating Buttons (Top/WhatsApp) */
.float-btn{
  position:fixed; right:1rem; z-index:1080;
  border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.18);
  width:48px; height:48px;
  display:none; align-items:center; justify-content:center;
}
.float-btn.is-visible{ display:flex !important; }
#btnTop{ bottom:1rem; }
#btnWA { bottom:4.5rem; background:#25D366; border-color:#25D366; }
#btnWA svg{ width:22px; height:22px; display:block; }

@media (pointer:coarse){
  .float-btn{ right:.75rem; }
}

/* Alerts-Bar (unter Nav, aus config.json) */
.alert-bar{
  background:#fff7e6;
  border-bottom:1px solid rgba(0,0,0,.06);
  font-size:.95rem;
}

/* Optional: globale Unterstreichung für alle Links aktivierbar (A11y Toggle) */
.u-underline a{ text-decoration:underline !important; }

/* Utilities */
.badge-soft{
  background: rgba(46,49,146,.12);
  color: var(--brand);
  border:1px solid rgba(46,49,146,.25);
  border-radius:.5rem;
  padding:.2rem .5rem;
  font-weight:600;
  font-size:.8rem;
}

/* Styleguide Hilfsklassen (aus ursprünglicher Datei) */
.brand-gradient{ background: linear-gradient(135deg, rgba(46,49,146,.08), rgba(210,33,40,.08)); }
.hero{ background: linear-gradient(135deg, rgba(46,49,146,.07), rgba(25,135,84,.07)); }
.demo-block{ border:1px solid #e5e7eb; border-radius:.75rem; padding:1rem; margin-bottom:1rem; }
.swatch{ width:2rem; height:2rem; border-radius:.375rem; display:inline-block; vertical-align:middle; margin-right:.5rem; border:1px solid rgba(0,0,0,.1); }
.callout{ border-left:.4rem solid var(--brand); background:#f5f7ff; padding:1rem; border-radius:.5rem; }
.callout.warn{ border-left-color:#F7A600; background:#fff8e6; }
.callout.ok{ border-left-color:#198754; background:#eefaf2; }
/* 21:9 Ratio */
.ratio-21x9{ --bs-aspect-ratio: 42.857%; }

/* Standard: keine Zusatz-Polsterung */
.btn-touch { padding: 0; min-height: auto; }

/* Nur auf Touch-Geräten echte Tap-Targets ≥44px */
@media (pointer: coarse) {
  .btn-touch { padding: .42rem .6rem; min-height: 44px; border-radius: .55rem; font-size: .95rem; }
}