/* =========================================================
   Steuratech – gemeinsame Styles (alle Seiten)
   Tokens · Basis · Header · Footer · wiederkehrende Elemente

   Referenzbreite des Designs: 1440px.
   --u skaliert Design-Maße unterhalb von 1440px linear
   herunter; darüber bleiben sie in Originalgröße und die
   Inhalte werden zentriert.
   ========================================================= */

/* ---------- Schrift: Funnel Sans, lokal eingebunden (keine Verbindung zu Google) ----------
   Quelle: fonts.google.com/specimen/Funnel+Sans (SIL Open Font License) */
@font-face {
  font-family: "Funnel Sans";
  src: url("../assets/fonts/FunnelSans-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --green-dark: #004939;
  --green-bright: #5dcf00;
  --navy: #1e295d;
  --light: #f5f5f5;
  --panel: #ebedef;
  --card: #84858f;

  --u: min(1px, calc(100vw / 1440));

  /* Seitenränder (Startseite: links 36 / rechts 44) */
  --gl: max(16px, calc(36 * var(--u)));
  --gr: max(16px, calc(44 * var(--u)));
  --edge-l: max(var(--gl), calc((100% - 1440px) / 2 + var(--gl)));
  --edge-r: max(var(--gr), calc((100% - 1440px) / 2 + var(--gr)));

  --fs-128: max(44px, calc(128 * var(--u)));
  --fs-40: max(26px, calc(40 * var(--u)));
  --fs-32: max(22px, calc(32 * var(--u)));
  --fs-30: max(20px, calc(30 * var(--u)));
  --fs-24: max(17px, calc(24 * var(--u)));
  --fs-18: max(15px, calc(18 * var(--u)));
  --fs-16: 16px;
  --fs-15: 15px;

  interpolate-size: allow-keywords; /* weiche Akkordeon-Animation, wo unterstützt */
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* Fläche außerhalb des Inhalts (Bildkanten, Overscroll) in Header-/Footer-Grün,
     damit unter dem Footer keine helle Haarlinie entsteht */
  background: var(--green-dark);
  scroll-behavior: smooth;
  scroll-padding-top: max(90px, calc(79 * var(--u) + 24px));
}

body {
  margin: 0;
  font-family: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  color: var(--navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Drei-Pfeile-Komponente ("dreipfeile/gerade") ---------- */
.three-arrows {
  position: relative;
  display: block;
  flex: none;
  width: max(58px, calc(100.258 * var(--u)));
  aspect-ratio: 100.258 / 46.649;
}
.three-arrows__item {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46.14%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.three-arrows__item:nth-child(1) { left: 0; bottom: 0.84%; }
.three-arrows__item:nth-child(2) { left: 25.93%; top: 0.84%; }
.three-arrows__item:nth-child(3) { left: 53.86%; top: 0.84%; }
.three-arrows__item img {
  width: 70.71%;
  height: 70.71%;
  transform: rotate(135deg);
}
.three-arrows--reverse { transform: scaleX(-1); }

/* Pfeil-Icon oben links im großen Header (Startseite) – etwas kleiner */
.three-arrows--menu {
  width: max(44px, calc(72 * var(--u)));
  margin: calc(6.5 * var(--u)) 0 calc(6.6 * var(--u)); /* Header-Höhe bleibt wie in Figma */
}

/* ---------- Stufenpfeile (Unterseiten-Kopf, Kontaktblöcke) ---------- */
.step-arrows {
  position: relative;
  flex: none;
  width: max(40px, calc(64 * var(--u)));
  aspect-ratio: 1;
}
.step-arrows img {
  position: absolute;
  width: 46.03%;
  height: 46.03%;
  transform: rotate(90deg);
}
.step-arrows img:nth-child(1) { left: 0;      top: 53.97%; }
.step-arrows img:nth-child(2) { left: 26.98%; top: 26.98%; }
.step-arrows img:nth-child(3) { left: 53.97%; top: 0; }

/* ---------- Pfeil-Links ("mehr erfahren", "Kontaktieren Sie uns", …) ----------
   Ruhezustand: nur der Pfeil ist sichtbar.
   Hover / Tastaturfokus: der Pfeil gleitet nach rechts, die Schrift wird
   dahinter sichtbar (Figma-Komponente „Group 97“ → „Group 98“).
   In Tablet- und Phone-Breite (bis 900px) und auf allen Touch-Geräten
   ist der Button immer statisch geöffnet. */
.more-link {
  /* einheitlich für alle Pfeil-Links (Figma-Komponente „mehr erfahren“) */
  --icon-w: 41.663px;   /* Breite des Pfeil-Felds */
  --icon-ml: -10px;     /* Überlappung von Schrift und Pfeil-Feld */
  --slide: .9s cubic-bezier(.22, .8, .24, 1);

  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--icon-w);
  padding-right: calc(var(--icon-w) + var(--icon-ml));
  font-size: var(--fs-18);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}
.more-link > span:first-child {
  transition: clip-path var(--slide), opacity .6s ease;
}
.more-link__icon {
  position: absolute;
  top: 50%;
  left: calc(100% - var(--icon-w));
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-w);
  height: var(--icon-w);
  transform: translateY(-50%);
  transition: left var(--slide);
}
.more-link__icon-inner {
  position: relative;
  width: 29.46px;
  height: 29.46px;
  overflow: hidden;
  transform: rotate(135deg);
}
.more-link__icon-inner img {
  position: absolute;
  left: 3.71px;
  top: 5.47px;
  width: 20.625px;
  height: 20.625px;
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .more-link:not(:hover):not(:focus-visible) .more-link__icon { left: 0; }
  .more-link:not(:hover):not(:focus-visible) > span:first-child {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
}


/* =========================================================
   HEADER
   Zwei Zustände:
   – ausgeklappt (nur Startseite, ganz oben): Pfeil-Icon + großes Logo
   – kompakt (beim Scrollen bzw. auf Unterseiten): kleines Logo, 79px hoch
   ========================================================= */
.site-header {
  --hdr-pt: max(14px, calc(27 * var(--u)));
  --hdr-pb: max(14px, calc(46 * var(--u)));
  --hdr-pl: max(16px, calc(27 * var(--u)), calc((100% - 1440px) / 2 + 27 * var(--u)));

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--green-dark);
  color: var(--light);
  padding: var(--hdr-pt) var(--edge-r) var(--hdr-pb) var(--hdr-pl);
  transition: padding .35s ease;
}
.site-header.is-compact {
  --hdr-pt: max(14px, calc(25 * var(--u)));
  --hdr-pb: max(14px, calc(25 * var(--u)));
  --hdr-pl: max(16px, calc(38 * var(--u)), calc((100% - 1440px) / 2 + 38 * var(--u)));
}
.site-header.no-anim,
.site-header.no-anim * { transition: none !important; }

.site-header__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.is-compact .site-header__bar { align-items: center; }

.site-header__brand {
  display: block;
  flex: none;
  text-decoration: none;
}
.site-header__logo-small {
  display: none;
  width: max(160px, calc(304.328 * var(--u)));
  height: auto;
  aspect-ratio: 1477.02 / 130.9;
}
.is-compact .site-header__brand .three-arrows { display: none; }
.is-compact .site-header__logo-small { display: block; }

.main-nav {
  display: flex;
  gap: calc(35 * var(--u));
  margin-top: calc(12 * var(--u));
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.is-compact .main-nav { margin-top: 0; }
.main-nav a {
  text-decoration: none;
  transition: color .2s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--green-bright); }

.nav-toggle { display: none; }
.main-nav .nav-start { display: none; }   /* „Start“ nur im aufgeklappten Burger-Menü */

/* großes Logo (nur ausgeklappter Header) */
.site-header__logo-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .35s ease;
}
.site-header__logo {
  min-height: 0;
  overflow: hidden;
}
.site-header__logo img {
  width: calc(100% - 10 * var(--u));
  height: auto;
  aspect-ratio: 1477.02 / 130.9;
  margin: calc(28 * var(--u)) 0 0 calc(10 * var(--u));
}
.is-compact .site-header__logo-wrap { grid-template-rows: 0fr; }

/* Platzhalter unter dem fixierten Header – Höhe setzt js/site.js */
.header-spacer { height: var(--header-rest-h, calc(265 * var(--u))); }
body[data-header="compact"] .header-spacer { height: var(--header-rest-h, max(72px, calc(79 * var(--u)))); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  --ft-pl: max(16px, calc(35 * var(--u)), calc((100% - 1440px) / 2 + 35 * var(--u)));
  --ft-pr: max(16px, calc(40 * var(--u)), calc((100% - 1440px) / 2 + 40 * var(--u)));

  position: relative;
  z-index: 1;
  background: #fff;
  color: #000;
  font-size: var(--fs-16);
  font-weight: 500;
  line-height: 1.21;
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 32px;
  min-height: calc(212 * var(--u));
  padding: max(24px, calc(27 * var(--u))) var(--ft-pr) 24px var(--ft-pl);
}

.site-footer p { margin: 0; }

.site-footer address {
  font-style: normal;
}
.site-footer address p + p { margin-top: 1.21em; }
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }

