/*
 * AFANDI Website – Industry Design v8
 * Rein visuelle Ebene. Inhalte, DOM-Struktur und JavaScript bleiben unverändert.
 */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600;700&display=swap');

:root {
  --navy: #002d47;
  --navy2: #002d47;
  --navy3: #002d47;
  --sky: #002d47;
  --sky-lt: #f2f2f3;
  --muted: #686c70;
  --muted2: #7a7a7d;
  --border: #d4d4d7;
  --border2: #b7b7ba;
  --bg: #f2f2f3;
  --bg2: #e9e9ea;
  --white: #f8f8f9;
  --r4: 0;
  --r8: 0;
  --r10: 0;
  --r12: 0;
  --r16: 0;
  --r20: 0;
  --r24: 0;
  --sh1: 0 1px 2px rgba(43, 43, 45, .08);
  --sh2: 0 5px 18px rgba(43, 43, 45, .10);
  --sh3: 0 18px 44px rgba(0,45,71, .18);

  --industry-bg: #f2f2f3;
  --industry-surface: #e9e9ea;
  --industry-paper: #f8f8f9;
  --industry-text: #1d1f20;
  --industry-muted: #686c70;
  --industry-accent: #002d47;
  --industry-accent-dark: #002d47;
  --industry-accent-light: #f2f2f3;
  --industry-line: rgba(29, 31, 32, .16);
  --industry-line-strong: rgba(29, 31, 32, .32);
  --industry-nav: #002d47;
  --industry-nav-hover: #002d47;
}

/* AFANDI portal navigation: consistent icons and compact external links. */
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.nav-link-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #002d47;
}

@media (max-width: 1080px) and (min-width: 841px) {
  .nav-links a {
    gap: 5px;
    padding-right: 8px;
    padding-left: 8px;
    font-size: 13px;
  }

  .nav-link-icon {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
  }

  .nav-cta {
    padding-right: 10px;
    padding-left: 10px;
  }
}

@media (max-width: 840px) {
  .nav-links a,
  .nav-links.open a {
    display: flex;
  }

  .nav-link-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
}

/* AFANDIHUB Downloadbuttons unter der Portalnavigation. */
.afandihub-downloads {
  position: fixed;
  z-index: 1002;
  top: 75px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--industry-line);
  border-radius: 6px;
  background: #f8f8f9;
  transform: translateX(-50%);
  list-style: none;
  box-shadow: 0 4px 14px rgba(29, 31, 32, .08);
}

.nav-links .afandihub-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: #002d47;
  line-height: 1.05;
}

.nav-links .afandihub-store-btn:hover,
.nav-links .afandihub-store-btn:focus-visible {
  border-color: #b9c3ca;
  background: #eef1f3 !important;
  color: #002d47 !important;
}

.nav-links .afandihub-store-btn::before,
.nav-links .afandihub-store-btn::after {
  display: none !important;
}

.afandihub-store-btn svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.afandihub-store-btn span {
  display: grid;
  gap: 1px;
  text-align: left;
}

.afandihub-store-btn small {
  color: #69757c;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .02em;
}

.afandihub-store-btn strong {
  color: #002d47;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 840px) {
  .afandihub-downloads {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
    padding: 8px 0 0;
    border-width: 1px 0 0;
    border-radius: 0;
    background: transparent;
    transform: none;
    box-shadow: none;
  }

  .nav-links.open .afandihub-store-btn {
    justify-content: flex-start;
    min-height: 48px;
    padding: 7px 9px;
    border-color: var(--industry-line);
    border-radius: 6px;
    background: #fff;
  }
}

html {
  background: var(--industry-bg);
}

