/* =====================================================================
   AIDLINE – site.css
   Gilt auf allen Seiten: Reset, Marken-Font, Navigation, mobiles Menü.
   Seitenspezifisches CSS liegt in css/pages/<seite>.css und wird NACH
   dieser Datei geladen, darf also alles hier überschreiben.
   ===================================================================== */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; background:#0B0B0D; }
body{ background:#0B0B0D; color:#fff; font-family:'Archivo',system-ui,sans-serif; }
::selection{ background:#CA2B2F; color:#fff; }


@keyframes ecgblip{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* ---------------------------------------------------------------------
   Top-Navigation
   Auf Unterseiten immer mit dunklem Hintergrund. Auf der Startseite
   (body.page-home) startet sie transparent über dem Hero-Video und
   bekommt per JS die Klasse .is-scrolled.
   --------------------------------------------------------------------- */
.topnav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:15px clamp(20px,5vw,64px);
  background:rgba(11,11,13,.82);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .4s ease, border-color .4s ease;
}
body.page-home .topnav{ padding:18px clamp(20px,5vw,64px); background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom-color:transparent; }
body.page-home .topnav.is-scrolled{ background:rgba(11,11,13,.82); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-bottom-color:rgba(255,255,255,.08); }

.topnav-logo{ display:flex; align-items:center; text-decoration:none; }
.topnav-logo img{ height:24px; width:auto; display:block; }
body.page-home .topnav-logo img{ height:26px; }

.topnav-links{ display:flex; gap:26px; align-items:center; }
.topnav-links a{
  position:relative; white-space:nowrap;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  color:#D8D8DC; text-decoration:none; transition:color .2s;
}
.topnav-links a:hover, .topnav-links a[aria-current="page"]{ color:#fff; }
.topnav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1.5px; background:#CA2B2F;
  transform:scaleX(0); transform-origin:left center; transition:transform .32s cubic-bezier(.22,.61,.36,1);
}
.topnav-links a:hover::after, .topnav-links a[aria-current="page"]::after{ transform:scaleX(1); }

.topnav-right{ display:flex; align-items:center; gap:14px; }

.topnav-notruf{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; color:#9A9A9E;
  border:1px solid rgba(255,255,255,.14); border-radius:100px; padding:7px 13px;
}
.blip{ width:7px; height:7px; border-radius:50%; background:#CA2B2F; display:inline-block; animation:ecgblip 1.6s ease-in-out infinite; }

.topnav-shop{
  display:inline-flex; align-items:center; gap:9px;
  background:#CA2B2F; color:#fff; font-size:13.5px; font-weight:700; letter-spacing:.02em;
  text-decoration:none; padding:11px 20px; border-radius:100px;
  transition:background .25s, transform .25s;
}
.topnav-shop:hover{ background:#E03A3E; color:#fff; transform:translateY(-1px); }

.burger{
  display:none; width:44px; height:44px;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:12px;
  cursor:pointer; padding:0;
}
.burger-line{ display:block; width:18px; height:2px; background:#fff; border-radius:2px; transition:transform .28s ease, opacity .2s ease; }
.burger.is-open .burger-line:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open .burger-line:nth-child(2){ opacity:0; }
.burger.is-open .burger-line:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------------
   Mobiles Vollbild-Menü
   --------------------------------------------------------------------- */
.mobile-menu{
  position:fixed; inset:0; z-index:99;
  background:rgba(8,8,10,.98);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  opacity:0; transition:opacity .3s ease;
}
.mobile-menu[hidden]{ display:none; }
.mobile-menu.is-open{ opacity:1; }
.mobile-menu-pattern{ position:absolute; inset:0; opacity:.16; pointer-events:none; }
.mobile-menu-pattern img{ position:absolute; right:-30%; top:-8%; width:95%; }
.mobile-menu > a{
  position:relative; font-weight:800; font-size:clamp(28px,8vw,38px); text-transform:uppercase;
  letter-spacing:-0.01em; color:#fff; text-decoration:none; padding:9px;
}
.mobile-menu-notruf{
  position:relative; display:flex; align-items:center; gap:9px; margin-top:20px;
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.12em; color:#E06A6E;
}
.mobile-menu-notruf .blip{ width:8px; height:8px; }
.mobile-menu > a.mobile-menu-shop{
  margin-top:18px; display:inline-flex; align-items:center; gap:9px;
  background:#CA2B2F; color:#fff; font-size:16px; font-weight:700; text-transform:none; letter-spacing:0;
  padding:15px 32px; border-radius:100px;
}
body.menu-open{ overflow:hidden; }

/* ---------------------------------------------------------------------
   Responsiv
   --------------------------------------------------------------------- */
@media (max-width:860px){
  .topnav-links, .topnav-notruf{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:760px){
  .topnav, body.page-home .topnav{ padding-top:11px; padding-bottom:11px; }
  .topnav-logo img, body.page-home .topnav-logo img{ height:22px; }
  .burger{ width:40px; height:40px; }
  .topnav-shop{ font-size:12.5px; padding:9px 15px; }
}
@media (prefers-reduced-motion: reduce){
  .blip{ animation:none; }
  .topnav, .mobile-menu, .burger-line, .topnav-links a::after{ transition:none; }
}

/* Sichtbarer Tastaturfokus */
.topnav a:focus-visible, .burger:focus-visible, .mobile-menu a:focus-visible{
  outline:2px solid #E06A6E; outline-offset:3px; border-radius:6px;
}

/* ---------------------------------------------------------------------
   Footer (templates/_footer.html, auf allen Seiten gleich)
   --------------------------------------------------------------------- */
.site-footer{ position:relative; z-index:1; background:#08080A; color:#fff; padding:clamp(60px,8vh,96px) clamp(20px,5vw,64px) 40px; }
.footer-inner{ max-width:1280px; margin:0 auto; }
.footer-grid{ display:grid; grid-template-columns:minmax(240px,1.4fr) repeat(5,minmax(0,1fr)); gap:40px 32px; padding-bottom:54px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand img{ height:30px; width:auto; margin-bottom:22px; display:block; }
.footer-brand p{ font-size:15px; line-height:1.6; color:#A8A8AC; max-width:340px; }
.footer-notruf{ display:flex; align-items:center; gap:9px; margin-top:22px; font-family:'JetBrains Mono',monospace; font-size:12.5px; color:#fff; }
.footer-notruf .blip{ width:8px; height:8px; }
.footer-notruf b{ color:#E06A6E; font-weight:400; }
.footer-shop{ display:inline-flex; align-items:center; margin-top:22px; background:#CA2B2F; color:#fff; font-size:13.5px; font-weight:700; text-decoration:none; padding:11px 20px; border-radius:100px; transition:background .25s, transform .25s; }
.footer-shop:hover{ background:#E03A3E; transform:translateY(-1px); }
.footer-col{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.footer-head{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; color:#7A7A7E; text-transform:uppercase; margin-bottom:6px; }
.footer-col a{ font-size:14.5px; color:#C8C8CC; text-decoration:none; transition:color .2s; }
.footer-col a:hover{ color:#fff; }
.footer-recycling{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(18px,2.6vw,30px); padding:30px 0 6px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-recycling > div{ flex-shrink:0; }
.footer-recycling .footer-head{ margin-bottom:16px; }
.footer-recycling img{ height:84px; width:auto; display:block; }
.footer-recycling p{ flex:1; min-width:280px; align-self:flex-end; font-size:14px; line-height:1.7; color:#A8A8AC; margin:0 0 8px; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding-top:26px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#7A7A7E; }
.footer-bottom a{ color:#7A7A7E; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.footer-bottom a:hover{ color:#fff; }
@media (max-width:1100px){
  .footer-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .site-footer{ padding-top:46px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px 16px; padding-bottom:30px; }
  .footer-col a{ font-size:14px; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-bottom{ justify-content:center; text-align:center; gap:6px 18px; padding-top:22px; }
}
@media (max-width:340px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------------------------------------------------------------------
   Partner-Karten (templates/_partners.html) – dunkel (Standard) und hell (.light)
   --------------------------------------------------------------------- */
.partner-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); gap:clamp(16px,2.5vw,26px); }
.partner-card{ display:flex; gap:22px; align-items:flex-start; background:#0E0E11; border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:22px; color:inherit; text-decoration:none; transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1), border-color .3s ease; }
a.partner-card:hover{ border-color:rgba(202,43,47,.5); }
.partner-logo{ flex:0 0 clamp(170px,17vw,220px); height:96px; background:#fff; border-radius:12px; display:flex; align-items:center; justify-content:center; padding:12px 16px; }
.partner-logo img{ max-width:100%; max-height:100%; width:auto; height:auto; display:block; }
.partner-text{ min-width:0; }
.partner-text b{ display:block; font-size:18px; font-weight:800; letter-spacing:-0.01em; color:#fff; }
.partner-text p{ font-size:14.5px; line-height:1.6; color:#A8A8AC; margin:8px 0 10px; }
.partner-text span{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#7A7A7E; }
.partner-grid.light .partner-card{ background:#fff; border-color:#ECE9E5; }
.partner-grid.light .partner-logo{ background:#F4F2EF; }
.partner-grid.light .partner-text b{ color:#0B0B0D; }
.partner-grid.light .partner-text p{ color:#55555A; }
.partner-grid.light .partner-text span{ color:#9A9A9E; }
@media (max-width:560px){
  .partner-card{ flex-direction:column; gap:16px; }
  .partner-logo{ flex-basis:auto; width:100%; height:84px; }
}

/* ---- Fehlerseite (templates/404.html) ---- */
.error-page{ min-height:70vh; display:flex; flex-direction:column; justify-content:center; max-width:1280px; margin:0 auto; padding:clamp(120px,18vh,200px) clamp(20px,5vw,64px) clamp(60px,8vh,100px); color:#fff; }
.error-page .eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.2em; color:#E06A6E; text-transform:uppercase; margin-bottom:16px; }
.error-page h1{ font-family:'Ethnocentric','Archivo',sans-serif; font-size:clamp(30px,5vw,64px); line-height:1.08; text-transform:uppercase; margin:0; }
.error-page p{ font-size:16px; color:#A8A8AC; margin:18px 0 28px; max-width:520px; }
.error-links{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-red, .btn-line{ display:inline-flex; align-items:center; padding:12px 22px; border-radius:100px; font-size:14.5px; font-weight:700; text-decoration:none; transition:background .25s, border-color .25s; }
.btn-red{ background:#CA2B2F; color:#fff; } .btn-red:hover{ background:#E03A3E; }
.btn-line{ border:1px solid rgba(255,255,255,.25); color:#fff; } .btn-line:hover{ border-color:#fff; }