.site-footer__cert {
  justify-self: center;
}
.site-footer__cert img {
  width: max(150px, calc(185.2 * var(--u)));
  height: auto;
  aspect-ratio: 1670 / 738;
  margin: max(16px, calc(31 * var(--u))) 0 0 calc(18 * var(--u));
}

.site-footer__members {
  justify-self: end;
}
.site-footer__members > p { padding-left: calc(16 * var(--u)); }
.footer-logos {
  display: grid;
  grid-template-columns: repeat(2, max(90px, calc(105 * var(--u))));
  column-gap: calc(7.5 * var(--u));
  row-gap: calc(13 * var(--u));
  align-items: start;
  margin: max(12px, calc(18 * var(--u))) 0 0;
  padding: 0;
  list-style: none;
}
.footer-logos img { width: 100%; height: auto; }
.footer-logos .logo-bvmw img { aspect-ratio: 1024 / 390; }
.footer-logos .logo-mbn img { aspect-ratio: 1536 / 586; }
.footer-logos .logo-produktiv { margin-top: calc(17 * var(--u)); }
.footer-logos .logo-produktiv img { aspect-ratio: 434 / 129; }
.footer-logos .logo-vdi img { aspect-ratio: 768 / 477; width: 96.5%; }

.site-footer__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: max(48px, calc(56 * var(--u)));
  padding: 8px var(--ft-pr) 8px var(--ft-pl);
  background: var(--green-dark);
  color: var(--light);
}
.site-footer__bar a:last-child { justify-self: end; }