body {
  background: var(--industry-bg);
  color: var(--industry-text);
  font-family: "Barlow", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-home__title,
.hero-panel__title,
.pg-h1,
.sec-h2,
.cta-h,
.pkg-name,
.card-h,
.vcard-h,
.ccard-h,
.tname {
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.012em;
}

::selection {
  background: #f2f2f3;
}

:focus-visible {
  outline: 2px solid #002d47;
  outline-offset: 3px;
}

.w {
  max-width: 1180px;
}

/* Helle, durchgehende Navbar mit einer eigenen dunklen Logo-Datei. */
.nav,
.nav.solid,
.nav--solid {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  height: 68px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--industry-line);
  border-radius: 0;
  background: rgba(242, 242, 243, .98) !important;
  box-shadow: 0 5px 18px rgba(29, 31, 32, .08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav-inner {
  width: 100%;
  max-width: 1180px;
  height: 68px;
  padding-right: clamp(16px, 4vw, 32px);
  padding-left: clamp(16px, 4vw, 32px);
}

.nav-inner > a:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 3px 0;
  border: 0;
  background: transparent;
}

.nav img[src*="logo-afandi"],
.nav-inner > a:first-child img {
  display: block;
  width: auto !important;
  height: 38px !important;
  max-width: 190px;
  object-fit: contain;
  border-radius: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  box-shadow: none !important;
  transition: none !important;
}

.nav-inner > a:first-child:hover,
.nav-inner > a:first-child:focus-visible {
  background: transparent;
}

.nav-inner > a:first-child:hover img,
.nav-inner > a:first-child:focus-visible img {
  opacity: 1 !important;
  visibility: visible !important;
}

.nav-links {
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: rgba(248, 248, 249, .72);
}

.nav-links a {
  min-height: 36px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--industry-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .015em;
}

.nav-links a::after {
  right: 13px;
  bottom: 3px;
  left: 13px;
  height: 1px;
  border-radius: 0;
  background: var(--industry-accent);
}

.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a.pOn {
  border-color: var(--industry-line);
  background: rgba(29, 31, 32, .06) !important;
  color: var(--industry-text) !important;
}

.lang-sw {
  gap: 0;
  padding: 2px;
  border-color: var(--industry-line);
  border-radius: 0;
  background: var(--industry-paper);
  box-shadow: none;
}

.lang-sw button {
  padding: 4px 8px;
  border-radius: 0;
  color: var(--industry-muted);
}

.lang-sw button.on {
  background: var(--industry-text);
  color: #fff;
}

.nav-cta {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid #002d47;
  border-radius: 0;
  background: #002d47;
  color: #fff;
  box-shadow: none;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  border-color: #002d47;
  background: #002d47;
  color: #fff;
  transform: none;
}

/* Endversion 14.08.2026: kompakte Wortmarke, feste Navigation und deaktivierte Portale. */
.nav,
.nav.solid,
.nav--solid {
  position: fixed !important;
  top: 0 !important;
  z-index: 2147483000 !important;
}

.nav .brand-symbol.brandFullLogo {
  width: 164px;
  height: 39px;
  display: inline-block;
  flex: 0 0 164px;
  background: #002d47;
  -webkit-mask: url("assets/afandi-navbar-logo.png") center / contain no-repeat;
  mask: url("assets/afandi-navbar-logo.png") center / contain no-repeat;
}

.nav .brand-symbol.brandFullLogo img {
  opacity: 0 !important;
}

.nav-links .nav-link-disabled {
  min-height: 36px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  color: #9aa3a8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .015em;
  white-space: nowrap;
  cursor: not-allowed;
}

.nav-links .nav-link-disabled .nav-link-icon {
  color: #9aa3a8;
}

.hamburger {
  width: 40px;
  height: 40px;
  border-color: var(--industry-line);
  border-radius: 0;
  background: var(--industry-paper);
  color: var(--industry-text);
  box-shadow: none;
}

.hamburger span {
  background: var(--industry-text);
}

.hamburger:hover,
.hamburger:focus-visible {
  border-color: var(--industry-line-strong);
  border-radius: 0;
  background: rgba(255, 255, 255, .13);
}

.hamburger.x {
  border-color: var(--industry-line-strong);
  border-radius: 0;
  background: var(--industry-paper);
  color: var(--industry-nav);
}

/* Startseite */
.hero-home {
  min-height: auto;
  padding: 122px 0 76px;
  background: var(--industry-bg);
}

.hero-home::before,
.pg-hero::after,
.cta-strip::before {
  display: none;
}

.hero-home__grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  gap: clamp(36px, 6vw, 72px);
}

