/* ==========================================================================
   ECKSTEIN IT – Markenanpassung für Purity III (T3)
   Stand: 17.10.2026
   Wird von Purity III automatisch geladen, sobald die Datei unter
   templates/purity_iii/css/custom.css liegt (tpls/blocks/head.php).
   Farben: Dunkelblau #1A3259 · Akzentblau #2C8BC7 · Weiß #F7F8FB
   Schrift: Archivo Eckstein (SIL OFL 1.1), lokal eingebunden – keine
   externen Schriftdienste, daher keine Datenübertragung an Dritte.
   ========================================================================== */

@font-face {
  font-family: 'Archivo Eckstein';
  src: url('../fonts/archivo-eckstein/ArchivoEckstein-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Eckstein';
  src: url('../fonts/archivo-eckstein/ArchivoEckstein-Bold.woff2') format('woff2');
  font-weight: 650 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --eit-dunkelblau: #1A3259;
  --eit-akzent:     #2C8BC7;
  --eit-weiss:      #F7F8FB;
  --eit-text:       #2B3443;
  --eit-linie:      #DDE3EC;
  --eit-schrift:    'Archivo Eckstein', 'Droid Sans', Arial, sans-serif;
}

/* ---------- Grundschrift und Text ---------- */
body {
  font-family: var(--eit-schrift);
  color: var(--eit-text);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--eit-schrift);
  font-weight: 650;
  color: var(--eit-dunkelblau);
  letter-spacing: 0.005em;
}
/* Startseite: H1 trägt im Beitrag ein Inline-Style "font-weight: normal" */
.item-page h1,
.page-header h1,
.page-header h2 {
  font-weight: 650 !important;
  color: var(--eit-dunkelblau);
}
.page-header {
  border-bottom-color: var(--eit-linie);
}
strong, b { font-weight: 650; }

/* Links: Akzentblau ist laut Markenrichtlinie nicht für Fließtext gedacht
   (Kontrast 3,7:1), daher Dunkelblau mit Akzent-Unterstreichung. */
a {
  color: var(--eit-dunkelblau);
  text-decoration: underline;
  text-decoration-color: var(--eit-akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover,
a:focus {
  color: var(--eit-akzent);
  text-decoration-color: var(--eit-akzent);
}
/* Überschriften-Links (z. B. Leistungen-Kacheln) ohne Unterstreichung */
h1 a, h2 a, h3 a, .page-header a {
  color: var(--eit-dunkelblau);
  text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, .page-header a:hover {
  color: var(--eit-akzent);
  text-decoration: none;
}
/* Leistungen-Kacheln: Link umschließt die Überschrift (<a><h3>) */
.thumbnail > a[href] {
  text-decoration: none;
}
.thumbnail > a[href]:hover > h3,
.thumbnail > a[href]:focus > h3 {
  color: var(--eit-akzent);
}

/* ---------- Kopfzeile: dunkelblaue Leiste mit invertiertem Hauptlogo ---------- */
.navbar-default,
.t3-mainnav {
  background-color: var(--eit-dunkelblau);
  border-color: var(--eit-dunkelblau);
}
.t3-mainnav {
  border-bottom: 0;
  box-shadow: none;
}
.logo-image,
.logo-image > a,
.logo-image > .logo-image > a {
  background: transparent !important;
}
.logo-image > a,
.logo-image > .logo-image > a {
  display: block;
  max-width: none;
  max-height: none;
  padding: 0;
}
.logo-image img.logo-img {
  display: block;
  height: 55px;           /* = Kopfzeilenhöhe; Schutzraum steckt bereits in der Datei */
  width: auto;
  max-width: none;
  padding: 0;
  background: transparent; /* Template setzt sonst img { background:#FFC } */
}

/* Navigation */
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > span {
  color: var(--eit-weiss);
  font-weight: 650;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > span:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > span:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > span,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--eit-weiss);
  background-color: transparent;
  text-decoration: none;
}
@media screen and (min-width: 991px) {
  .navbar-default .navbar-nav > li {
    margin-left: 24px;
  }
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > span:hover,
  .navbar-default .navbar-nav > li > a:focus,
  .navbar-default .navbar-nav > li > span:focus {
    box-shadow: inset 0 -3px 0 rgba(247, 248, 251, 0.35);
  }
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > span,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {
    box-shadow: inset 0 -3px 0 var(--eit-akzent);
  }
}
/* Mobile Navigation */
.navbar-default .navbar-toggle .fa-bars,
.navbar-default .navbar-toggle .icon-bar {
  color: var(--eit-weiss);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background: rgba(247, 248, 251, 0.08);
}
.navbar-default .navbar-toggle:hover .fa-bars,
.navbar-default .navbar-toggle:focus .fa-bars {
  color: var(--eit-akzent);
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form,
.t3-mainnav .t3-navbar-collapse .navbar-nav > li > a {
  border-color: rgba(247, 248, 251, 0.15);
}
@media (max-width: 990px) {
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > span {
    box-shadow: inset 3px 0 0 var(--eit-akzent);
    background: rgba(247, 248, 251, 0.08);
  }
  .logo-image img.logo-img {
    height: 50px;
  }
}

/* ---------- Leistungen-Kacheln und Buttons ---------- */
/* Leistungen: kein Rahmen um die Beiträge, nur der Weiterlesen-Knopf ist umrahmt */
.thumbnail {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.btn-default {
  font-family: var(--eit-schrift);
  color: var(--eit-dunkelblau);
  background-color: #ffffff;
  border-color: var(--eit-dunkelblau);
  border-radius: 0;
  text-decoration: none;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active {
  color: #ffffff;
  background-color: var(--eit-dunkelblau);
  border-color: var(--eit-dunkelblau);
  text-decoration: none;
}
.btn-primary {
  color: #ffffff;
  background-color: var(--eit-dunkelblau);
  border-color: var(--eit-dunkelblau);
  border-radius: 0;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--eit-akzent);
  border-color: var(--eit-akzent);
}

/* ---------- Fußzeile ---------- */
.t3-footer,
.t3-copyright {
  background-color: var(--eit-dunkelblau);
  border-top: 0;
  color: rgba(247, 248, 251, 0.75);
}
.t3-footer a,
.t3-copyright a {
  color: var(--eit-weiss);
  text-decoration-color: var(--eit-akzent);
}
.t3-footer a:hover,
.t3-copyright a:hover {
  color: #ffffff;
}

/* Textmarkierung in Markenfarbe */
::selection {
  background: var(--eit-akzent);
  color: #ffffff;
}

/* ---------- Startseite: Logo-Intro in die Kopfleiste (js/eckstein-intro.js) ---------- */
/* Deckt die Seite sofort ab, bis das Skript übernimmt. Fällt das Skript aus,
   blendet sich die Fläche nach 3 s von selbst aus. */
html.eit-intro::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--eit-dunkelblau);
  animation: eit-intro-notaus 0.4s ease 3s forwards;
}
html.eit-intro.eit-intro-run::before {
  display: none;
}
@keyframes eit-intro-notaus {
  to { opacity: 0; visibility: hidden; }
}
.eit-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 2001;
  cursor: pointer;
}
.eit-intro-flaeche {
  position: absolute;
  inset: 0;
  background: var(--eit-dunkelblau);
  transform-origin: 50% 0;
  will-change: transform;
}
img.eit-intro-bild {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  padding: 0;
  background: transparent;
  transform-origin: 0 0;
  will-change: transform;
}
svg.eit-intro-buehne {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}