/* =========================================================
   Tablet / Mobil (Feinschliff folgt mit den Figma-Versionen)
   ========================================================= */
/* Burger-Menü für Phone und Tablet (inkl. iPad quer) */
@media (max-width: 1024px) {
  /* Header: Burger-Menü */
  .site-header__bar { align-items: center; }

  /* Burger-Icon als SVG – in allen Browsern sicher sichtbar */
  .nav-toggle {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--green-bright);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
  }
  .nav-toggle__icon {
    display: block;
    width: 28px;
    height: 28px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: square;
  }
  .nav-toggle__icon--close,
  .nav-open .nav-toggle__icon--open { display: none; }
  .nav-open .nav-toggle__icon--close { display: block; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 8px 16px 20px;
    background: var(--green-dark);
    border-top: 1px solid rgba(245, 245, 245, .15);
    font-size: 20px;
  }
  .is-compact .main-nav { margin: 0; }
  .main-nav a { padding: 12px 0; }
  .nav-open .main-nav { display: flex; }
  .main-nav .nav-start { display: block; }

  .site-header__logo img {
    width: 100%;
    margin: 16px 0 0;
  }
}

@media (max-width: 900px) {
  /* Footer Tablet: Desktop-Aufbau, enger zusammengerückt */
  .site-footer__main { gap: 20px; }
  .site-footer__cert img { margin-left: 0; }
  .site-footer__members > p { padding-left: 0; }
  .footer-logos {
    grid-template-columns: repeat(2, 84px);
    column-gap: 8px;
    row-gap: 10px;
  }
  .site-footer__bar { font-size: 15px; }
}

/* =========================================================
   Phone: Footer nach Phone-Entwurf
   Zeile 1: Adresse | Zertifizierung · Zeile 2: Mitglieder (4 Logos)
   Grüne Leiste: Impressum, Datenschutz, Copyright untereinander
   ========================================================= */
@media (max-width: 600px) {
  /* Header Phone: schmale Leiste mit kleinem Logo (Figma „Menu – Closed“).
     Höhe 44px statt 30px, damit das Menü-Symbol gut mit dem Finger trifft. */
  .site-header,
  .site-header.is-compact {
    --hdr-pt: 0px;
    --hdr-pb: 0px;
    --hdr-pl: 10px;
    padding-right: 4px;
  }
  .site-header__bar { min-height: 44px; }
  .more-link { font-size: 16px; }   /* Pfeil-Links auf dem Handy einheitlich 16px (Figma Phone) */
  .site-header__logo-small { width: 145px; }
  .nav-toggle__icon { width: 24px; height: 24px; }
  .main-nav { padding-left: 10px; padding-right: 10px; }

  .site-footer {
    --ft-pl: max(10px, 2.6vw);
    --ft-pr: max(10px, 2.6vw);
    font-size: 15px;
  }

  .site-footer__main {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "addr cert"
      "mem  mem";
    column-gap: 12px;
    row-gap: 48px;
    min-height: 0;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .site-footer address { grid-area: addr; white-space: nowrap; }
  .site-footer address p:last-child { margin-top: 0; } /* Telefon und Mail direkt untereinander */

  .site-footer__cert { grid-area: cert; justify-self: end; width: min-content; }
  .site-footer__cert .nowrap { white-space: nowrap; }
  .site-footer__cert img {
    width: 100%;
    margin: 14px 0 0;
  }

  .site-footer__members { grid-area: mem; justify-self: stretch; }
  .footer-logos {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
  }
  .footer-logos li { flex: 0 1 auto; }
  .footer-logos .logo-bvmw      { order: 1; width: 19.7%; }
  .footer-logos .logo-produktiv { order: 2; width: 19.5%; margin-top: 0; }
  .footer-logos .logo-vdi       { order: 3; width: 15%; }
  .footer-logos .logo-mbn       { order: 4; width: 18.8%; }
  .footer-logos .logo-vdi img { width: 100%; }

  .site-footer__bar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 18px;
    padding-bottom: 22px;
    font-size: 15px;
  }
  .site-footer__bar > span { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}