.hero-home__eyebrow,
.sec-tag,
.pg-tag {
  padding: 5px 10px;
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: transparent;
  color: var(--industry-accent-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
}

.hero-home__eyebrow span,
.sec-tag::before,
.pg-tag::before {
  width: 15px;
  height: 2px;
  border-radius: 0;
  background: var(--industry-accent);
  box-shadow: none;
}

.hero-home__title {
  max-width: 680px;
  margin-bottom: 20px;
  color: var(--industry-text);
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.018em;
}

.hero-home__title-accent {
  background: none;
  color: var(--industry-accent-dark);
  -webkit-text-fill-color: currentColor;
}

.hero-home__lead {
  color: var(--industry-muted);
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.65;
}

.hero-home__lead strong {
  color: var(--industry-text) !important;
  font-weight: 600 !important;
}

.hero-home__chips {
  gap: 7px;
}

.hero-home__chip {
  padding: 7px 11px;
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: var(--industry-paper);
  color: var(--industry-text);
  box-shadow: none;
  font-size: 12px;
}

.hero-home__chip svg {
  color: var(--industry-accent);
}

.btn {
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--industry-line-strong);
  border-radius: 0;
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .015em;
  box-shadow: none;
}

.btn--dark {
  border-color: var(--industry-accent);
  background: var(--industry-accent);
  color: #fff;
}

.btn--dark:hover,
.btn--dark:focus-visible {
  border-color: var(--industry-accent-dark);
  background: var(--industry-accent-dark);
  box-shadow: none;
  transform: none;
}

.btn--outline {
  border: 1px solid var(--industry-line-strong);
  background: transparent;
  color: var(--industry-text);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--industry-accent);
  background: var(--industry-accent-light);
  color: var(--industry-accent-dark);
  transform: none;
}

.btn--white {
  border-color: rgba(255, 255, 255, .38);
  background: #f8f8f9;
  color: var(--industry-nav);
}

.btn--white:hover,
.btn--white:focus-visible {
  border-color: #fff;
  background: #fff;
  box-shadow: none;
  transform: none;
}

/* Die Hero-Grafik übernimmt die ruhige, technische V8-Sprache. */
.hero-panel {
  width: min(100%, 410px);
}

.hero-panel__main {
  padding: 26px;
  border: 1px solid var(--industry-line-strong);
  border-radius: 0;
  background: var(--industry-paper);
  color: var(--industry-text);
  box-shadow: 0 16px 42px rgba(43, 43, 45, .12);
}

.hero-panel__main::after,
.hero-grid-dots,
.pHeroFx,
.pOrbit,
.pSticker,
.pFloat {
  display: none !important;
}

.hero-panel__label {
  padding: 5px 9px;
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: transparent;
  color: var(--industry-accent-dark);
}

.hero-panel__label::before {
  width: 14px;
  height: 2px;
  border-radius: 0;
  background: var(--industry-accent);
}

.hero-panel__title {
  max-width: 13ch;
  color: var(--industry-text);
  font-size: 28px;
  font-weight: 600;
}

.hero-panel__sub {
  color: var(--industry-muted);
}

.hero-panel__focus {
  padding: 14px 15px;
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: var(--industry-surface);
  box-shadow: none;
}

.hero-panel__focus-tag {
  color: var(--industry-accent-dark);
}

.hero-panel__focus-title,
.hero-panel__item-title {
  color: var(--industry-text);
}

.hero-panel__focus-text,
.hero-panel__item-sub {
  color: var(--industry-muted);
}

