/* ==========================================================================
   Assecutor Data Service GmbH – modernisiertes Haupt-CSS
   Ersetzt Bootstrap 3.3.6, landing-page.css, db.css und adsg.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

ul,
ol {
  margin-top: 0;
  padding-left: 1.25rem;
}

li + li {
  margin-top: 0.25rem;
}

/* --------------------------------------------------------------------------
   2. Variablen
   -------------------------------------------------------------------------- */
:root {
  /* CI-Farben – unveraendert, gelten fuer Logo, Links und Akzente. */
  --color-primary: #1b12b9;
  --color-primary-dark: #130d8a;
  --color-primary-light: #4a43d6;

  /* Gleicher Farbton (243°), aber von ~82% auf ~62% Saettigung
     zurueckgenommen. Nur fuer grosse Vollflaechen (Hero-/Banner-Fallback),
     wo die volle CI-Saettigung ueber die gesamte Breite unruhig wirkt.
     Die CI-Farbe selbst bleibt fuer alle Akzente erhalten. */
  --color-primary-muted: #2d27a5;

  /* Neutrale Farben */
  --color-text: #333;
  --color-text-muted: #666;
  --color-text-light: #fff;
  --color-bg: #f7f7f8;        /* dezent kühleres Grau gegenüber altem #f8f8f8 */
  --color-bg-alt: #fff;
  --color-border: #e2e3e7;

  /* 0.55 statt 0.45: bei hellen Bildstellen in start.jpg/kontakt.jpg lag der
     Kontrast des weissen Textes sonst unter 4.5:1. */
  --color-overlay: rgba(0, 0, 0, 0.55);

  /* Bewegung – zentral, damit die Reduced-Motion-Regel am Dateiende alles
     mit einem Schalter abraeumen kann. */
  --transition-fast: 140ms ease;
  --transition: 200ms ease;

  /* Typografie */
  --font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --line-height: 1.65;

  /* Spacing-Skala */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 3rem;
  --space-6: 5rem;

  /* Layout */
  --container-max: 1140px;
  --header-height: 4rem;
  --radius: 8px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.14);
}

/* --------------------------------------------------------------------------
   3. Typografie
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/source-sans-pro-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/source-sans-pro-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/source-sans-pro-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: var(--space-3);
  /* verhindert Schusterjungen in laengeren Ueberschriften wie
     "Administration – maximaler Minimalismus" auf mittleren Breiten */
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-xl);
}

p {
  margin: 0 0 var(--space-3);
  max-width: 65ch;
  text-wrap: pretty;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

b,
strong {
  /* Bewusst nicht das volle 700, damit Hervorhebungen im Fliesstext nicht
     lauter/dominanter wirken als im ruhigeren Original-Schriftbild. */
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Layout & Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Erster fokussierbarer Knoten im Dokument: ueberspringt die 8 Haupt- und
   4 Dropdown-Eintraege der Navigation. Liegt ueber dem Sticky-Header
   (z-index 1000), damit er im sichtbaren Zustand nicht verdeckt wird. */
.skip-link {
  position: absolute;
  top: 0;
  left: var(--space-3);
  z-index: 1100;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-light);
  background-color: var(--color-primary);
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  transform: translateY(-110%);
  transition: transform var(--transition-fast);
}

.skip-link:focus-visible {
  transform: translateY(0);
  text-decoration: none;
}

/* Das Sprungziel selbst darf keinen Fokusring zeichnen – tabindex="-1"
   dient nur dazu, den Fokus ueberhaupt dorthin setzen zu koennen. */
#main:focus,
#main:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   5. Header / Navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.navbar__brand {
  display: flex;
  align-items: center;
  height: 100%;
  color: inherit;
}

.navbar__brand img {
  max-height: 2.5rem;
  width: auto;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.4rem;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

/* Balken-Raster: 3px Balkenhoehe + 5px gap = 8px Abstand zur Mitte. Der
   obere/untere Balken wandert also um genau 8px in die Mitte und kippt dort
   zum X, der mittlere blendet aus. */
.nav-toggle--open .nav-toggle__bar:nth-child(2) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle--open .nav-toggle__bar:nth-child(3) {
  opacity: 0;
}

.nav-toggle--open .nav-toggle__bar:nth-child(4) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu a,
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--font-size-base);
  text-decoration: none;
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  position: relative;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.nav-menu a:hover,
.dropdown-toggle:hover {
  color: var(--color-primary);
}

/* Aktiver Abschnitt (per IntersectionObserver in main.js gesetzt). Der
   Balken liegt auf einem Pseudoelement statt auf border-bottom, damit die
   Hoehe der Navigationszeile sich beim Wechsel nicht aendert. */
