/* ==========================================================================
   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;
}

/* ---------- Kunden-Seite (itemid-105): Gestaltung, damit der Beitrag ohne Inline-Formatierung auskommt ---------- */
.itemid-105 .article-content {
  font-size: medium;          /* 16 px statt 14 px Grundschrift */
}
.itemid-105 .article-content table {
  margin: 15px 0;
}
.itemid-105 .article-content table td {
  height: 99px;               /* alle Einträge so hoch wie Mobile Pflegeambulanz: 78 px Logo + 2 × 10 px + 1 px Linie */
  box-sizing: border-box;
  padding: 10px 0;
  vertical-align: middle;
}
.itemid-105 .article-content table td:first-child {
  padding-right: 20px;        /* Abstand Logo – Firmenname */
}
.itemid-105 .article-content table td:last-child {
  font-weight: bold;          /* Firmenname */
}
.itemid-105 .article-content table td img {
  max-height: 78px;           /* Sicherung: zu hohe Logos werden unverzerrt verkleinert */
  object-fit: contain;
}
.itemid-105 .article-content table td:first-child img {
  margin: 0 auto;             /* Logos in ihrer Spalte zentrieren (das Template stellt Bilder als Block dar) */
}

/* ---------- Startseite: Jubiläumszeichen mit Telefonnummer daneben ---------- */
.eit-start {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 1.5em;
}
.article-content .eit-start > img {
  align-self: flex-start;
  flex: none;                     /* feste Größe, auch untereinander auf dem Smartphone */
  width: 225px;
  max-width: 225px;               /* Template setzt Beitragsbilder auf dem Smartphone mit !important auf 100 % */
  height: 225px;
  margin: 0;
}
.eit-kontakt p {
  margin: 0;
}
.eit-kontakt-titel {
  font-weight: 650;
  font-size: 16px;
  color: var(--eit-dunkelblau);
  letter-spacing: 0.02em;
}
a.eit-telefon {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0;
  font-family: var(--eit-schrift);
  font-weight: 650;
  font-size: 40px;
  line-height: 1;
  color: var(--eit-dunkelblau);
  text-decoration: none;
  white-space: nowrap;
}
a.eit-telefon:hover,
a.eit-telefon:focus {
  color: var(--eit-akzent);
  text-decoration: none;
}
.eit-telefon::before {           /* hellblaues Quadrat wie der Stein im Signet, Symbol aus Font Awesome 4.7 */
  content: "\f095";
  font-family: FontAwesome;
  font-weight: normal;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--eit-akzent);
  color: var(--eit-weiss);
  font-size: 30px;
}
.eit-kontakt-text {
  font-size: 16px;
  max-width: 34em;
}
@media (max-width: 767px) {
  .eit-start {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  a.eit-telefon {
    font-size: 30px;
    gap: 14px;
  }
  .eit-telefon::before {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
}
@media (max-width: 359px) {      /* sehr schmale Smartphones */
  a.eit-telefon {
    font-size: 26px;
    gap: 10px;
  }
  .eit-telefon::before {
    width: 38px;
    height: 38px;
    font-size: 21px;
  }
}

/* ---------- Kontakt-Seite (Beitrag mit <div class="eit-kontaktseite">) ---------- */
.eit-kontaktseite {
  font-size: medium;
}
.eit-kontakt-einleitung {
  max-width: 44em;
  margin-bottom: 28px;
}
.eit-kontakt-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.eit-kontakt-karte {               /* Ecklinie aus dem Signet: Rand oben und links */
  border-top: 6px solid var(--eit-dunkelblau);
  border-left: 6px solid var(--eit-dunkelblau);
  background: var(--eit-weiss);
  padding: 22px 26px 24px;
  min-width: 0;
}
.eit-kontakt-karte p {
  margin: 0;
}
.eit-kontakt-karte .eit-kontakt-titel {
  margin-bottom: 12px;
}
.eit-kontakt-karte a.eit-telefon {
  margin: 0;
  font-size: 32px;
  gap: 14px;
}
.eit-kontakt-karte a.eit-telefon::before {
  width: 44px;
  height: 44px;
  font-size: 24px;
}
.eit-kontakt-wert {
  line-height: 1.55;
}
.eit-kontakt-wert a {
  font-size: 20px;
  font-weight: 650;
}
.eit-kontakt-zeiten {
  margin-top: 14px !important;
  font-weight: 650;
  color: var(--eit-dunkelblau);
}
.eit-kontakt-wert + .eit-kontakt-wert {
  margin-top: 6px !important;
}
.eit-kontakt-hinweis {
  margin-top: 10px !important;
  font-size: 14px;
  color: #5A6577;
}
.eit-kontakt-karte .btn {
  margin-top: 16px;
}
.article-content a.btn {          /* Buttons im Beitrag ohne Link-Unterstreichung */
  text-decoration: none;
}
@media (max-width: 767px) {
  .eit-kontakt-raster {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .eit-kontakt-karte {
    padding: 20px 20px 22px;
  }
  .eit-kontakt-karte a.eit-telefon {
    font-size: 27px;
    gap: 12px;
  }
  .eit-kontakt-karte a.eit-telefon::before {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
}
@media (max-width: 359px) {
  .eit-kontakt-karte {
    padding: 18px 16px 20px;
  }
  .eit-kontakt-karte .btn {
    white-space: normal;          /* Button darf umbrechen */
  }
  .eit-kontakt-karte a.eit-telefon {
    font-size: 24px;
    gap: 10px;
  }
  .eit-kontakt-karte a.eit-telefon::before {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}