.hero-panel__item {
  padding: 11px 12px;
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: var(--industry-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.hero-panel__badge {
  padding: 4px 7px;
  border: 1px solid #002d47;
  border-radius: 0;
  background: var(--industry-accent-light);
  color: var(--industry-accent-dark);
}

.hero-panel__tags span {
  padding: 5px 9px;
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: transparent;
  color: var(--industry-muted);
}

/* Inhaltsseiten und Abschnitte */
.pg-hero {
  padding: 122px 0 58px;
  border-bottom: 1px solid var(--industry-line);
  background: var(--industry-surface);
}

.breadcrumb,
.breadcrumb a {
  color: var(--industry-muted);
}

.breadcrumb a:hover {
  color: var(--industry-accent-dark);
}

.pg-h1,
.sec-h2 {
  color: var(--industry-text);
  font-weight: 600;
}

.pg-h1 {
  font-size: clamp(36px, 5vw, 54px);
}

.sec-h2 {
  font-size: clamp(30px, 4vw, 42px);
}

.pg-lead,
.sec-lead {
  color: var(--industry-muted);
  line-height: 1.6;
}

.sec {
  padding: clamp(54px, 7vw, 82px) 0;
}

.sec--alt {
  background: var(--industry-surface);
}

.hr {
  background: var(--industry-line);
}

.card,
.vcard,
.pkg,
.ccard,
.tcard,
.pstep,
.cdi,
.c-item,
.faq-item {
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: var(--industry-paper);
  box-shadow: none;
}

.card:hover,
.vcard:hover,
.pkg:hover,
.ccard:hover,
.tcard:hover,
.pstep:hover,
.cdi:hover,
.faq-item:hover,
.faq-item.open {
  border-color: var(--industry-accent);
  box-shadow: var(--sh2);
  transform: translateY(-2px);
}

.card-ico,
.vcard-ico,
.ccard-ico,
.feat-ico {
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: var(--industry-surface);
  box-shadow: none;
}

.card-ico svg,
.vcard-ico svg,
.ccard-ico svg,
.feat-ico svg {
  color: var(--industry-accent-dark);
}

.card-h,
.vcard-h,
.ccard-h,
.pkg-name,
.tname,
.tarea-h,
.ph,
.sla-name,
.c-item-val,
.cdi-val {
  color: var(--industry-text);
}

.card-h,
.vcard-h,
.ccard-h,
.pkg-name,
.tname {
  font-size: 18px;
  font-weight: 600;
}

.card-p,
.card-ul li,
.vcard-p,
.ccard-p,
.pkg-desc,
.pkg-ul li,
.trole,
.tarea-ul li,
.pp,
.feat-li,
.sla-time,
.c-item-label,
.cdi-label {
  color: var(--industry-muted);
}

.card-ul li::before,
.pkg-ul li::before,
.tarea-h::before,
.legal-prose ul li::before {
  border-radius: 0;
  background: var(--industry-accent);
}

.pkg.hi {
  border-color: var(--industry-accent-dark);
  background: var(--industry-accent-dark);
}

.pkg.hi .pkg-desc,
.pkg.hi .pkg-ul li {
  color: rgba(255, 255, 255, .74);
}

.tab-bar {
  gap: 0;
  padding: 3px;
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: var(--industry-surface);
}

.tab-btn {
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 0;
  color: var(--industry-muted);
}

.tab-btn:hover {
  color: var(--industry-text);
}

.tab-btn.on {
  border: 1px solid var(--industry-accent);
  background: var(--industry-accent);
  color: #fff;
  box-shadow: none;
}

.pnum {
  width: 40px;
  height: 40px;
  border-radius: 0;
  background: var(--industry-accent);
  box-shadow: none;
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  font-weight: 600;
}

.tcard-top {
  border-bottom: 1px solid var(--industry-line);
  background: var(--industry-surface);
}

.tavatar {
  border: 1px solid var(--industry-line-strong);
  border-radius: 0;
  background: var(--industry-accent) !important;
  box-shadow: none;
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}

.ccard-chip {
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: var(--industry-bg);
  color: var(--industry-muted);
}

.faq-q {
  padding: 17px 19px;
}

.faq-qt {
  color: var(--industry-text);
  font-size: 14px;
}

.faq-ico,
.faq-item.open .faq-ico {
  width: 28px;
  height: 28px;
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: var(--industry-surface);
}

.faq-ico svg,
.faq-item.open .faq-ico svg {
  color: var(--industry-accent-dark);
}

.faq-body p,
.faq-body a {
  color: var(--industry-muted);
}

.sla-row {
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: var(--industry-bg);
}

.sla-row:hover {
  border-color: var(--industry-accent);
  background: var(--industry-accent-light);
}

.sla-badge {
  border-radius: 0;
}

#support .w > div[style*="grid-template-columns"] > div:last-child {
  border: 1px solid var(--industry-line) !important;
  border-radius: 0 !important;
  background: var(--industry-paper) !important;
  box-shadow: none !important;
}

#support .w > div[style*="grid-template-columns"] h3,
#support .w > div[style*="grid-template-columns"] > div:last-child > div:first-child {
  color: var(--industry-text) !important;
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  font-weight: 600 !important;
}