.nav-menu a.is-active,
.dropdown-toggle.is-active {
  color: var(--color-primary);
}

.nav-menu > li > a.is-active::after,
.dropdown-toggle.is-active::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 0.25rem;
  height: 2px;
  border-radius: 1px;
  background-color: var(--color-primary);
}

.has-dropdown {
  position: relative;
}

.caret {
  font-size: 0.75em;
  line-height: 1;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  margin: var(--space-1) 0 0;
  padding: var(--space-2) 0;
  list-style: none;
  background-color: var(--color-bg-alt);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1001;
}

.dropdown-menu li a {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  font-weight: 400;
  border-radius: 0;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
  background-color: var(--color-bg);
  color: var(--color-primary);
  text-decoration: none;
}

.dropdown-menu--open {
  display: block;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60dvh;
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--color-text-light);
  background-color: var(--color-primary-muted);
  background-image: url('../img/start.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__logo {
  display: inline-block;
  width: min(70%, 480px);
  margin: 0 auto var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.hero h1 {
  /* Abweichung vom Original: dort war diese Zeile mit 28px eine ruhige
     Unterzeile unter dem Logo und damit kleiner als jedes H2 der Seite.
     Die Seite hatte dadurch optisch keine erkennbare Hauptueberschrift.
     Jetzt bewusst als Display-Groesse ueber allen H2 (2rem).
     Rueckbau: font-size: clamp(1.125rem, 2.5vw, 1.75rem) / font-weight: 400. */
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  margin: 0;
}

/* --------------------------------------------------------------------------
   7. Content-Sections
   -------------------------------------------------------------------------- */
.content-section {
  padding: var(--space-5) 0;
}

.content-section--a {
  background-color: var(--color-bg);
}

.content-section--b {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Abweichung vom Original: dort liefen alle zehn Zickzack-Abschnitte mit
   identischem Abstand und identischer Ueberschriftengroesse durch, wodurch
   Produktvorstellung und Funktions-Detailteil optisch verschmolzen.
   Die vier Produkt-Sections bekommen deshalb mehr Luft, das Flaggschiff
   zusaetzlich eine groessere Ueberschrift.
   Rueckbau: diesen Block und die beiden Klassen im Template entfernen. */
.content-section--product {
  padding: var(--space-6) 0;
}

.content-section--lead h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
}

.two-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}

.two-col__text {
  flex: 1 1 55%;
  min-width: 0;
}

