/* ---------------------------------------------------------------------------
   Gemeinsame Responsive-Korrekturen für alle Marketing-Seiten.
   Wird von jeder Landing-Seite über <link href="/site.css"> geladen und ergänzt
   die seiteneigenen Styles – deshalb bewusst am Ende und ohne !important,
   ausser wo eine Inline-/Pseudo-Element-Regel überschrieben werden muss.
--------------------------------------------------------------------------- */

/* Kein horizontales Scrollen: dekorative Verläufe (hero::before) und die
   Marquee-Laufschrift sind breiter als der Viewport. clip statt hidden,
   damit position:sticky in der Navigation weiter funktioniert. */
html { overflow-x: clip; }
body { overflow-x: clip; }
.hero::before { max-width: 100%; }

/* ---- Mobile Navigation (Markup wird von /menu.js eingehängt) ---- */
.sp-navcb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sp-burger {
  display: none; margin-left: 12px; width: 42px; height: 36px; flex: 0 0 auto;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: #fff; border: 1.5px solid #171717; border-radius: 9px;
  box-shadow: 2px 2px 0 #171717; cursor: pointer; transition: .15s;
}
.sp-burger span { display: block; width: 17px; height: 2px; border-radius: 2px; background: #171717; transition: transform .2s, opacity .15s; }
.sp-navcb:checked ~ .nav-in .sp-burger,
.sp-navcb:checked ~ * .sp-burger { box-shadow: 1px 1px 0 #171717; transform: translate(1px, 1px); }
.sp-navcb:checked ~ * .sp-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sp-navcb:checked ~ * .sp-burger span:nth-child(2) { opacity: 0; }
.sp-navcb:checked ~ * .sp-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.sp-mobmenu { display: none; background: #fff; border-top: 1px solid rgba(23,23,23,.12); padding: 8px 20px 18px; max-height: calc(100vh - 60px); overflow-y: auto; }
.sp-navcb:checked ~ .sp-mobmenu { display: block; }
.sp-mobmenu a {
  display: block; padding: 12px 2px; font-size: 15px; font-weight: 500;
  color: #171717; text-decoration: none; border-bottom: 1px solid rgba(23,23,23,.08);
}
.sp-mobmenu a:last-child { border-bottom: 0; }
.sp-mobmenu a.sp-m-cta {
  margin-top: 14px; padding: 12px; text-align: center; font-weight: 600;
  background: #171717; color: #fff; border: 1.5px solid #171717; border-radius: 10px;
  box-shadow: 3px 3px 0 rgba(23,23,23,.3);
}
.sp-mobmenu a.sp-m-ghost {
  margin-top: 10px; padding: 11px; text-align: center; font-weight: 600;
  border: 1.5px solid #171717; border-radius: 10px; border-bottom: 1.5px solid #171717;
}

@media (max-width: 900px) {
  .sp-burger { display: flex; }
  /* Desktop-Links verschwinden einheitlich ab 900px – die Seiten hatten
     bisher unterschiedliche Breakpoints (860/900/keinen). */
  .nav-links, .nav-in .links { display: none; }
  /* Im Header bleibt nur die Haupt-Aktion – alles andere wandert ins Menü */
  .nav-cta > a:not(:last-child) { display: none; }
  .nav-in { gap: 0; }
  .nav-cta { margin-left: auto; }
}
@media (max-width: 420px) {
  .nav-cta > a:last-child { display: none; }
}

/* ---- Footer: kompakt und ohne Zeilensalat auf kleinen Screens ---- */
@media (max-width: 760px) {
  footer { padding: 26px 0 30px; }
  .foot-in { flex-direction: column; align-items: flex-start; gap: 14px; }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; width: 100%; }
  .foot { gap: 10px 18px; }
  .foot > span[style] { margin-left: 0 !important; width: 100%; }
}
/* Zwei Spalten bleiben auch auf kleinen Telefonen die kompakteste Variante –
   sechs untereinander gestapelte Links machen den Footer unnötig hoch. */
@media (max-width: 420px) {
  .foot-links { gap: 8px 14px; font-size: 13.5px; }
  .foot-in { gap: 12px; }
}