#support .w > div[style*="grid-template-columns"] p,
#support .w > div[style*="grid-template-columns"] > div:last-child > div:nth-child(2) {
  color: var(--industry-muted) !important;
}

/* Rechtliches und Kontakt */
.legal-toc {
  top: 92px;
  padding: 16px;
  border: 1px solid var(--industry-line);
  background: var(--industry-surface);
}

.legal-toc-h,
.c-item-label,
.cdi-label {
  color: var(--industry-muted);
}

.legal-toc-ul a {
  border-left: 2px solid transparent;
  border-radius: 0;
  color: var(--industry-muted);
}

.legal-toc-ul a:hover,
.legal-toc-ul a.on {
  border-left-color: var(--industry-accent);
  background: var(--industry-accent-light);
  color: var(--industry-accent-dark);
}

.legal-prose h2 {
  border-bottom-color: var(--industry-line);
  color: var(--industry-text);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 600;
}

.legal-prose h3,
.legal-prose p strong {
  color: var(--industry-text);
}

.legal-prose p,
.legal-prose ul li,
.legal-prose ol li {
  color: var(--industry-muted);
}

.legal-prose a,
.c-item-val a,
.cdi-val a,
.tcard-footer a {
  color: var(--industry-accent-dark);
}

.sec-num {
  border: 1px solid #002d47;
  border-radius: 0;
  background: var(--industry-accent-light);
  color: var(--industry-accent-dark);
}

.info-box {
  border: 1px solid var(--industry-line);
  border-left: 3px solid var(--industry-accent);
  border-radius: 0;
  background: var(--industry-accent-light);
}

.info-box p {
  color: var(--industry-text);
}

/* CTA und Footer */
.cta-strip {
  padding: clamp(42px, 5vw, 58px) 0;
  border-top: 1px solid var(--industry-line);
  border-bottom: 1px solid var(--industry-line);
  background: var(--industry-surface);
}

.cta-strip::before {
  display: none;
}

.cta-h {
  color: var(--industry-text);
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 600;
}

.cta-sub {
  color: var(--industry-muted);
}

.cta-strip .btn--white {
  border-color: var(--industry-accent);
  background: var(--industry-accent);
  color: #fff;
}

.cta-strip .btn--white:hover,
.cta-strip .btn--white:focus-visible {
  border-color: var(--industry-accent-dark);
  background: var(--industry-accent-dark);
  color: #fff;
}

.footer {
  border-top: 1px solid var(--industry-line);
  background: var(--industry-bg);
  color: var(--industry-muted);
}

.footer-logo img {
  height: 30px;
  border-radius: 0;
}

.footer-grid {
  border-bottom-color: var(--industry-line);
}

.footer-desc,
.footer-ul a {
  color: var(--industry-muted);
}

.footer-ul a:hover,
.footer-ul a:focus-visible,
.footer-bottom a:hover,
.footer-bottom a:focus-visible,
.footer-soc a:hover,
.footer-soc a:focus-visible {
  color: var(--industry-accent-dark) !important;
}

.footer-col-h {
  color: var(--industry-text);
}

.footer-addr,
.footer-bottom,
.footer-bottom a {
  color: var(--industry-muted);
}

.footer-project-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 9px 13px;
  border: 1px solid var(--industry-accent);
  border-radius: 3px;
  color: var(--industry-accent-dark) !important;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.footer-project-link:hover,
.footer-project-link:focus-visible {
  background: var(--industry-accent);
  color: #fff !important;
}

/* Cookie- und Hilfselemente */
#totop {
  border: 1px solid var(--industry-accent);
  border-radius: 0;
  background: var(--industry-accent);
  box-shadow: var(--sh2);
}

#totop:hover,
#totop:focus-visible {
  background: var(--industry-accent-dark);
}

#cookie-bar {
  border-top: 1px solid var(--industry-line-strong);
  background: rgba(248, 248, 249, .985);
  box-shadow: 0 -8px 28px rgba(43, 43, 45, .14);
}

