/* ==================================================================
   itadler-brand.css – einheitlicher Markenkopf auf ALLEN Seiten
   ------------------------------------------------------------------
   Wird als letzte Stylesheet-Datei geladen, auch auf /en/ und /hr-sr/,
   damit der Markenkopf sprach- und seitenunabhängig identisch ist.

   Vorher unterschieden sich die Kopfzeilen in vier Punkten:
     1. Motiv      – Adlerwappen (DE) vs. Wolken-Schild-SVG (EN/HR)
     2. Größe      – 40px (Startseite) vs. 56px (alle anderen)
     3. Fläche     – frei (Startseite) vs. blauer Gradient-Kasten
     4. Wortmarke  – "IT" rot (Start, EN/HR) vs. blau (Unterseiten),
                     Schriftgrad 22px vs. 32px

   Rot ist bewusst auf das Wortzeichen "IT" beschränkt – das ist die
   einzige Stelle, an der die Marke Rot einsetzt.
   ================================================================== */

.brand{display:flex;align-items:center;gap:12px!important}
.brand-logo{
  width:40px!important;height:40px!important;flex:0 0 40px!important;
  object-fit:contain!important;display:block!important;
  padding:0!important;border:0!important;border-radius:0!important;
  background:none!important;background-image:none!important;
  box-shadow:none!important;filter:none!important;
}
.brand-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.brand-wordmark{
  font-weight:800!important;font-size:22px!important;
  letter-spacing:-.045em!important;line-height:1!important;color:#15243a!important;
}
.brand-it{color:#ed1b24!important}
.brand-tagline{
  display:block!important;font-size:10.5px!important;font-weight:700!important;
  letter-spacing:.13em!important;line-height:1!important;text-transform:uppercase!important;
  color:#6b7f98!important;white-space:nowrap!important;
}

@media (max-width:720px){
  .brand{flex:1 1 auto;min-width:0;max-width:calc(100% - 104px)}
  .brand-logo{width:34px!important;height:34px!important;flex-basis:34px!important}
  .brand-wordmark{font-size:19px!important}
  .brand-tagline{white-space:normal!important;font-size:9.5px!important;letter-spacing:.07em!important;line-height:1.25!important}
  .nav-cta{margin-left:auto;flex:0 0 auto}
}

/* ==================================================================
   Kopfbereich geometrisch vereinheitlichen
   ------------------------------------------------------------------
   Der Streifen oben war je Seite unterschiedlich hoch und breit:

     Startseite      Topbar 73px, Nav-Schrift 15px, Container 1080px
     Unterseiten     Topbar 93px, Nav-Schrift 16px, Container 1400px
     /en/ /hr-sr/    Topbar 93px, Nav-Schrift 16px, Container 1188px

   Dadurch sass die Marke auf der Startseite eingerueckt, auf den
   Unterseiten dagegen weit links – der sichtbarste Unterschied.
   Referenz ist die Startseite.
   ================================================================== */
.topbar{
  position:sticky!important;top:0;z-index:50;
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(14px)!important;
  border-bottom:1px solid #eef3f8!important;
}
.topbar>.container,.topbar>.na-container{max-width:1080px!important;margin:0 auto;padding:0 24px}
.nav{height:72px!important;min-height:0!important;display:flex;align-items:center;justify-content:space-between;gap:22px!important;padding:0!important}
.navlinks{gap:22px!important;font-size:15px!important;font-weight:500}
.navlinks a{padding:6px 0!important;white-space:nowrap}
.nav-cta{display:flex;align-items:center;gap:10px}

/* Supportleiste: gleiche Hoehe, Breite und Typografie auf allen Seiten */
.site-support-bar-inner{
  max-width:1080px!important;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 14px!important;padding:9px 24px!important;min-height:40px!important;font-size:14px!important;
}
.site-support-bar span[aria-hidden]{opacity:.5}

@media (max-width:980px){
  .nav{height:auto!important;flex-wrap:wrap;padding:10px 0!important;min-height:64px!important}
}
@media (max-width:720px){
  .site-support-bar-inner{padding:8px 18px!important;font-size:13.5px!important;gap:6px 10px!important}
}

/* Exakt gleiche Hoehe der Supportleiste: /en/ und /hr-sr/ laden kein Theme und
   damit noch 'Source Sans 3'. Die abweichenden Schriftmetriken ergaben 41/42/43px.
   Schriftfamilie und Zeilenhoehe fuer den Kopfstreifen daher explizit setzen. */
.topbar,.site-support-bar,.brand,.navlinks,.nav-cta,.site-support-bar-inner{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
}
.site-support-bar-inner{line-height:22px!important}
.site-support-phone{display:inline-flex;align-items:center;gap:7px;font-weight:650}
.site-support-phone-icon{width:15px;height:15px;flex:0 0 15px;fill:currentColor}

/* Unterseiten hatten zusaetzlich einen 1px-Rahmen unter der Supportleiste
   (41px statt 40px). Auf dem dunklen Streifen unsichtbar, in der Summe aber
   ein Versatz des gesamten Kopfbereichs. */
.site-support-bar{border:0!important}

/* ------------------------------------------------------------------
   Mobiler Kopf: eine Zeile auf allen Seiten
   /en/ und /hr-sr/ tragen zusaetzlich den Sprachumschalter. Dadurch war
   ihr Kopf bei 390px doppelt so hoch (119px statt 65px), weil Marke und
   Aktionsbereich in zwei Zeilen umbrachen. Der Umschalter ist dort der
   einzige Weg zurueck zur deutschen Fassung und darf nicht entfallen.
   Loesung: Die Marke darf schrumpfen, die Subline entfaellt auf schmalen
   Geraeten – die Wortmarke traegt die Marke dort allein.
   ------------------------------------------------------------------ */
@media (max-width:720px){
  .brand{flex:0 1 auto!important;min-width:0!important;max-width:none!important;overflow:hidden}
  .brand-copy{min-width:0;overflow:hidden}
  .nav-cta{flex:0 0 auto!important;margin-left:auto!important;gap:8px!important}
  .lang-switch{display:flex;align-items:center;gap:6px!important}
  .lang-switch a{font-size:12px!important;padding:2px!important}
}
@media (max-width:560px){
  .brand-tagline{display:none!important}
  .brand-wordmark{font-size:20px!important}
  .brand{gap:10px!important}
}

/* ------------------------------------------------------------------
   Kopfhoehe deterministisch statt inhaltsabhaengig
   Unterhalb 980px war .nav auf height:auto gestellt. Die Hoehe ergab sich
   damit aus dem hoechsten Kind – und der Menue-Button ist auf der
   Startseite als .na-btn, auf den uebrigen Seiten als .btn gestylt.
   Daraus entstanden Abweichungen von 1-3px. Geoeffnetes Menue bleibt
   ausgenommen, es muss weiterhin wachsen.
   ------------------------------------------------------------------ */
.mobile-toggle{
  font:600 14px/1 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
  padding:9px 12px!important;border:1px solid #dce5ef!important;border-radius:9px!important;
  background:#fff!important;color:#15243a!important;box-shadow:none!important;height:36px!important;
  display:none;align-items:center;cursor:pointer;
}
@media (max-width:980px){
  .mobile-toggle{display:inline-flex!important}
  .nav:not(.is-open){height:64px!important;min-height:64px!important;flex-wrap:nowrap!important;padding:0!important}
  .nav.is-open{height:auto!important;min-height:64px!important;flex-wrap:wrap!important;padding:0 0 10px!important}
}

/* ------------------------------------------------------------------
   Farbgebung des Kopfstreifens ebenfalls global
   Die Supportleiste (navy) und der flache Navy-CTA standen bisher nur in
   nehat-theme.css, das /en/ und /hr-sr/ nicht laden. Dort blieb die Leiste
   hellblau und der CTA in Grossbuchstaben mit Verlauf.
   ------------------------------------------------------------------ */
.site-support-bar{background:#061b31!important;color:#cfe0f2!important}
.site-support-bar a{color:#dbe9f8!important;text-decoration:none}
.site-support-bar a:hover{color:#fff!important;text-decoration:underline;text-underline-offset:3px}
.site-support-bar span{color:#9fb6cf!important}
.site-support-bar .site-support-phone{color:#fff!important}
.site-support-bar span[aria-hidden]{color:#4f6a88!important}

.nav-cta .btn-primary,.nav-cta .na-btn-primary{
  background:#0b2340!important;background-image:none!important;color:#fff!important;
  border:1px solid #0b2340!important;border-radius:9px!important;box-shadow:none!important;
  text-transform:none!important;letter-spacing:0!important;font-weight:600!important;font-size:15px!important;
  padding:10px 16px!important;height:40px!important;display:inline-flex;align-items:center;
}
.nav-cta .btn-primary:hover,.nav-cta .na-btn-primary:hover{background:#0f2f55!important;border-color:#0f2f55!important;transform:none!important;filter:none!important}
.navlinks a{color:#30455e!important;text-decoration:none}
.navlinks a:hover{color:#2f6bd1!important}
.navlinks a[aria-current="page"]{color:#15243a!important;font-weight:650!important}

/* Korrektur: Die Regel oben setzt display:inline-flex auf den Kopf-CTA und
   hob damit das Ausblenden auf schmalen Geraeten auf. Dort ist nur Platz fuer
   Marke, Sprachumschalter und Menue – der CTA bleibt ausgeblendet. */
@media (max-width:980px){
  .nav-cta .btn-primary,.nav-cta .na-btn-primary{display:none!important}
}

/* Schriftstaerke der Supportleiste: style.css setzt dort font-weight 700 und
   fuer Links sogar 850. Nur die Startseite lag bei 400/650, alle anderen
   Seiten erschienen fett. Auf die ruhige Variante der Startseite angeglichen. */
.site-support-bar,.site-support-bar-inner{font-weight:400!important}
.site-support-bar span{font-weight:400!important}
.site-support-bar a{font-weight:500!important}
.site-support-bar .site-support-phone{font-weight:650!important}

/* ==================================================================
   Footer – einheitlich auf allen Seiten
   ------------------------------------------------------------------
   Vorher gab es sechs verschiedene Footer:
     Startseite      .na-footer, vier Spalten, eigene Struktur
     26 Unterseiten  drei Spalten (ITAdler / Leistungen / Kontakt)
     /jobs/          Spalte "Zusammenarbeit" statt "Leistungen"
     cybersecurity   nur fuenf statt sechs Leistungslinks
     /en/ /hr-sr/    drei Spalten, Hintergrund #111c30 statt navy,
                     Container 1188px statt 1080px
   Jetzt ueberall dieselbe Vier-Spalten-Struktur. Die Gestaltung steht
   hier und nicht im Theme, damit sie auch auf /en/ und /hr-sr/ greift.
   ================================================================== */
.footer,.na-footer,.site-footer{
  background:#061b31!important;color:#c6d5e6!important;
  padding:54px 0 30px!important;margin-top:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
  font-size:15px!important;line-height:1.6!important;
}
.site-footer>.container,.na-footer>.na-container,.footer>.container{max-width:1080px!important;margin:0 auto;padding:0 24px}
.site-footer-grid,.na-footer-grid-4,.footer-grid{
  display:grid!important;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr!important;
  gap:36px!important;align-items:start;
}
.site-footer h3,.site-footer h4{color:#fff!important;margin:0 0 14px!important;letter-spacing:-.01em}
.site-footer h3{font-size:17px!important;font-weight:700!important}
.site-footer h4{font-size:13px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.12em;color:#8fa8c4!important}
.site-footer p{margin:0!important;color:#aabdd4!important;font-size:14.5px!important}
.site-footer ul{list-style:none!important;margin:0!important;padding:0!important;display:grid;gap:9px}
.site-footer li{margin:0!important}
.site-footer a{color:#c6d5e6!important;text-decoration:none!important}
.site-footer a:hover{color:#fff!important;text-decoration:underline!important;text-underline-offset:3px}
.site-footer-company{margin-top:16px!important;color:#aabdd4!important}
.site-footer-company strong{color:#fff!important}

.site-footer-legal,.site-footer .legal{
  border-top:1px solid rgba(255,255,255,.14)!important;
  margin-top:36px!important;padding-top:20px!important;
  font-size:13.5px!important;color:#8aa2bd!important;
}
.site-footer-legal a,.site-footer .legal a{color:#8aa2bd!important}
.site-footer-legal a:hover{color:#fff!important}
.site-footer .site-version{color:#6d87a5!important}

@media (max-width:900px){
  .site-footer-grid,.na-footer-grid-4,.footer-grid{grid-template-columns:1fr 1fr!important;gap:30px!important}
}
@media (max-width:560px){
  .site-footer{padding:40px 0 26px!important}
  .site-footer-grid,.na-footer-grid-4,.footer-grid{grid-template-columns:1fr!important;gap:26px!important}
}

/* Zeilenhoehe explizit: die Startseite erbt aus nehat-adler.css einen anderen
   Wert, wodurch der Footer dort 4px niedriger war als auf allen anderen Seiten. */
.site-footer p{line-height:1.6!important}
.site-footer li,.site-footer li a{line-height:24px!important}
.site-footer-legal,.site-footer .legal{line-height:1.55!important}

/* Firmenblock in der letzten Spalte sichtbar von der Linkliste absetzen */
.site-footer-company{
  margin-top:18px!important;padding-top:16px!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
}

/* Dreispaltiger, rein persoenlicher Footer (ab 2.3.0).
   Die frueheren Spalten "ITAdler Leistungen" und "Unternehmen" sind entfallen;
   der Footer spiegelt nur noch die Freelancer-Positionierung. */
.site-footer-grid-3{grid-template-columns:1.8fr 1fr 1fr!important}
.site-footer-meta{
  margin-top:14px!important;font-size:13.5px!important;color:#8aa2bd!important;
  padding-top:14px!important;border-top:1px solid rgba(255,255,255,.1)!important;
}
.site-footer-grid-3 .site-footer-company{font-size:13.5px!important}
@media (max-width:900px){.site-footer-grid-3{grid-template-columns:1fr 1fr!important}}
@media (max-width:560px){.site-footer-grid-3{grid-template-columns:1fr!important}}

/* Inhaltsspalte auch auf /en/ und /hr-sr/ 1080px breit.
   style.css gibt diesen Seiten 1188px, die deutschen Seiten bekommen 1080px
   aus nehat-theme.css, das hier nicht geladen wird. Gleicher Selektor wie in
   style.css, nur spaeter geladen - deshalb ohne !important. */
html[lang="en"] .cyber-page .container,
html[lang="hr"] .cyber-page .container,
html[lang="hr-sr"] .cyber-page .container{max-width:1080px}

/* ---------------------------------------------------------------------------
   Mobile Tippflaechen (2.8.0)
   Gemessen auf 390 und 360 px: Linklisten im Footer und im Inhaltsverzeichnis
   waren nur 18-23 px hoch, die Datenschutz-Checkbox 18 px. Empfohlen sind
   mindestens 44 px. Prosa-Links in Fliesstext bleiben bewusst unberuehrt -
   dort wuerde Polsterung den Zeilenfall zerreissen.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Footer-Linklisten: je Zeile eine eigene Tippflaeche */
  .site-footer li > a,
  .footer li > a,
  .na-footer li > a {
    display: block;
    min-height: 44px;
    line-height: 1.35;
    padding: 11px 0;
  }
  .site-footer li,
  .footer li,
  .na-footer li { margin: 0; }

  /* Rechtszeile im Footer: als umbrechende Reihe statt starrer Zeilenhoehe.
     line-height:44px auf inline-block-Links sprengte den Satz und setzte das
     folgende Satzzeichen ab. */
  .site-footer-legal,
  .legal.site-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    line-height: 1.6;
  }
  .site-footer-legal a,
  .legal.site-footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 2px;
  }

  /* Inhaltsverzeichnis auf Datenschutz und Impressum */
  main ol > li > a {
    display: block;
    min-height: 44px;
    padding: 11px 0;
    line-height: 1.35;
  }

  /* Telefonnummer in der Supportleiste */
  .site-support-phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Sprachumschalter und Menue-Knopf */
  .lang-switch a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
  }
  .mobile-toggle { min-height: 44px !important; height: 44px !important; }

  /* Zustimmungs-Checkbox im Formular: tippbar statt 18 px */
  .field input[type="checkbox"],
  label input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    flex: 0 0 auto;
    margin-top: 2px;
  }
  .field label:has(input[type="checkbox"]),
  label:has(> input[type="checkbox"]) {
    min-height: 44px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
  }
}

/* Mindestschriftgroesse: die Paket-Schlagworte lagen bei 11,5 px */
@media (max-width: 720px) {
  .ci-package-card span { font-size: 12.5px !important; }
}

@media (max-width: 720px) {
  /* Schaltflaechen lagen bei 41-42 px, knapp unter der Empfehlung */
  .btn, .na-btn, button.btn, a.btn,
  button[type="submit"], input[type="submit"] {
    min-height: 44px;
  }
  /* Gestapelte Kontaktangaben (Impressum, Kontaktkarten): je eigene Tippflaeche */
  .contact-details a[href^="mailto:"],
  .contact-details a[href^="tel:"],
  .ci-contact-card a[href^="mailto:"],
  .ci-contact-card a[href^="tel:"],
  address a[href^="mailto:"],
  address a[href^="tel:"] {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
  }
}