.two-col__media {
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.two-col__media a {
  display: block;
}

.two-col__media .img-responsive {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Freistehende Ring-/Logo-Icons (votian, LiV, votian LT, MUH) sollen wie im
   Original randlos und ohne Karten-Optik "schweben" statt in einer Karte
   mit Ecken/Schatten zu stecken - bei transparenten PNGs wirkte das nicht
   gut. */
.two-col__media .img-responsive--plain {
  border-radius: 0;
  box-shadow: none;
}

.eyebrow {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   8. Banner
   -------------------------------------------------------------------------- */
.banner {
  position: relative;
  padding: var(--space-6) 0;
  text-align: center;
  color: var(--color-text-light);
  background-color: var(--color-primary-muted);
  background-image: url('../img/kontakt.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
}

.banner .container {
  position: relative;
  z-index: 1;
}

.banner h2 {
  font-size: var(--font-size-2xl);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.banner a {
  color: var(--color-text-light);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   9. Referenzen
   -------------------------------------------------------------------------- */
.reference-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.reference {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-alt);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.reference__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reference__logo img {
  max-width: 100%;
  max-height: 80px;
  height: auto;
  object-fit: contain;
}

.reference__text {
  flex: 1 1 auto;
}

.reference__text p {
  max-width: none;
  margin-bottom: var(--space-2);
}

.reference__title {
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.reference__meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.fineprint {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 75ch;
}

/* --------------------------------------------------------------------------
   10. DSGVO / Link-Button
   -------------------------------------------------------------------------- */
.link-button {
  display: inline;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.link-button:hover,
.link-button:focus-visible {
  text-decoration: underline;
}

#dsgvo-full[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: var(--space-5) 0 var(--space-4);
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}

.footer-nav li:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-3);
  color: var(--color-border);
}

.footer-nav a {
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--color-primary);
}

.copyright {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

/* --------------------------------------------------------------------------
   12. Fokus-Sichtbarkeit
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.dropdown-toggle:focus-visible,
.nav-toggle:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   13. Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .two-col {
    flex-direction: row;
    align-items: center;
  }

  .two-col--reverse {
    flex-direction: row-reverse;
  }

  /* Der frueher hier stehende 50/50-Override ist entfernt: das Basis-CSS
     legt bereits 55% Text / 45% Medium an, was der Textspalte mehr Gewicht
     gibt. Der Override hat diese Absicht ab 768px wieder eingeebnet. */

  .reference {
    flex-direction: row;
  }

  .reference__logo {
    width: 160px;
    justify-content: flex-start;
  }
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
  }
}

@media (max-width: 899px) {
  .nav-menu {
    display: none;
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) 0;
    background-color: var(--color-bg-alt);
    box-shadow: var(--shadow-lg);
  }

  .nav-menu--open {
    display: flex;
  }

  .nav-menu li {
    width: 100%;
  }

  .nav-menu a,
  .dropdown-toggle {
    display: flex;
    width: 100%;
    padding: var(--space-3);
    border-radius: 0;
  }

  .dropdown-menu {
    position: static;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background-color: var(--color-bg);
  }

  .dropdown-menu li a {
    padding-left: var(--space-5);
  }

  .dropdown-menu--open {
    display: block;
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: 50dvh;
    padding: var(--space-5) 0;
  }

  .hero__logo {
    max-width: 200px;
  }

  .banner {
    padding: var(--space-5) 0;
  }

  .content-section {
    padding: var(--space-4) 0;
  }
}

/* --------------------------------------------------------------------------
   14. Reduzierte Bewegung
   -------------------------------------------------------------------------- */
/* Die Seite ist ein Onepager mit 12 Ankerzielen in Navigation und Fusszeile.
   Das smooth scrolling aus Abschnitt 1 ist damit der haeufigste
   Bewegungsausloeser und fuer Nutzer mit vestibulaeren Beschwerden der
   kritischste. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   15. Dark Mode
   -------------------------------------------------------------------------- */
/* Rein ueber die Tokens aus Abschnitt 2 – es gibt keine hartkodierten
   Farben im Layout, deshalb genuegt das Umdefinieren der Variablen.
   Ausnahme sind die Bildmarken: logo.png, die Produkt-Ringe und die
   Partnerlogos sind dunkelblau auf transparent bzw. weiss hinterlegte JPGs
   und waeren auf dunklem Grund unlesbar. Sie bekommen deshalb eine helle
   Traegerflaeche. Sauberer waeren eigene Hell-Varianten dieser Assets. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e6e7ea;
    --color-text-muted: #a3a7b0;
    --color-bg: #14161c;
    --color-bg-alt: #1b1e26;
    --color-border: #2b2f3a;

    /* Die CI-Farbe #1b12b9 erreicht auf #14161c nur 1.45:1 und ist dort
       unbrauchbar. Gleicher Farbton (243°), aber aufgehellt: ~6.5:1. */
    --color-primary: #948fef;
    --color-primary-dark: #7d77e8;
    --color-primary-light: #b0acf5;

    --color-overlay: rgba(0, 0, 0, 0.62);

    /* Schwarze Schatten sind auf dunklem Grund unsichtbar – deutlich
       kraeftiger, damit Karten und Dropdown ihre Ebene behalten. */
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.65);
  }

  /* --color-primary ist im Dark Mode aufgehellt; weisser Text darauf kaeme
     nur auf 2.8:1. Dunkler Text auf der hellen Flaeche ergibt 6.5:1. */
  .skip-link {
    color: var(--color-bg);
  }

  /* Wortmarke im Header */
  .navbar__brand img {
    padding: 0.25rem 0.5rem;
    background-color: #fff;
    border-radius: var(--radius);
  }

  /* Freistehende Produkt-Ringe (votian, LiV, votian LT, MUH) */
  .two-col__media .img-responsive--plain {
    padding: var(--space-3);
    background-color: #fff;
    border-radius: var(--radius);
  }

  /* Partnerlogos – teils transparente PNGs, teils weiss hinterlegte JPGs.
     Die gemeinsame Traegerflaeche gleicht beide Faelle an. */
  .reference__logo img {
    padding: var(--space-2);
    background-color: #fff;
    border-radius: var(--radius);
  }

  /* Fotos etwas zuruecknehmen, damit sie neben dem dunklen Layout nicht
     als Leuchtflaechen wirken. */
  .two-col__media .img-responsive:not(.img-responsive--plain) {
    filter: brightness(0.88);
  }
}

/* --------------------------------------------------------------------------
   16. Fehlerseite
   -------------------------------------------------------------------------- */
/* Haelt die Fusszeile auf hohen Viewports unten, damit die kurze 404-Seite
   nicht als schmaler Streifen am oberen Bildschirmrand klebt. */
.error-page {
  min-height: 60dvh;
}