.cookie-text,
.cookie-link {
  color: var(--industry-muted);
}

.cookie-text a,
.cookie-link:hover {
  color: var(--industry-accent-dark);
}

#cookie-modal {
  background: rgba(0,45,71, .62);
}

.cookie-modal-box {
  border: 1px solid var(--industry-line-strong);
  border-radius: 0;
  background: var(--industry-paper);
}

.cookie-modal-head,
.cookie-modal-foot {
  border-color: var(--industry-line);
}

.cookie-modal-head h2,
.cookie-opt-title {
  color: var(--industry-text);
}

.cookie-modal-head p,
.cookie-opt-desc {
  color: var(--industry-muted);
}

.cookie-close,
.cookie-opt {
  border: 1px solid var(--industry-line);
  border-radius: 0;
  background: var(--industry-surface);
}

/* Mobile Navigation und bestehende Mobile-Tabbar. */
@media (max-width: 1040px) {
  .hero-home__grid {
    grid-template-columns: 1fr;
  }

  .hero-home__visual {
    justify-content: flex-start;
  }

  .hero-panel {
    max-width: 560px;
  }
}

@media (max-width: 840px) {
  .nav-links,
  .nav-links.open {
    top: 68px;
    right: 0;
    left: 0;
    width: 100%;
    max-height: calc(100svh - 68px);
    padding: 10px 16px 14px;
    border: 0;
    border-bottom: 1px solid var(--industry-line);
    border-radius: 0;
    background: rgba(242, 242, 243, .995) !important;
    box-shadow: 0 18px 40px rgba(29, 31, 32, .16);
  }

  .nav-links.open li {
    border-bottom-color: var(--industry-line) !important;
  }

  .nav-links a,
  .nav-links.open a {
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 0;
    color: var(--industry-muted);
  }

  .nav-links a:hover,
  .nav-links a:active,
  .nav-links a.pOn,
  .nav-links.open a:hover,
  .nav-links.open a:active,
  .nav-links.open a.pOn {
    border-color: var(--industry-line);
    background: rgba(29, 31, 32, .06);
    color: var(--industry-text);
  }

  .nav-links a::before {
    border-radius: 0;
    background: var(--industry-accent);
  }

  .nav-links a::after {
    color: var(--industry-accent-dark);
  }

  .nav-links a.pMenuCta,
  .nav-links.open a.pMenuCta {
    border-color: #002d47;
    border-radius: 0;
    background: #002d47;
    color: #fff;
    box-shadow: none;
  }

  .nav-links a.pMenuCta:hover,
  .nav-links a.pMenuCta:active,
  .nav-links.open a.pMenuCta:hover,
  .nav-links.open a.pMenuCta:active {
    border-color: #002d47;
    background: #002d47;
    color: #fff;
  }
}

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overscroll-behavior-x: none;
    touch-action: pan-y;
  }

  body {
    min-height: 100svh;
    padding-bottom: 0 !important;
  }

  .nav {
    top: 0;
    right: 0;
    left: 0;
    height: 62px;
    border-radius: 0;
  }

  .nav-inner {
    height: 62px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .nav-inner > a:first-child {
    min-height: 36px;
    padding: 3px 6px;
  }

  .nav img[src*="logo-afandi"],
  .nav-inner > a:first-child img {
    width: auto !important;
    max-width: 158px;
    height: 32px !important;
  }

  .hamburger {
    display: grid !important;
    width: 38px;
    height: 38px;
    border-radius: 0;
  }

  .nav-links.open {
    top: 62px;
    right: 0;
    left: 0;
    width: 100%;
    max-height: calc(100svh - 142px);
    border-radius: 0;
  }

  .hero-home {
    min-height: auto;
    padding-top: 98px;
  }

  .hero-home__title {
    font-size: clamp(32px, 10.5vw, 44px);
  }

  .hero-home__content > .hero-home__visual {
    padding: 38px 0 12px;
  }

  .hero-panel__main {
    padding: 20px;
    border-radius: 0;
  }

  .hero-panel__focus,
  .hero-panel__item {
    border-radius: 0;
  }

  .pg-hero {
    padding-top: 98px;
  }

  .af-mobile-tabs {
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    left: 8px;
    gap: 0;
    padding: 5px;
    border: 1px solid var(--industry-line-strong);
    border-radius: 0;
    background: rgba(248, 248, 249, .985);
    box-shadow: 0 12px 32px rgba(43, 43, 45, .18);
  }

  .footer {
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }

  .footer-bottom {
    margin-top: 16px;
  }

  .af-mobile-tabs a,
  .af-mobile-tabs i {
    border-radius: 0;
  }

  .af-mobile-tabs a {
    color: var(--industry-muted);
  }

  .af-mobile-tabs i,
  .af-mobile-tabs a:nth-child(n) i {
    background: var(--industry-surface);
    color: var(--industry-accent-dark);
  }

  .af-mobile-tabs a.active {
    color: var(--industry-text);
  }

  .af-mobile-tabs a.active i,
  .af-mobile-tabs a:nth-child(n).active i {
    background: var(--industry-accent);
    color: #fff;
    box-shadow: none;
  }

  #cookie-bar,
  #cookie-modal .cookie-modal-box {
    border-radius: 0;
  }
}

@media (max-width: 580px) {
  .hero-home__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-home__actions .btn {
    justify-content: center;
    width: 100%;
  }

  .cta-grid {
    grid-template-columns: 1fr;
  }
}

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

/* AFANDI Markenauftritt wie in der Terminverwaltung */
.nav-inner > .brand-lockup {
  display: flex !important;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 38px;
  padding: 0 !important;
  color: var(--industry-text) !important;
  text-decoration: none;
}

.nav-inner > .brand-lockup:hover,
.nav-inner > .brand-lockup:focus-visible {
  color: var(--industry-text) !important;
  background: transparent !important;
}

.brand-symbol {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--industry-line);
  background: var(--industry-bg);
}

.nav .brand-symbol img,
.nav-inner > .brand-lockup .brand-symbol img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: contain;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
}

.brand-word {
  color: var(--industry-text);
  font-family: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
}

.brand-divider {
  width: 1px;
  height: 20px;
  background: var(--industry-line-strong);
}

.brand-area {
  color: var(--industry-muted);
  font-size: 12px;
  line-height: 1;
}

/* Einheitlicher Eckenradius im gesamten Auftritt */
*,
*::before,
*::after {
  border-radius: 6px !important;
}

@media (max-width: 700px) {
  .nav-inner > .brand-lockup {
    gap: 7px;
    min-height: 34px;
  }

  .brand-symbol {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
  }

  .brand-word {
    font-size: 18px;
  }

  .brand-area {
    font-size: 11px;
  }
}

@media (max-width: 430px) {
  .brand-divider,
  .brand-area {
    display: none;
  }
}

/* Markenleiste: Symbol + Trennlinie + Seitenname, ohne Bildrahmen */
.brand-symbol {
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* AFANDI_NAVBAR_FULL_LOGO: transparent, without contour or background */
.nav-inner > .brand-lockup .brandFullLogo {
  box-sizing: border-box !important;
  width: 123px !important;
  min-width: 123px !important;
  height: 34px !important;
  flex: 0 0 123px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: transform .18s ease !important;
}
.nav-inner > .brand-lockup .brandFullLogo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: transparent !important;
  filter: none !important;
}
.nav-inner > .brand-lockup:hover .brandFullLogo,
.nav-inner > .brand-lockup:focus-visible .brandFullLogo {
  transform: translateY(-1px);
  background: transparent !important;
  box-shadow: none !important;
}
.nav-inner > .brand-lockup:hover .brandFullLogo img,
.nav-inner > .brand-lockup:focus-visible .brandFullLogo img { filter: none !important; }
.nav-inner > .brand-lockup:focus-visible {
  outline: 2px solid #0c7894;
  outline-offset: 3px;
  border-radius: 10px !important;
}
@media (max-width: 720px) {
  .nav-inner > .brand-lockup .brandFullLogo {
    width: 99px !important;
    min-width: 99px !important;
    height: 29px !important;
    flex-basis: 99px !important;
    padding: 0 !important;
  }
  .nav-inner > .brand-lockup .brand-area,
  .nav-inner > .brand-lockup .brand-divider { display: none !important; }
}
@media (max-width: 440px) {
  .nav-inner > .brand-lockup .brandFullLogo {
    width: 88px !important;
    min-width: 88px !important;
    height: 26px !important;
    flex-basis: 88px !important;
  }
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
  touch-action: pan-x pan-y;
}

@media (max-width: 430px) {
  .brand-divider {
    display: block;
  }

  .brand-area {
    display: inline;
    white-space: nowrap;
  }
}

/* Abschließende Navbar-Regeln nach allen bestehenden Design-Layern. */
.nav-links > li:not(.afandihub-downloads):not(.pMenuCtaLi) > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.nav-link-icon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  color: #002d47;
}

@media (max-width: 1180px) and (min-width: 841px) {
  .nav-inner {
    padding-right: 12px;
    padding-left: 12px;
  }

  .nav-links > li:not(.afandihub-downloads):not(.pMenuCtaLi) > a {
    gap: 5px;
    padding-right: 7px;
    padding-left: 7px;
    font-size: 12.5px;
  }

  .nav-link-icon {
    width: 14px !important;
    height: 14px !important;
    flex-basis: 14px;
  }

  .nav-cta {
    padding-right: 9px;
    padding-left: 9px;
  }
}

@media (max-width: 840px) {
  .nav-links > li:not(.afandihub-downloads):not(.pMenuCtaLi) > a {
    display: flex;
    gap: 9px;
  }

  .nav-link-icon {
    width: 18px !important;
    height: 18px !important;
    flex-basis: 18px;
  }

  .afandihub-downloads {
    border-bottom: 0 !important;
  }
}

/* Letzte Priorität: AFANDI-Wortmarke exakt Navy und deaktivierte Portale mobil. */
.nav .nav-inner > .brand-lockup .brand-symbol.brandFullLogo {
  position: relative !important;
  width: 123px !important;
  min-width: 123px !important;
  max-width: 123px !important;
  height: 34px !important;
  min-height: 34px !important;
  flex: 0 0 123px !important;
  background: #002d47 !important;
  -webkit-mask: url("assets/afandi-navbar-logo.png") center / contain no-repeat !important;
  mask: url("assets/afandi-navbar-logo.png") center / contain no-repeat !important;
}

.nav .nav-inner > .brand-lockup .brand-symbol.brandFullLogo img,
.nav .nav-inner > .brand-lockup .brand-symbol.brandFullLogo::after {
  display: none !important;
}

@media (max-width: 840px) {
  .nav-links .nav-link-disabled {
    width: 100%;
    min-height: 48px;
    padding: 10px 9px;
    display: flex;
    gap: 9px;
  }
}

@media (max-width: 720px) {
  .nav .nav-inner > .brand-lockup .brand-symbol.brandFullLogo {
    width: 99px !important;
    min-width: 99px !important;
    max-width: 99px !important;
    height: 29px !important;
    min-height: 29px !important;
    flex-basis: 99px !important;
  }
}

@media (max-width: 440px) {
  .nav .nav-inner > .brand-lockup .brand-symbol.brandFullLogo {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 26px !important;
    min-height: 26px !important;
    flex-basis: 88px !important;
  }
}

/* V3: flache Navbar wie im Chat, ohne Termin-CTA. Das Personen-Signet bleibt
   grau; ausschließlich die FANDI-Wortmarke wird in #002d47 überlagert. */
.nav,
.nav.solid,
.nav--solid,
.nav .nav-inner,
.nav-links,
.nav-r,
.lang-sw,
.lang-sw button {
  border-radius: 0 !important;
}

.nav .nav-inner { max-width: none !important; }
.nav .nav-cta { display: none !important; }

.nav .nav-inner > .brand-lockup .brand-symbol.brandFullLogo {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
}

.nav .nav-inner > .brand-lockup .brand-symbol.brandFullLogo img {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  filter: none !important;
}

.nav .nav-inner > .brand-lockup .brand-symbol.brandFullLogo::after {
  content: "" !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  display: block !important;
  background: #002d47 !important;
  -webkit-mask: url("assets/afandi-navbar-logo.png") center / contain no-repeat !important;
  mask: url("assets/afandi-navbar-logo.png") center / contain no-repeat !important;
  clip-path: inset(0 0 0 29%) !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}