/* SDK4NET Template - Component Styles */

body {
  background-color: var(--sdk4net-bg-white);
  color: var(--sdk4net-text-body);
  font-family: var(--sdk4net-font-body);
  line-height: 1.7;
}

body * {
  font-family: var(--sdk4net-font-body);
}

/* Headings */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: var(--sdk4net-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--sdk4net-text-dark);
}

body h1 {
  font-size: var(--sdk4net-font-size-h1);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

body h2 {
  font-size: var(--sdk4net-font-size-h2);
  margin-bottom: var(--sdk4net-space-medium);
}

body h3 {
  font-size: var(--sdk4net-font-size-h3);
  margin-bottom: var(--sdk4net-space-small);
}

/* Subheadings (h2/h3.heading-sub) keep the h4 look and weight of this theme */
body .heading-sub {
  font-weight: 600;
}

/* ========== Header & Navigation ========== */
body .header,
body .header--fixed {
  background-color: var(--sdk4net-nav-bg);
  height: 72px;
  padding: 0;
  border-bottom: 1px solid var(--sdk4net-border-light);
  transition: var(--sdk4net-transition);
}

body .header--fixed {
  box-shadow: var(--sdk4net-shadow-light);
}

body .logo {
  display: flex;
  align-items: center;
}

body .logo-image,
body .logo-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sdk4net-text-dark);
  font-family: var(--sdk4net-font-heading);
}

/* Navigation Links */
body .nav-link {
  font-family: var(--sdk4net-font-nav);
  font-size: 15px;
  font-weight: 500;
  color: var(--sdk4net-text-dark);
  text-decoration: none;
  transition: var(--sdk4net-transition-hover);
  padding: 8px 15px;
  display: inline-block;
}

body .nav-link:hover,
body .nav-link--active {
  color: var(--sdk4net-accent);
  border-bottom: 2px solid var(--sdk4net-accent);
}

/* Sprachumschalter: beide Sprachen, die aktive als gefüllter Chip */
body .nav-bar.top-nav .lang-switch {
  border-left: none;
  margin-left: 8px;
  padding-left: 0;
  gap: 4px;
}

body .lang-switch .nav-link.lang-switch__link {
  margin: 0;
  padding: 6px 10px;
  border-radius: var(--sdk4net-radius-btn);
  border-bottom: none !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--sdk4net-text-muted) !important;
}

body .lang-switch .nav-link.lang-switch__link:not(.lang-switch__link--current):hover {
  color: var(--sdk4net-accent) !important;
}

body .lang-switch .nav-link.lang-switch__link.lang-switch__link--current,
body:not(.frontpage) .header .lang-switch .nav-link.lang-switch__link--current {
  background-color: var(--sdk4net-accent);
  color: var(--sdk4net-text-light) !important;
}

body .nav-link--home {
  font-size: 24px;
  font-weight: 700;
  padding: 0 10px;
}

/* base.css hardcodes white !important nav-link/hamburger text for these states,
   assuming a dark header background. SDK4NET's header is always white
   (HP-style nav-bar-top), so it must be forced back to dark text here. */
body .header--fixed .nav-link,
body.frontpage .header:not(.header--fixed) .nav-link,
body:not(.frontpage) .header .nav-link {
  color: var(--sdk4net-text-dark) !important;
}

body .header--fixed .nav-link:hover,
body .header--fixed .nav-link--active,
body.frontpage .header:not(.header--fixed) .nav-link:hover,
body.frontpage .header:not(.header--fixed) .nav-link--active,
body:not(.frontpage) .header .nav-link:hover,
body:not(.frontpage) .header .nav-link--active {
  color: var(--sdk4net-accent) !important;
  border-bottom-color: var(--sdk4net-accent) !important;
}

body:not(.frontpage) .header .nav-link--home {
  color: var(--sdk4net-text-dark) !important;
}

body.frontpage .header:not(.header--fixed) .nav-link--home__text:after {
  background-color: var(--sdk4net-text-dark) !important;
}

/* base.css divider assumes a dark header (translucent white line); barely
   visible on SDK4NET's white header, so use a visible hairline instead. */
body .nav-bar.top-nav .lang-switch {
  border-left: 1px solid var(--sdk4net-border-light);
}

body .header--fixed .hamburger span,
body .header--fixed .hamburger span:after,
body .header--fixed .hamburger span:before,
body.frontpage .header:not(.header--fixed) .hamburger span,
body.frontpage .header:not(.header--fixed) .hamburger span:after,
body.frontpage .header:not(.header--fixed) .hamburger span:before,
body:not(.frontpage) .header .hamburger span,
body:not(.frontpage) .header .hamburger span:after,
body:not(.frontpage) .header .hamburger span:before {
  background-color: var(--sdk4net-text-dark) !important;
}

/* Mobile Navigation */
body .mobile-nav {
  background: var(--sdk4net-bg-white);
  color: var(--sdk4net-text-dark);
}

/* base.css forces white !important nav-link text here too, assuming a dark
   drawer background; override since the SDK4NET drawer is now white. */
body .mobile-nav .nav-link,
body .mobile-nav .nav-link:hover,
body .mobile-nav .nav-link:active,
body .mobile-nav .nav-link--active {
  color: var(--sdk4net-text-dark) !important;
  border-bottom-color: var(--sdk4net-accent) !important;
}


body .hamburger span {
  background-color: var(--sdk4net-text-dark);
  display: block;
  height: 2px;
  margin: 6px 0;
  transition: var(--sdk4net-transition-hover);
}

/* ========== Hero Section ========== */
/* base.css forces white !important heading color on any .section--header,
   assuming a dark hero background image. SDK4NET's hero has no background
   image (plain cloud band per Design.md), so it must be forced back to ink. */
body .section--header h1,
body .section--header h2,
body .section--header h3,
body .section--header h4,
body .section--header h5,
body .section--header h6 {
  color: var(--sdk4net-text-dark) !important;
}

body .section__hero-content {
  text-align: center;
}

body .section__hero-content h1 {
  margin-bottom: var(--sdk4net-space-small);
}

body .section__description {
  font-size: 22px;
  color: var(--sdk4net-text-dark);
  margin-bottom: var(--sdk4net-space-medium);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ========== Sections ========== */
body .section {
  padding: var(--sdk4net-space-medium) 0;
}

body .section--themed {
  background-color: var(--sdk4net-bg-light);
  padding: var(--sdk4net-space-section) 0;
}

body .section__content-center {
  text-align: center;
}

/* base.css sets .section--header padding-top: 120px for the frontpage hero
   overlap (where main has no padding-top). On SDK4NET, main always reserves
   60px for the fixed header (the frontpage/hero-overlap detection in
   _Master.cshtml only matches HFV's "home" content type, so body.frontpage
   never applies here) and the fixed header itself renders ~98px tall
   (bigger logo/nav than HFV's ~75px), so a small padding-top like HFV's 5px
   lets the title render behind/under the header. 60px clears it with a
   comfortable margin on every SDK4NET page.

   padding-bottom is also overridden: .section--themed's padding (below)
   sets it to --sdk4net-space-section (80px), which would leave a large empty
   gap between the title band and the next section. 32px keeps that gap in
   line with the rest of the page. */
body .section--header {
  padding-top: 60px;
  padding-bottom: var(--sdk4net-space-medium);
}

/* ========== Buttons ========== */
body .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 12px 24px;
  border-radius: var(--sdk4net-radius-btn);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transition: var(--sdk4net-transition);
  cursor: pointer;
  border: none;
  font-family: var(--sdk4net-font-nav);
}

/* Primary Button - solid background */
body .button--border--solid {
  background-color: var(--sdk4net-accent);
  color: var(--sdk4net-text-light);
  border: 1px solid var(--sdk4net-accent);
}

body .button--border--solid:hover {
  background-color: var(--sdk4net-accent-hover);
  color: var(--sdk4net-text-light);
  border-color: var(--sdk4net-accent-hover);
}

body .button:disabled,
body .button[aria-disabled="true"] {
  background-color: var(--sdk4net-bg-subtle);
  border-color: var(--sdk4net-bg-subtle);
  color: var(--sdk4net-text-muted);
  cursor: not-allowed;
}

/* Secondary Button - light background */
body .button--border--light_solid {
  background-color: var(--sdk4net-text-light);
  color: var(--sdk4net-primary);
  border: 1px solid var(--sdk4net-accent);
}

body .button--border--light_solid:hover {
  background-color: var(--sdk4net-bg-light);
  color: var(--sdk4net-primary);
  border-color: var(--sdk4net-accent);
}

/* Border Button */
body .button--border {
  background-color: transparent;
  color: var(--sdk4net-accent);
  border: 1px solid var(--sdk4net-accent);
}

body .button--border:hover {
  background-color: var(--sdk4net-accent);
  color: var(--sdk4net-text-light);
}

/* ========== Block Grid & Cards ========== */
body .umb-block-grid {
  display: grid;
  gap: var(--sdk4net-space-medium);
  margin: var(--sdk4net-space-medium) 0;
}

body .umb-block-grid__item {
  background-color: var(--sdk4net-surface);
  border-radius: var(--sdk4net-radius-card);
  padding: var(--sdk4net-space-medium);
  box-shadow: var(--sdk4net-shadow-light);
  transition: var(--sdk4net-transition-hover);
}

body .umb-block-grid__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sdk4net-shadow-card);
}

/* Service Cards / Item Grids */
body .item-grid,
body .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sdk4net-space-medium);
  margin: var(--sdk4net-space-medium) 0;
}

body .item-grid__item,
body .gallery-grid__item {
  background-color: var(--sdk4net-surface);
  border-radius: var(--sdk4net-radius-card);
  padding: var(--sdk4net-space-medium);
  box-shadow: var(--sdk4net-shadow-light);
  transition: var(--sdk4net-transition-hover);
}

body .item-grid__item:hover,
body .gallery-grid__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--sdk4net-shadow-card);
}

/* ========== Blog Posts ========== */
body .blogpost,
body .blogpost-item {
  background-color: var(--sdk4net-surface);
  border-radius: var(--sdk4net-radius-modern);
  padding: var(--sdk4net-space-medium);
  box-shadow: var(--sdk4net-shadow-light);
  transition: var(--sdk4net-transition-hover);
  margin-bottom: var(--sdk4net-space-medium);
}

body .blogpost:hover,
body .blogpost-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--sdk4net-shadow-card);
}

body .blogpost-title {
  color: var(--sdk4net-primary);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

body .blogpost-meta {
  font-size: var(--sdk4net-font-size-small);
  color: var(--sdk4net-text-muted);
  margin-bottom: 15px;
}

body .blogpost-excerpt {
  font-size: 15px;
  color: var(--sdk4net-text-dark);
  line-height: 1.6;
}

/* ========== Links & Text Colors ========== */
body a {
  color: var(--sdk4net-accent);
  text-decoration: none;
  transition: var(--sdk4net-transition-hover);
}

body a:hover {
  color: var(--sdk4net-primary);
}

body .nav-link,
body footer a {
  color: var(--sdk4net-text-dark);
  text-decoration: none;
}

body .nav-link:hover,
body footer a:hover {
  color: var(--sdk4net-text-light);
}

/* Non-frontpage Header */
body:not(.frontpage) .header--fixed {
  background: var(--sdk4net-nav-bg);
}

body:not(.frontpage) .header {
  background: var(--sdk4net-nav-bg) !important;
}

/* Extra strong override for footer nav-links */
body footer .nav-link,
body footer a.nav-link {
  color: var(--sdk4net-on-dark) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

body footer .nav-link:hover,
body footer .nav-link--active,
body footer a.nav-link:hover {
  color: var(--sdk4net-text-light) !important;
  border-bottom-color: transparent !important;
}

/* Navigation Home Link (site name / logo text) */
body .nav-link--home {
  color: var(--sdk4net-text-dark) !important;
}

/* Sub-Navigation Toggle */

/* Breadcrumb */
body .breadcrumb__link {
  color: var(--sdk4net-text-muted);
}

body .breadcrumb__link:hover {
  color: var(--sdk4net-accent);
}

body .breadcrumb__current {
  color: var(--sdk4net-text-dark);
}

body .breadcrumb__item::after {
  color: var(--sdk4net-text-muted);
}


body .font-main-color {
  color: var(--sdk4net-primary);
}

body .font-link-color {
  color: var(--sdk4net-accent);
}

body .bg-main-color {
  background-color: var(--sdk4net-primary);
}

body .border-main-color {
  border-color: var(--sdk4net-primary);
}

/* ========== Footer ========== */
/* Selector specificity note: <footer class="section--themed"> also matches
   the generic .section--themed rule (light-gray bg) above, which has higher
   specificity than a plain `footer` element selector and would otherwise win,
   leaving white footer text on a light background. Target footer.section--themed
   directly so the navy background always wins. */
body footer,
body footer.section--themed {
  background-color: var(--sdk4net-navy);
  color: var(--sdk4net-on-dark);
  padding: 48px 0 32px;
  text-align: left;
}

/* Board „Footer“: oben Marke (mit Namenszeile) links und Links rechts, darunter eine Haarlinie,
   unten Copyright links und Cookie-Einstellungen rechts. footer__row löst sich auf (contents),
   damit alle Teile Zellen desselben Rasters sind. */
body footer .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand nav"
    "addr nav"
    "rule rule"
    "copy cookie";
  column-gap: 48px;
  align-items: start;
  margin: 0;
}

body footer .row > * {
  width: auto;
  max-width: none;
  padding: 0;
  margin-top: 0;
}

body footer .row::before {
  content: "";
  grid-area: rule;
  height: 1px;
  margin: 32px 0;
  background: var(--sdk4net-hairline-dark);
}

body footer .footer__row {
  display: contents;
}

body footer .footer__brand {
  display: block;
  grid-area: brand;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--sdk4net-text-light);
  text-align: left;
  text-decoration: none;
}

body footer .footer__brand .logo-text__accent {
  color: var(--sdk4net-on-dark-brand);
}

body footer .footer__address {
  grid-area: addr;
  margin: 6px 0 0;
  font-size: 15px;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  color: var(--sdk4net-on-dark-muted);
}

body footer .footer__nav {
  display: flex;
  grid-area: nav;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 28px;
}

body footer .consent-footer-link {
  grid-area: cookie;
  justify-self: end;
  font-weight: 500;
  text-decoration: underline !important;
}

body footer .footer__sep {
  display: none;
}

body footer .consent-footer-link {
  text-decoration: underline;
  color: var(--sdk4net-text-light) !important;
}

body footer .footer__copyright {
  display: flex;
  grid-area: copy;
  align-items: center;
  min-height: 44px;
  margin: 0;
  font-size: 14px;
  color: var(--sdk4net-on-dark-muted);
}

@media (max-width: 767px) {
  body footer .row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "addr"
      "nav"
      "rule"
      "copy"
      "cookie";
  }

  body footer .row::before {
    margin: 16px 0;
  }

  body footer .footer__nav {
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 16px;
  }

  body footer .consent-footer-link {
    justify-self: start;
  }
}

body footer a {
  color: var(--sdk4net-text-light);
  transition: var(--sdk4net-transition-hover);
}

body footer a:hover {
  color: var(--sdk4net-text-light);
}

body .nav-fake {
  display: inline-block;
  margin-bottom: 10px;
}

/* ========== Forms ========== */
body .form-control,
body input[type="text"],
body input[type="email"],
body textarea {
  border-radius: var(--sdk4net-radius-input);
  border: 1px solid var(--sdk4net-border-input);
  min-height: 44px;
  padding: 10px 16px;
  font-family: var(--sdk4net-font-body);
  font-size: 16px;
  transition: var(--sdk4net-transition-hover);
}

body .form-control:focus,
body input[type="text"]:focus,
body input[type="email"]:focus,
body textarea:focus {
  border-color: var(--sdk4net-accent);
  box-shadow: var(--sdk4net-focus-ring);
  outline: none;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  body h1 {
    font-size: 34px;
    line-height: 1.15;
  }

  body h2 {
    font-size: 24px;
  }

  body .section--full-height {
    min-height: 60vh;
    padding: 80px 0 40px 0;
  }

  body .section__hero-content h1 {
    font-size: 34px;
  }

  body .section__description {
    font-size: 16px;
  }

  body .button {
    padding: 8px 20px 10px 20px;
    font-size: 14px;
  }

  body .item-grid,
  body .gallery-grid {
    grid-template-columns: 1fr;
  }

  body .section {
    padding: 40px 0;
  }

  body .section--themed {
    padding: 40px 0;
  }
}

/* ========== Utility Classes ========== */
body .ta-center {
  text-align: center;
}

body .ma-h-auto {
  margin-left: auto;
  margin-right: auto;
}

body .mw-640 {
  max-width: 640px;
}

body .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

@media (min-width: 1200px) {
  body .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Buttons — replace green with SDK4NET accent */
body .btn,
body input[type="submit"] {
  background-color: var(--sdk4net-accent) !important;
  border-color: var(--sdk4net-accent) !important;
  color: var(--sdk4net-text-light) !important;
}

body .btn:hover,
body input[type="submit"]:hover {
  background-color: var(--sdk4net-accent-hover) !important;
  border-color: var(--sdk4net-accent-hover) !important;
  box-shadow: var(--sdk4net-shadow-hover) !important;
}

/* Form Control Focus — accent color instead of green */
body .form-control:focus {
  border-color: var(--sdk4net-accent) !important;
  box-shadow: var(--sdk4net-focus-ring) !important;
}

/* Push Opt-in Banner */
body .push-optin-banner {
  background: var(--sdk4net-surface);
  border: 0;
  border-radius: var(--sdk4net-radius-card);
  box-shadow: var(--sdk4net-shadow-dropdown);
}

body .push-optin-banner__icon {
  background: var(--sdk4net-accent);
  color: var(--sdk4net-text-light);
}

body .push-optin-banner__title {
  color: var(--sdk4net-text-dark);
  font-family: var(--sdk4net-font-heading);
}

body .push-optin-banner__text {
  color: var(--sdk4net-text-muted);
  font-family: var(--sdk4net-font-body);
}

body .push-optin-banner__cta {
  background-color: var(--sdk4net-accent);
  border-color: var(--sdk4net-accent);
  color: var(--sdk4net-text-light);
}

body .push-optin-banner__cta:hover {
  background-color: var(--sdk4net-accent-hover);
  border-color: var(--sdk4net-accent-hover);
}

body .push-optin-banner__dismiss {
  background: none;
  border-color: var(--sdk4net-border-light);
  color: var(--sdk4net-text-muted);
}

body .push-optin-banner__dismiss:hover {
  border-color: var(--sdk4net-accent);
  color: var(--sdk4net-accent);
}

/* PWA: Schritte (iPhone-Anleitung) und Update-Hinweis */
body .pwa-steps {
  color: var(--sdk4net-text-dark);
  font-family: var(--sdk4net-font-body);
}

body .pwa-steps__num,
body .pwa-steps .bi {
  color: var(--sdk4net-accent);
}

body .pwa-update {
  background: var(--sdk4net-text-dark);
  color: var(--sdk4net-text-light);
  border-radius: 8px;
  box-shadow: var(--sdk4net-shadow-dropdown);
  font-family: var(--sdk4net-font-body);
}

/* Footer Navigation */
body footer .nav-link {
  color: var(--sdk4net-on-dark) !important;
  transition: color 0.3s ease !important;
}

body footer .nav-link:hover {
  color: var(--sdk4net-text-light) !important;
  text-decoration: underline !important;
}

/* Override general links if they accidentally inherit old colors */
body a:not([style*="color"]) {
  color: var(--sdk4net-accent);
  text-decoration: none;
}

body a:not(.nav-link):not(.nav-fake):not([style*="color"]):hover {
  color: var(--sdk4net-primary);
  text-decoration: none;
}

/* Ensure footer links use the right color scheme */
body footer a,
body .nav-fake a {
  color: var(--sdk4net-text-light) !important;
  text-decoration: none !important;
}

body footer a:hover,
body .nav-fake a:hover {
  color: var(--sdk4net-text-light) !important;
  text-decoration: none !important;
}


/* Force override for all footer and nav-fake links */
body .nav-fake {
  display: inline-block;
  margin-bottom: 10px;
}

body .nav-fake a,
body footer .nav-fake a {
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: 1px solid #ffffff !important;
}

body .nav-fake a:hover,
body footer .nav-fake a:hover {
  color: var(--sdk4net-on-dark-brand) !important;
  border-bottom-color: var(--sdk4net-on-dark-brand) !important;
}

/* Container Images — replace green border with subtle accent */
body .container img {
  border-color: var(--sdk4net-accent) !important;
}

/* Pagination — hover/active states */
body .pagination .nav-link:hover:not(.nav-link--disabled),
body .pagination .nav-link--active {
  background-color: var(--sdk4net-accent) !important;
  color: var(--sdk4net-text-light) !important;
  border-color: var(--sdk4net-accent) !important;
  box-shadow: var(--sdk4net-shadow-hover) !important;
}

/* Blogpost Accents */
body .blogpost:hover .blogpost-title {
  color: var(--sdk4net-accent) !important;
}

body .blogpost-date {
  color: var(--sdk4net-accent) !important;
}

body .blogpost-cat a {
  background-color: var(--sdk4net-tint) !important;
  color: var(--sdk4net-accent) !important;
  border-color: var(--sdk4net-accent) !important;
}

body .blogpost-cat a:hover {
  background-color: var(--sdk4net-accent) !important;
  color: var(--sdk4net-text-light) !important;
  border-color: var(--sdk4net-accent) !important;
}

/* ========== Career Timeline (BlockElement_timelineEntry blocks) ========== */
body .umb-block-grid__layout-item[data-content-element-type-alias="blockElementTimelineEntry"] {
  position: relative;
  padding-left: 52px;
  padding-bottom: var(--sdk4net-space-medium);
}

body .umb-block-grid__layout-item[data-content-element-type-alias="blockElementTimelineEntry"]:last-of-type {
  padding-bottom: 0;
}

body .timeline-entry__rail {
  position: absolute;
  left: 11px;
  top: 12px;
  bottom: -36px;
  width: 2px;
}

body .umb-block-grid__layout-item[data-content-element-type-alias="blockElementTimelineEntry"]:last-of-type .timeline-entry__rail {
  bottom: auto;
  height: 30px;
}

body .timeline-entry__rail::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 2px;
  background: var(--sdk4net-bg-subtle);
}

body .timeline-entry__dot {
  position: absolute;
  top: 14px;
  left: -11px;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: var(--sdk4net-radius-circle);
  background: var(--sdk4net-bg-white);
  border: 4px solid var(--sdk4net-primary);
}

body .timeline-entry__card {
  background: var(--sdk4net-surface);
  border-radius: var(--sdk4net-radius-card);
  box-shadow: var(--sdk4net-shadow-card);
  padding: 24px 28px;
  transition: box-shadow var(--sdk4net-transition-hover);
}

body .timeline-entry__card:hover {
  box-shadow: var(--sdk4net-shadow-hover);
}

body .timeline-entry__period {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--sdk4net-accent);
  margin-bottom: 8px;
}

body .timeline-entry__role {
  font-family: var(--sdk4net-font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--sdk4net-text-dark);
  margin: 0 0 4px;
}

body .timeline-entry__description {
  color: var(--sdk4net-text-body);
  font-size: var(--sdk4net-font-size-body);
  line-height: 1.6;
}

body .timeline-entry__company {
  font-family: var(--sdk4net-font-heading);
  color: var(--sdk4net-text-muted);
  font-weight: 500;
  font-size: 16px;
  margin: 0 0 12px;
}

body .timeline-entry__description p:last-child {
  margin-bottom: 0;
}

body .timeline-entry__highlights-label {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--sdk4net-text-muted);
}

body .timeline-entry__highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

body .timeline-entry__highlight {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 2px 10px;
  align-items: baseline;
}

body .timeline-entry__highlight > :not(.timeline-entry__highlight-icon) {
  grid-column: 2;
}

body .timeline-entry__highlight-icon {
  flex: none;
  color: var(--sdk4net-accent);
}

body .timeline-entry__highlight-title {
  color: var(--sdk4net-text-dark);
  font-weight: 600;
}

body .timeline-entry__highlight-description {
  font-weight: 400;
  color: var(--sdk4net-text-body);
}

@media (max-width: 767px) {
  body .umb-block-grid__layout-item[data-content-element-type-alias="blockElementTimelineEntry"] {
    padding-left: 40px;
  }

  body .timeline-entry__rail {
    left: 9px;
  }

  body .timeline-entry__card {
    padding: 20px;
  }
}

/* ========== Fact List / Skills List / Contact Links ========== */
body .fact-list {
  margin: 0;
  padding: 0;
}

body .fact-list__item {
  padding: var(--sdk4net-space-small) 0;
  border-bottom: 1px solid var(--sdk4net-border-light);
}

body .fact-list__item:last-child {
  border-bottom: none;
}

body .fact-list__label {
  margin: 0;
  font-weight: 600;
  color: var(--sdk4net-text-muted);
  font-size: 14px;
}

body .fact-list__value {
  margin: 0;
  color: var(--sdk4net-text-dark);
}

body .skills-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
}

body .skills-list__item {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 500;
  color: var(--sdk4net-text-dark);
}

body .skills-list__item::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--sdk4net-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body .link-list__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--sdk4net-text-dark);
}

body .link-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: 14px;
  border-radius: var(--sdk4net-radius-circle);
  background: var(--sdk4net-tint);
  color: var(--sdk4net-accent);
}

body .link-list__link:hover {
  color: var(--sdk4net-accent);
}

/* ========== Kommentare ========== */
body .comments { border-top: 1px solid var(--sdk4net-border-light); }
body .comments__title, body .comment__author, body .comment__avatar, body .comment-form__title { font-family: var(--sdk4net-font-heading); color: var(--sdk4net-navy); }
body .comments__title .bi, body .comment__reply, body .comment-form__cancel { color: var(--sdk4net-accent); }
body .comments__empty, body .comment__date, body .comment-form__hint, body .comment-form__note { color: var(--sdk4net-text-muted); }
body .comments__replies { border-left-color: var(--sdk4net-border-light); }
body .comment__avatar { background: var(--sdk4net-bg-white); border-color: var(--sdk4net-accent); }
body .comment--team .comment__avatar { border-color: var(--sdk4net-navy); }
body .comment__badge { background: var(--sdk4net-navy); color: var(--sdk4net-text-light); }
body .comment__text { color: var(--sdk4net-text-dark); }
body .comment__reply:hover, body .comment-form__cancel:hover { color: var(--sdk4net-accent-hover); text-decoration: underline; }
body .comment-form { background: var(--sdk4net-bg-light); border: 1px solid var(--sdk4net-border-light); border-radius: var(--sdk4net-radius-card); }
body .comment-form__replying { background: var(--sdk4net-bg-white); border: 1px solid var(--sdk4net-border-light); }
body .comment-form__consent input { accent-color: var(--sdk4net-accent); }

/* ========== Reaktionen ========== */
body .reactions { background: var(--sdk4net-bg-light); border: 1px solid var(--sdk4net-border-light); }
body .reactions__title { font-family: var(--sdk4net-font-heading); color: var(--sdk4net-navy); }
body .reactions__total, body .reactions__hint { color: var(--sdk4net-text-muted); }
body .reaction { background: var(--sdk4net-bg-white); border-color: var(--sdk4net-border-light); color: var(--sdk4net-text-dark); }
body .reaction:hover:not(:disabled), body .reaction[aria-pressed="true"] { border-color: var(--sdk4net-accent); }
body .reaction__count, body .reaction-icon, body .comment__like { color: var(--sdk4net-accent); }
body .reaction[aria-pressed="true"] .reaction-icon__fill, body .comment__like[aria-pressed="true"] .reaction-icon__fill { fill: currentColor; fill-opacity: .25; }

/* Cookie-Einwilligung */
body {
  --consent-primary: var(--sdk4net-primary);
  --consent-primary-hover: var(--sdk4net-accent-hover);
  --consent-on-primary: #fff;
  --consent-accent-text: var(--sdk4net-primary);
  --consent-accent-text-hover: var(--sdk4net-accent-hover);
  --consent-tint: var(--sdk4net-bg-light);
  --consent-hover-tint: var(--sdk4net-bg-light);
  --consent-border: var(--sdk4net-border-light);
}
body .consent-button--primary:hover { color: #fff; }

body .link-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body .timeline-entry__highlight-description p {
  margin: 0;
}

body .timeline-entry__highlights {
  gap: 12px;
}

body a.link-list__link:not([style*="color"]) {
  color: var(--sdk4net-text-dark);
}

body a.link-list__link:not([style*="color"]):hover {
  color: var(--sdk4net-accent);
}

/* ========== Kontaktformular ========== */
body .contact-form {
  max-width: 720px;
  background: var(--sdk4net-surface);
  border: 1px solid var(--sdk4net-border-light);
  border-radius: var(--sdk4net-radius-card);
  box-shadow: var(--sdk4net-shadow-light);
  padding: 36px;
}

body .contact-form form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

body .contact-form .form-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sdk4net-text-dark);
}

body .contact-form .form-control {
  width: 100%;
  min-height: 44px;
  border-color: var(--sdk4net-border-input);
}

body .contact-form textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

body .contact-form .invalid-feedback {
  color: #b3262b;
  font-size: 14px;
}

body .contact-form input[type="submit"] {
  height: 44px;
  padding: 0 32px;
  border-radius: var(--sdk4net-radius-btn);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}

body .contact-form__status {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 720px;
  background: var(--sdk4net-tint);
  border: 0;
  border-radius: 8px;
  padding: 18px 20px;
  color: var(--sdk4net-text-dark);
  line-height: 1.6;
}

body .contact-form__status::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  background: var(--sdk4net-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body input:focus-visible,
body textarea:focus-visible {
  outline: 2px solid var(--sdk4net-accent);
  outline-offset: 1px;
}

/* ========== Titelband mit Brotkrumen (Board: Brotkrumen über der Überschrift, ein graues Band) ========== */
body main {
  display: flex;
  flex-direction: column;
  padding-top: 72px;
}

body .breadcrumb {
  order: -1;
  background: var(--sdk4net-bg-light);
  padding: 32px 0 0;
}

body .breadcrumb .container,
body .section--header .section__hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

body .section--header {
  min-height: 0;
  padding: 20px 0 48px;
  border-bottom: 1px solid var(--sdk4net-border-light);
}

body .section--header .section__hero-content,
body .section--header .section__hero-content h1,
body .section--header .section__description {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

body .section--header .section__description {
  margin-left: 0;
  max-width: 720px;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0;
}

body .section--header .section__hero-content h1 {
  margin-bottom: 0;
}

body .breadcrumb__link {
  color: var(--sdk4net-accent);
}

body .breadcrumb__link:hover {
  text-decoration: underline;
}

body .breadcrumb__current {
  font-weight: 500;
  color: var(--sdk4net-text-muted);
}

/* Titelband ohne Brotkrumen (Startseite): oben nicht zusätzlich einrücken */
body .section--header:first-child {
  padding-top: 48px;
}

/* ========== Inhaltsseiten: Lesespalte, Lead, Codeblock ========== */
body .col-sm-12 > article {
  max-width: 760px;
}

/* Seiten mit Layout-Blöcken (Startseite) und die Zeitleiste nutzen die volle Containerbreite */
body .col-sm-12 > article:has([data-content-element-type-alias^="BlockGridLayout"], [data-content-element-type-alias="blockElementTimelineEntry"]) {
  max-width: none;
}

body article h2 {
  font-size: 32px;
  font-weight: 700;
  margin: 48px 0 16px;
}

body article h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 32px 0 12px;
}

body article > .umb-block-grid > .umb-block-grid__layout-item:first-child p:first-child {
  font-size: 18px;
}

body article pre {
  background: var(--sdk4net-navy);
  color: var(--sdk4net-on-dark);
  border-radius: 8px;
  padding: 20px 24px;
  overflow-x: auto;
  font-size: 14px;
  line-height: 1.6;
}

body article pre code {
  color: inherit;
  background: none;
}

body article :not(pre) > code {
  background: var(--sdk4net-bg-light);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.9em;
}

/* ========== Kommentare & Reaktionen: Eingaben und Pillen ========== */
body .comment-form .form-control,
body .comment-form input[type="text"],
body .comment-form input[type="email"],
body .comment-form textarea {
  border-color: var(--sdk4net-border-input);
  min-height: 44px;
}

body .comment-form textarea {
  min-height: 120px;
}

body .reaction {
  min-height: 44px;
  border-radius: 22px;
  padding: 0 16px;
}

body .reaction[aria-pressed="true"] {
  background: var(--sdk4net-tint);
  border-color: var(--sdk4net-accent);
}

body .section--header .section__hero-content {
  width: 100%;
}

body h1,
body h2,
body h3 {
  text-transform: none;
}

/* ========== Navigation: normale Schreibweise statt Versalien (Board Header/Footer/Unternavigation) ========== */
body .nav-link,
body footer .nav-link,
body .consent-footer-link {
  text-transform: none;
  letter-spacing: 0;
}

body .nav-bar.top-nav .nav-link {
  font-size: 15px;
  line-height: 20px;
  margin: 0 0 0 28px;
  padding: 26px 0 24px;
}

body .nav-link.logo-text {
  text-transform: uppercase;
}

body footer .nav-link {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

body .sub-navigation-content a.nav-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 4px 0;
  padding: 0 16px;
  border-radius: var(--sdk4net-radius-btn);
  font-size: 15px;
  font-weight: 500;
}

body .sub-navigation-content a.nav-link:hover {
  padding-left: 16px;
  background: var(--sdk4net-bg-light);
}

body .sub-navigation-content a.nav-link--active,
body .sub-navigation-content a.nav-link--active:hover {
  background: var(--sdk4net-tint);
  color: var(--sdk4net-accent);
  font-weight: 700;
}

body .sub-navigation-toggle__label,
body .sub-navigation-col .nav-bar > :first-child {
  letter-spacing: 0.7px;
}

body .nav-bar.top-nav .lang-switch .nav-link.lang-switch__link {
  margin: 0;
  padding: 6px 10px;
  line-height: 1.4;
  font-size: 13px;
}

@media (max-width: 768px) {
  body .header,
  body .header--fixed {
    height: 64px;
  }

  body main {
    padding-top: 64px;
  }

  body .breadcrumb {
    padding-top: 24px;
  }

  body .section--header {
    padding-bottom: 32px;
  }

  body .section--header:first-child {
    padding-top: 32px;
  }

  body .contact-form {
    padding: 24px 20px;
  }

  body article h2 {
    font-size: 26px;
    margin-top: 36px;
  }

  body .logo-image,
  body .logo-text {
    font-size: 18px;
  }
}

/* ========== Startseite (Profil): Hero und drei Karten im grauen Band ========== */
body [data-content-element-type-alias="BlockGridLayout_TwoColumns"] {
  align-items: center;
}

body [data-content-element-type-alias="BlockElement_rte"] p:first-child {
  font-size: 20px;
  line-height: 1.6;
  color: var(--sdk4net-text-body);
}

body [data-content-element-type-alias="BlockElement_media"] img {
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--sdk4net-radius-card);
  margin-left: auto;
}

body [data-content-element-type-alias="BlockGridLayout_ThreeColumns"] {
  background: var(--sdk4net-bg-light);
  box-shadow: 0 0 0 100vmax var(--sdk4net-bg-light);
  clip-path: inset(0 -100vmax);
  padding: 24px 0;
  margin-top: 24px;
}

body [data-content-element-type-alias="blockElementFactList"],
body [data-content-element-type-alias="blockElementSkillsList"],
body [data-content-element-type-alias="blockElementLinkList"] {
  background: var(--sdk4net-surface);
  border-radius: var(--sdk4net-radius-card);
  box-shadow: var(--sdk4net-shadow-light);
  padding: 32px;
  height: 100%;
  box-sizing: border-box;
}

body [data-content-element-type-alias="blockElementFactList"] h3,
body [data-content-element-type-alias="blockElementSkillsList"] h3,
body [data-content-element-type-alias="blockElementLinkList"] h3 {
  font-size: 24px;
  margin: 0 0 20px;
}

/* ========== Dokumentation: Tabellen, Bilder, Themenkacheln ========== */
body article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--sdk4net-radius-card);
}

body .doc-table-wrap {
  overflow-x: auto;
  margin: 0 0 24px;
}

body article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

body article table th,
body article table td {
  padding: 10px 14px;
  border: 1px solid var(--sdk4net-bg-subtle);
  text-align: left;
  vertical-align: top;
}

body article table thead th {
  background: var(--sdk4net-tint);
  color: var(--sdk4net-text-dark);
  font-weight: 700;
}

body article table tbody th {
  width: 200px;
  background: var(--sdk4net-bg-light);
  font-weight: 600;
  color: var(--sdk4net-text-dark);
}

body article table td ul {
  margin: 0;
  padding-left: 20px;
}

body article .doc-grid:has(.doc-card) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 32px;
}

body article .doc-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--sdk4net-surface);
  border: 1px solid var(--sdk4net-border-light);
  border-radius: var(--sdk4net-radius-card);
  box-shadow: var(--sdk4net-shadow-light);
}

body article .doc-card a {
  color: var(--sdk4net-text-body);
  font-size: 15px;
}

body article .doc-card h4 {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--sdk4net-accent);
}

@media (max-width: 768px) {
  body article .doc-grid:has(.doc-card) {
    grid-template-columns: 1fr;
  }
}

body .sub-navigation-content a.nav-link--child {
  margin-left: 16px;
  min-height: 40px;
  font-size: 14px;
  color: var(--sdk4net-text-body);
}

/* Doku-Icons sind 128 px groß: in kleiner Größe anzeigen, sonst werden sie unscharf hochskaliert */
body article .doc-card img {
  width: 72px;
  height: 72px;
  border-radius: 0;
}

body article .doc-grid:not(:has(.doc-card)) > img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 0;
  margin: 0 0 20px;
}

/* ========== Handy und Touch-Ziele (Audit 2026-10-23) ========== */

/* Layout-Blöcke (Startseite): Spalten stapeln unter 1024 px. Das Starterkit skaliert Areas mit der
   Item-Spanne statt der Area-Spanne, dadurch blieben sie auf dem Handy nebeneinander (Karten nur ~32 px breit). */
@media (max-width: 1023px) {
  body [data-content-element-type-alias="BlockGridLayout_TwoColumns"] .umb-block-grid__area,
  body [data-content-element-type-alias="BlockGridLayout_ThreeColumns"] .umb-block-grid__area {
    grid-column: 1 / -1;
  }

  body [data-content-element-type-alias="BlockGridLayout_TwoColumns"] .umb-block-grid__area-container,
  body [data-content-element-type-alias="BlockGridLayout_ThreeColumns"] .umb-block-grid__area-container {
    row-gap: 16px;
  }

  body [data-content-element-type-alias="BlockElement_media"] img {
    margin-left: 0;
  }
}

/* Zeitleiste: lange Wörter dürfen umbrechen, sonst scrollt die Seite seitlich */
body .timeline-entry__highlight {
  grid-template-columns: 18px minmax(0, 1fr);
}

body .timeline-entry__card,
body .timeline-entry__highlight-title,
body .timeline-entry__highlight-description,
body .doc-card {
  overflow-wrap: anywhere;
}

/* Touch-Ziele mindestens 44 px, ohne die sichtbare Größe zu ändern */
body footer .nav-link,
body footer .consent-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

body .logo .nav-link--home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

body .lang-switch .nav-link.lang-switch__link {
  position: relative;
}

body .lang-switch .nav-link.lang-switch__link::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

body .sub-navigation-content a.nav-link,
body .sub-navigation-content a.nav-link--child {
  min-height: 44px;
}

/* Sichtbarer Tastaturfokus */
body a:focus-visible,
body button:focus-visible,
body summary:focus-visible {
  outline: 2px solid var(--sdk4net-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

body footer a:focus-visible,
body footer button:focus-visible {
  outline-color: var(--sdk4net-text-light);
}

/* Bewegung reduzieren: Hover-Anheben und Übergänge entfallen, Zustände bleiben erkennbar */
@media (prefers-reduced-motion: reduce) {
  body *,
  body *::before,
  body *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  body .umb-block-grid__item:hover,
  body .item-grid__item:hover,
  body .gallery-grid__item:hover,
  body .blogpost:hover,
  body .blogpost-item:hover,
  body .timeline-entry__card:hover {
    transform: none;
  }
}

/* ========== Dokumentation: Detailseite (Zusammenfassung + eine Parametertabelle) ========== */
body .doc-summary {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 0 0 40px;
}

body .doc-summary img {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 0;
}

body .doc-facts {
  flex: 1;
  min-width: 0;
}

body .doc-facts th {
  width: 220px;
}

body .doc-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

body .doc-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--sdk4net-radius-btn);
  background: var(--sdk4net-tint);
  font-size: 14px;
  font-weight: 600;
}

body .doc-params {
  min-width: 640px;
}

body .doc-params tbody th {
  width: 36%;
  background: var(--sdk4net-surface);
}

body .doc-params td {
  white-space: nowrap;
}

body .doc-params td:nth-child(5) {
  white-space: normal;
  overflow-wrap: anywhere;
}

body .doc-params tbody tr:target th,
body .doc-params tbody tr:target td {
  background: var(--sdk4net-tint);
}

body .doc-anchor {
  display: block;
  font-weight: 700;
  color: var(--sdk4net-text-dark);
}

body .doc-anchor:hover {
  color: var(--sdk4net-accent);
}

body .doc-param-desc,
body .doc-param-dep {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--sdk4net-text-body);
}

body .doc-param-dep {
  color: var(--sdk4net-text-muted);
}

body .doc-params code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13px;
  background: var(--sdk4net-bg-light);
  border-radius: 4px;
  padding: 2px 6px;
}

body .doc-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: var(--sdk4net-radius-btn);
  background: transparent;
  color: var(--sdk4net-text-muted);
  vertical-align: middle;
  cursor: pointer;
}

body .doc-copy::after {
  content: "";
  position: absolute;
  inset: -8px;
}

body .doc-copy:hover,
body .doc-copy.is-copied {
  background: var(--sdk4net-tint);
  color: var(--sdk4net-accent);
}

@media (max-width: 768px) {
  body .doc-summary {
    flex-direction: column;
    gap: 16px;
  }

  body .doc-facts th {
    width: 40%;
  }
}

/* ========== Dokumentation: Suche und mitlaufende Navigation ========== */
body .docs-search {
  position: relative;
  margin: 0 0 16px;
}

body .docs-search__label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--sdk4net-text-dark);
}

body .docs-search__input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--sdk4net-border-input);
  border-radius: var(--sdk4net-radius-input);
  font-size: 16px;
  background: var(--sdk4net-surface);
  color: var(--sdk4net-text-dark);
}

body .docs-search__results {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--sdk4net-surface);
  border-radius: var(--sdk4net-radius-card);
  box-shadow: var(--sdk4net-shadow-dropdown);
}

body .docs-search__results[hidden] {
  display: none;
}

body .docs-search__results a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--sdk4net-radius-btn);
  color: var(--sdk4net-text-dark);
}

body .docs-search__results li[aria-selected="true"] a,
body .docs-search__results a:hover {
  background: var(--sdk4net-tint);
  color: var(--sdk4net-accent);
}

body .docs-search__title {
  display: block;
  font-weight: 600;
}

body .docs-search__section {
  display: block;
  font-size: 13px;
  color: var(--sdk4net-text-muted);
}

body .docs-search__status {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--sdk4net-text-muted);
}

body .docs-search__status:empty {
  display: none;
}

@media (min-width: 769px) {
  body .sub-navigation-col--docs {
    position: sticky;
    top: 88px;
    align-self: flex-start;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
  }
}

/* Spaltenbreiten der Parametertabelle und Suchbeschriftung */
body .doc-params {
  min-width: 780px;
}

body .doc-params tbody th {
  width: 30%;
}

body .doc-params th:nth-child(2),
body .doc-params td:nth-child(2) {
  width: 96px;
}

body .doc-params th:nth-child(3),
body .doc-params td:nth-child(3) {
  width: 84px;
}

body .doc-params td:nth-child(4) {
  min-width: 110px;
}

body .doc-params td:nth-child(5) {
  min-width: 220px;
  width: 26%;
}

body .docs-search__label {
  text-transform: none;
  letter-spacing: 0;
}

body .doc-params {
  min-width: 600px;
}

body .doc-params td:nth-child(4) {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

body .doc-params td:nth-child(5) {
  min-width: 0;
}

body .doc-facts td {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  body .doc-facts {
    width: 100%;
    table-layout: fixed;
  }
}


/* ========== Header Variante A: Menü, Trennlinie, Sprache als eigene Gruppe (Board „Header“) ========== */
body .header,
body .header--fixed {
  box-shadow: var(--sdk4net-shadow-light);
}

body .logo-text__accent {
  color: var(--sdk4net-accent);
}

body .nav-bar.top-nav .lang-switch,
body .mobile-nav .lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

body .nav-bar.top-nav .lang-switch {
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid var(--sdk4net-border-input);
}

body .nav-bar.top-nav .lang-switch::before,
body .mobile-nav .lang-switch::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  background: var(--sdk4net-text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E") center / contain no-repeat;
}

body .nav-bar.top-nav .lang-switch .nav-link.lang-switch__link,
body .mobile-nav .lang-switch .nav-link.lang-switch__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 34px;
  margin: 0 0 0 -1px;
  padding: 0 8px;
  border: 1px solid var(--sdk4net-border-input) !important;
  border-radius: 0;
  background: var(--sdk4net-surface);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--sdk4net-text-body) !important;
}

body .nav-bar.top-nav .lang-switch .nav-link.lang-switch__link:first-of-type,
body .mobile-nav .lang-switch .nav-link.lang-switch__link:first-of-type {
  margin-left: 0;
  border-radius: 4px 0 0 4px;
}

body .nav-bar.top-nav .lang-switch .nav-link.lang-switch__link:last-of-type,
body .mobile-nav .lang-switch .nav-link.lang-switch__link:last-of-type {
  border-radius: 0 4px 4px 0;
}

body .nav-bar.top-nav .lang-switch .nav-link.lang-switch__link.lang-switch__link--current,
body .mobile-nav .lang-switch .nav-link.lang-switch__link.lang-switch__link--current {
  background: var(--sdk4net-accent);
  border-color: var(--sdk4net-accent) !important;
  color: var(--sdk4net-text-light) !important;
}

body .nav-bar.top-nav .lang-switch .nav-link.lang-switch__link:not(.lang-switch__link--current):hover {
  background: var(--sdk4net-tint);
  color: var(--sdk4net-accent) !important;
}

/* Handy-Menü: Sprache als eigene Gruppe unter den Links, 44-px-Ziele */
body .mobile-nav .lang-switch {
  margin: 8px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--sdk4net-border-light);
  border-left: 0;
}

body .mobile-nav .lang-switch .nav-link.lang-switch__link {
  min-width: 56px;
  height: 44px;
  font-size: 14px;
}

/* ========== Startseite ohne graues Titelband (Board „Main“): Titel im Hero, mittig neben dem Porträt ========== */
body .page-title {
  margin: 0 0 24px;
  font-size: 56px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-align: left;
}

body .section--hero {
  padding: 72px 0 0;
}

body .section--hero [data-content-element-type-alias="BlockGridLayout_ThreeColumns"] {
  margin-top: 80px;
  padding: 48px 0;
}

@media (max-width: 767px) {
  body .page-title {
    font-size: 34px;
    line-height: 1.15;
  }

  body .section--hero {
    padding-top: 32px;
  }

  body .section--hero [data-content-element-type-alias="BlockGridLayout_ThreeColumns"] {
    margin-top: 40px;
    padding: 24px 0;
  }
}

body .logo-text__accent {
  font-weight: inherit;
  font-family: inherit;
}

body .nav-bar.top-nav .lang-switch .nav-link.lang-switch__link,
body .mobile-nav .lang-switch .nav-link.lang-switch__link {
  box-sizing: border-box;
  width: 40px;
  padding: 0;
}

body .mobile-nav .lang-switch .nav-link.lang-switch__link {
  width: 56px;
}

body [data-content-element-type-alias="BlockGridLayout_TwoColumns"] .umb-block-grid__area-container {
  align-items: center;
}


/* Doku-Startseite: große Suche im Inhalt (Board „DokuStart“) */
body .docs-search--large {
  max-width: 760px;
  margin: 0 0 32px;
}

body .docs-search--large .docs-search__label {
  font-size: 20px;
  font-weight: 700;
}

body .docs-search--large .docs-search__input {
  min-height: 56px;
  padding: 0 18px;
  font-size: 18px;
}

body .docs-search__hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--sdk4net-text-muted);
}

body .docs-search--large .docs-search__status:empty + .docs-search__hint {
  margin-top: 8px;
}

/* Themen in Gruppen: ruhigere Kacheln (ohne Schatten, nur Rand) */
body article .doc-grid:has(.doc-card) .doc-card {
  box-shadow: none;
  padding: 18px 20px;
}

body article .doc-group-title {
  margin: 24px 0 12px;
  font-size: 22px;
  line-height: 1.3;
}

/* ===== Lizenzerstellung (interne Seite, Board "Lizenz") ===== */
body .license-form__intro {
  max-width: 720px;
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--sdk4net-text-body);
}

body .license-form form {
  gap: 22px;
}

body .license-form__row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

body .license-form__field {
  flex: 1 1 220px;
  min-width: 0;
}

body .license-form__field--narrow {
  flex: 0 1 260px;
}

body .license-form__captcha {
  align-items: flex-end;
  gap: 16px 20px;
}

body .license-form__captcha-image {
  flex: none;
  width: 180px;
  height: 60px;
}

body .license-form__captcha .license-form__field {
  flex: 1 1 200px;
}

body .license-form__hint {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--sdk4net-text-muted);
}

body .contact-form__status.license-form__result {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

body .license-form__result p {
  margin: 0;
}

body .license-form__key {
  min-height: 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all;
}

/* =====================================================================
   Variante B „Control Plane“ (Boards VorschlagB_Cluster, B_*, abgenommen 2026-10-24)
   Dunkle Flächen für Kopf, Titelband, Hero und Fuß; Inhalt hell auf Wolke mit weißen Karten.
   Ein Link-System für drei Flächen: hell, dunkel (--sdk4net-night) und Signalblau.
   ===================================================================== */

/* ---------- Kopf ---------- */
body .header,
body .header--fixed,
body:not(.frontpage) .header,
body:not(.frontpage) .header--fixed {
  background: var(--sdk4net-night) !important;
  border-bottom: 1px solid var(--sdk4net-night-line);
  box-shadow: none;
}

body .logo-text,
body .nav-link--home,
body:not(.frontpage) .header .nav-link--home {
  color: var(--sdk4net-text-light) !important;
}

body .header .logo-text__accent {
  color: var(--sdk4net-on-dark-brand);
}

body .header--fixed .nav-link,
body.frontpage .header:not(.header--fixed) .nav-link,
body:not(.frontpage) .header .nav-link {
  color: var(--sdk4net-on-dark) !important;
}

body .header--fixed .nav-bar.top-nav > .nav-link:hover,
body .header--fixed .nav-bar.top-nav > .nav-link--active,
body.frontpage .header:not(.header--fixed) .nav-bar.top-nav > .nav-link:hover,
body.frontpage .header:not(.header--fixed) .nav-bar.top-nav > .nav-link--active,
body:not(.frontpage) .header .nav-bar.top-nav > .nav-link:hover,
body:not(.frontpage) .header .nav-bar.top-nav > .nav-link--active {
  color: var(--sdk4net-text-light) !important;
  border-bottom-color: var(--sdk4net-on-dark-brand) !important;
}

body .header .nav-bar.top-nav > .nav-link--active {
  font-weight: 600;
}

/* Sprache: zwei Chips, der aktive gefüllt in hellem Blau */
body .nav-bar.top-nav .lang-switch {
  border-left-color: var(--sdk4net-night-edge);
}

body .nav-bar.top-nav .lang-switch::before,
body .mobile-nav .lang-switch::before {
  background: var(--sdk4net-on-dark-muted);
}

body .nav-bar.top-nav .lang-switch .nav-link.lang-switch__link,
body .mobile-nav .lang-switch .nav-link.lang-switch__link {
  background: transparent;
  border-color: var(--sdk4net-night-edge) !important;
  color: var(--sdk4net-on-dark) !important;
}

body .nav-bar.top-nav .lang-switch .nav-link.lang-switch__link:not(.lang-switch__link--current):hover,
body .mobile-nav .lang-switch .nav-link.lang-switch__link:not(.lang-switch__link--current):hover {
  background: var(--sdk4net-on-dark-hover);
  color: var(--sdk4net-text-light) !important;
}

body .nav-bar.top-nav .lang-switch .nav-link.lang-switch__link.lang-switch__link--current,
body .mobile-nav .lang-switch .nav-link.lang-switch__link.lang-switch__link--current {
  background: var(--sdk4net-on-dark-brand);
  border-color: var(--sdk4net-on-dark-brand) !important;
  color: var(--sdk4net-night) !important;
}

body .header--fixed .hamburger span,
body .header--fixed .hamburger span:after,
body .header--fixed .hamburger span:before,
body.frontpage .header:not(.header--fixed) .hamburger span,
body.frontpage .header:not(.header--fixed) .hamburger span:after,
body.frontpage .header:not(.header--fixed) .hamburger span:before,
body:not(.frontpage) .header .hamburger span,
body:not(.frontpage) .header .hamburger span:after,
body:not(.frontpage) .header .hamburger span:before {
  background-color: var(--sdk4net-text-light) !important;
}

/* Fokus auf dunklen Flächen: helles Blau statt Signalblau */
body .header a:focus-visible,
body .header button:focus-visible,
body .mobile-nav a:focus-visible,
body .breadcrumb a:focus-visible,
body .section--header a:focus-visible,
body .is-dark a:focus-visible,
body .is-dark button:focus-visible,
body footer a:focus-visible,
body footer button:focus-visible {
  outline-color: var(--sdk4net-on-dark-brand);
}

/* ---------- Handy-Menü ---------- */
body .mobile-nav {
  background: var(--sdk4net-night);
  color: var(--sdk4net-on-dark);
}

body .mobile-nav .nav-link,
body .mobile-nav .nav-link:hover,
body .mobile-nav .nav-link:active {
  color: var(--sdk4net-on-dark) !important;
  border-bottom-color: transparent !important;
}

body .mobile-nav .nav-link--active {
  color: var(--sdk4net-text-light) !important;
  font-weight: 700;
  border-bottom-color: var(--sdk4net-on-dark-brand) !important;
}

body .mobile-nav .lang-switch {
  border-top-color: var(--sdk4net-night-line);
}

/* Handy-Menü: von oben beginnen (Zentrieren in einem scrollenden Flex-Container schneidet die Links ab),
   Höhe der sichtbaren Fläche statt 100vh, Inhalt beginnt unter dem Kopf */
body .mobile-nav {
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  padding: calc(88px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}

body .mobile-nav--open {
  height: 100vh;
  height: 100dvh;
}

body .mobile-nav .nav-bar,
body .mobile-nav--open .nav-bar {
  transform: none; /* base.css: .nav-bar { transform: translate(-5%, 0) } */
  width: 100%;
  max-height: none;
  overflow: visible; /* base.css: eigene Scrollleiste im Menü; es scrollt nur .mobile-nav */
  padding: 0;
  align-items: stretch;
}

/* Board B_Mobil: Zeilen zentriert, 22 px, Trennlinie */
body .mobile-nav .nav-bar > .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important; /* base.css: .nav-bar * { box-sizing: content-box !important } */
  min-height: 60px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--sdk4net-night-line) !important;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  text-decoration: none;
  color: var(--sdk4net-on-dark) !important;
  transform: translateY(12px); /* base.css: 999px, ragt sonst aus dem Layout */
}

body .mobile-nav .nav-bar > .nav-link:hover {
  color: var(--sdk4net-text-light) !important;
}

body .mobile-nav .nav-bar > .nav-link--active {
  font-weight: 800;
  color: var(--sdk4net-text-light) !important;
}

body .mobile-nav--open .nav-link {
  transform: none;
}

/* Sprache: zwei einzelne Chips unter den Zeilen, ohne Globus */
body .mobile-nav .lang-switch {
  align-self: center;
  gap: 8px;
  margin: 8px 0 0;
  padding: 8px 0;
  border-top: 0;
}

body .mobile-nav .lang-switch::before {
  content: none;
}

body .mobile-nav .lang-switch .nav-link.lang-switch__link,
body .mobile-nav .lang-switch .nav-link.lang-switch__link:first-of-type,
body .mobile-nav .lang-switch .nav-link.lang-switch__link:last-of-type {
  margin: 0;
  border-radius: 4px;
  border-color: var(--sdk4net-night-edge) !important;
}

body .mobile-nav .lang-switch .nav-link.lang-switch__link.lang-switch__link--current {
  border-color: var(--sdk4net-on-dark-brand) !important;
}

/* Unten: Kontakt-Button und Fußlinks (Markup in _Master.cshtml, base.css blendet es aus) */
body .mobile-nav .mobile-nav__extra {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}

body .mobile-nav .mobile-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 4px;
  background: var(--sdk4net-text-light);
  color: var(--sdk4net-night);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  text-decoration: none;
}

body .mobile-nav .mobile-nav__cta:hover {
  background: #dbe5ff;
}

body .mobile-nav .mobile-nav__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 16px;
}

/* Cookie-Einstellungen stehen im Menü; der runde Knopf würde die Fußlinks verdecken */
body.no-scroll .consent-fab {
  display: none;
}

body .mobile-nav .mobile-nav__meta .footer__sep {
  display: none;
}

body .mobile-nav .mobile-nav__meta .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0 !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sdk4net-on-dark-muted) !important;
  opacity: 1;
  transform: none;
}

body .mobile-nav .mobile-nav__meta .nav-link:hover {
  color: var(--sdk4net-text-light) !important;
}

/* Schließen-X: Striche aus base.css (20 × 2 px), Mittelstrich beim Öffnen ausblenden
   (die !important-Farbe der Striche oben würde ihn sonst stehen lassen) */
body .hamburger span {
  margin: 0 auto;
}

body .header .hamburger.lines.active span {
  background-color: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  body .mobile-nav .nav-link {
    transition: none;
    transform: none;
  }
}

/* ---------- Titelband: dunkel, Brotkrumen in hellem Blau, Sechsecke als Dekor rechts ---------- */
body .breadcrumb {
  background: var(--sdk4net-night);
  padding-top: 16px;
}

body .breadcrumb__list {
  font-size: 14px;
  color: var(--sdk4net-on-dark-muted);
}

body .breadcrumb__item::after {
  color: var(--sdk4net-night-dot);
}

body .breadcrumb__link,
body a.breadcrumb__link:not([style*="color"]) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--sdk4net-on-dark-brand);
}

body a.breadcrumb__link:not([style*="color"]):hover {
  color: var(--sdk4net-text-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}

body .breadcrumb__current {
  color: var(--sdk4net-on-dark-muted);
}

body .section--header,
body .section--themed.section--header {
  position: relative;
  background-color: var(--sdk4net-night);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 220'%3E%3Cg fill='none' stroke='%232c3a66' stroke-width='1.5'%3E%3Cpolygon points='250,20 293,45 293,95 250,120 207,95 207,45'/%3E%3Cpolygon points='320,100 350,117 350,152 320,169 290,152 290,117'/%3E%3Cpolygon points='170,110 200,127 200,162 170,179 140,162 140,127'/%3E%3Cpath d='M250 120L170 140M293 95L320 117' stroke-dasharray='4 6'/%3E%3C/g%3E%3Cpolygon points='250,40 276,55 276,85 250,100 224,85 224,55' fill='%23024ad8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right max(24px, calc((100% - 1200px) / 2 + 24px)) center;
  background-size: auto min(220px, 86%);
  border-bottom: 0;
  padding-bottom: 56px;
}

body .section--header h1,
body .section--header .section__hero-content h1 {
  color: var(--sdk4net-text-light) !important;
  max-width: 820px;
  margin-left: 0;
}

body .section--header .section__description {
  color: var(--sdk4net-on-dark-muted);
  max-width: 640px;
}

@media (max-width: 900px) {
  body .section--header,
  body .section--themed.section--header {
    background-image: none;
  }
}

/* Doku-Startseite (Board B_DokuStart): große Suche im dunklen Titelband */
body .section--header-search .docs-search--large {
  margin: 28px 0 0;
}

body .section--header-search .docs-search__label {
  font-size: 18px;
  color: var(--sdk4net-text-light);
}

body .section--header-search .docs-search__input {
  border-color: var(--sdk4net-night-edge);
}

body .section--header-search .docs-search__input:focus {
  outline: 2px solid var(--sdk4net-on-dark-brand);
  outline-offset: 2px;
  box-shadow: none;
}

body .section--header-search .docs-search__hint,
body .section--header-search .docs-search__status {
  color: var(--sdk4net-on-dark-muted);
}

@media (max-width: 768px) {
  body .section--header {
    padding-bottom: 32px;
  }
}

/* ---------- Inhalt: Seiten mit Karten (Zeitleiste, Formular, Themenkacheln) liegen auf Wolke ---------- */
body main:has(.timeline-entry, .contact-form, .doc-card) > .section:not(.section--header) {
  background: var(--sdk4net-bg-light);
  padding-top: 56px;
  padding-bottom: 88px;
}

body main:has(.timeline-entry, .contact-form, .doc-card) .sub-navigation-content a.nav-link:hover {
  background: var(--sdk4net-surface);
}

/* ---------- Links: Hover tiefes Signalblau, im Fließtext unterstrichen ---------- */
body a:not(.nav-link):not(.nav-fake):not([style*="color"]):hover {
  color: var(--sdk4net-accent-hover);
}

body article .umb-block-grid [data-content-element-type-alias="BlockElement_rte"] a:not([class]),
body article .timeline-entry__description a:not([class]),
body article .timeline-entry__highlight-description a:not([class]) {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body article .umb-block-grid [data-content-element-type-alias="BlockElement_rte"] a:not([class]):hover,
body article .timeline-entry__description a:not([class]):hover,
body article .timeline-entry__highlight-description a:not([class]):hover {
  text-decoration-thickness: 2px;
}

/* Themenkacheln der Doku (Rich Text: <div class="doc-card"><a><h3>…</h3>…</a>): die ganze Karte ist der Link */
body article .umb-block-grid [data-content-element-type-alias="BlockElement_rte"] .doc-card a:not([class]),
body article .doc-card a:not([class]) {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  font-weight: 400;
  text-decoration: none;
}

body article .doc-grid:has(.doc-card) .doc-card {
  padding: 0;
  transition: box-shadow 0.15s;
}

body article .doc-card a:not([class]) {
  padding: 18px 20px;
}

/* Symbol steht vor dem Link in der Karte: Abstand wie der Text, Link ohne doppelten Abstand oben */
body article .doc-card > img {
  margin: 20px 20px 0;
}

body article .doc-card > img + a:not([class]) {
  padding-top: 12px;
}

body article .doc-card h3,
body article .doc-card h4 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--sdk4net-accent);
}

body article .doc-card:hover {
  box-shadow: var(--sdk4net-shadow-card), 0 0 0 1px var(--sdk4net-border-input);
}

body article .doc-card:hover h3,
body article .doc-card:hover h4 {
  color: var(--sdk4net-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

body article .doc-card a:not([class]):focus-visible {
  outline-offset: -2px;
}

/* Buttons: Hover ohne Schatten, nur Fläche (Board: Link-Zustände) */
body .btn:hover,
body input[type="submit"]:hover {
  box-shadow: none !important;
}

/* ---------- Fuß: eine Zeile, Marke links, Copyright und Rechtliches rechts ---------- */
body footer,
body footer.section--themed {
  background-color: var(--sdk4net-night);
  padding: 28px 0;
}

body footer .row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  grid-template-areas:
    "brand copy nav cookie"
    "addr copy nav cookie";
  column-gap: 0;
  align-items: center;
}

body footer .row::before {
  content: none;
}

body footer .footer__brand {
  font-size: 18px;
}

body footer .footer__address {
  margin: 2px 0 0;
  font-size: 14px;
}

body footer .footer__copyright {
  margin-right: 16px;
  color: var(--sdk4net-on-dark-muted);
}

body footer .footer__nav {
  gap: 0;
  flex-wrap: nowrap;
}

body footer .footer__nav .nav-link,
body footer .consent-footer-link {
  font-size: 14px;
  font-weight: 500;
}

body footer .footer__nav .footer__sep + .nav-link::before,
body footer .consent-footer-link::before {
  content: "·";
  display: inline-block;
  margin: 0 10px;
  color: var(--sdk4net-night-dot);
  text-decoration: none;
}

body footer .footer__nav > .footer__sep:first-child + .nav-link::before {
  content: none;
}

body footer .consent-footer-link {
  justify-self: start;
  color: var(--sdk4net-on-dark) !important;
  text-decoration: none !important;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

body footer .consent-footer-link:hover {
  color: var(--sdk4net-text-light) !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

@media (max-width: 991px) {
  body footer .row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "addr"
      "nav"
      "cookie"
      "copy";
    row-gap: 4px;
  }

  body footer .footer__nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 12px;
  }

  /* Umbrechende Zeile: Abstand statt Trennpunkt, sonst steht ein Punkt am Zeilenanfang */
  body footer .consent-footer-link::before,
  body footer .footer__nav .footer__sep + .nav-link::before {
    content: none;
  }

  body footer .footer__nav {
    column-gap: 20px;
  }

  body footer .footer__copyright {
    margin: 8px 0 0;
  }
}

/* ---------- Werdegang (Board B_Werdegang): Zeitraum links, Raute auf der Schiene, Karte rechts ---------- */
body .umb-block-grid__layout-item[data-content-element-type-alias="blockElementTimelineEntry"] {
  padding-left: 0;
  padding-bottom: 16px;
}

body .timeline-entry {
  display: grid;
  grid-template-columns: 150px 36px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
}

body .timeline-entry__period {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-top: 26px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--sdk4net-accent);
}

body .timeline-entry__rail,
body .umb-block-grid__layout-item[data-content-element-type-alias="blockElementTimelineEntry"]:last-of-type .timeline-entry__rail {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  left: auto;
  top: auto;
  bottom: auto;
  align-self: stretch;
  width: auto;
  height: auto;
  margin-bottom: -16px;
}

body .timeline-entry__rail::before {
  left: 17px;
  width: 2px;
}

body .umb-block-grid__layout-item[data-content-element-type-alias="blockElementTimelineEntry"]:last-of-type .timeline-entry__rail::before,
body .umb-block-grid__layout-item[data-content-element-type-alias="blockElementTimelineEntry"]:has(+ :not([data-content-element-type-alias="blockElementTimelineEntry"])) .timeline-entry__rail::before {
  bottom: auto;
  height: 34px;
}

body .timeline-entry__dot {
  top: 26px;
  left: 10px;
  width: 16px;
  height: 16px;
  border-width: 3px;
  border-radius: 3px;
  transform: rotate(45deg);
}

body .timeline-entry__card {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

body .timeline-entry__card:hover {
  box-shadow: var(--sdk4net-shadow-card);
}

/* Lange deutsche Wörter mit Silbentrennung umbrechen statt mitten im Wort (Handy) */
body .timeline-entry__card,
body .timeline-entry__highlight-title,
body .timeline-entry__highlight-description {
  overflow-wrap: break-word;
  hyphens: auto;
}

body .timeline-entry__role,
body .timeline-entry__company {
  margin: 0;
}

body .timeline-entry__description:has(> :not(:empty)) {
  margin-top: 6px;
}

body .timeline-entry__description p {
  margin: 0;
  max-width: 760px;
  line-height: 1.7;
}

/* Das Board zeigt die Highlights ohne Überschrift; für Screenreader bleibt sie erhalten */
body .timeline-entry__highlights-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body .timeline-entry__highlights {
  margin-top: 8px;
  gap: 8px;
}

body .timeline-entry__highlight {
  font-size: 15px;
  line-height: 1.55;
}

body .timeline-entry__highlight-description {
  color: var(--sdk4net-text-dark);
  font-weight: 500;
}

body .timeline-entry__more-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sdk4net-accent);
  cursor: pointer;
  list-style: none;
}

body .timeline-entry__more-toggle::-webkit-details-marker {
  display: none;
}

body .timeline-entry__more-toggle::before {
  content: "+";
  margin-right: 6px;
}

body .timeline-entry__more[open] > .timeline-entry__more-toggle::before {
  content: "–";
}

body .timeline-entry__more-toggle:hover {
  color: var(--sdk4net-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

body .timeline-entry__more .timeline-entry__highlights {
  margin-top: 4px;
}

/* Phasen: Überschrift-Block zwischen den Einträgen */
body article .umb-block-grid__layout-item[data-content-element-type-alias="BlockElement_headline"]:has(+ [data-content-element-type-alias="blockElementTimelineEntry"]) h2 {
  margin: 40px 0 20px;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

body article .umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-content-element-type-alias="BlockElement_headline"]:first-child h2 {
  margin-top: 0;
}

@media (max-width: 767px) {
  body .timeline-entry {
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 10px;
  }

  body .timeline-entry__period {
    grid-column: 2;
    padding-top: 0;
    margin-bottom: 8px;
  }

  body .timeline-entry__rail,
  body .umb-block-grid__layout-item[data-content-element-type-alias="blockElementTimelineEntry"]:last-of-type .timeline-entry__rail {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  body .timeline-entry__rail::before {
    left: 13px;
  }

  body .timeline-entry__dot {
    top: 4px;
    left: 7px;
    width: 14px;
    height: 14px;
  }

  body .timeline-entry__card {
    grid-column: 2;
    grid-row: 2;
  }

  body article .umb-block-grid__layout-item[data-content-element-type-alias="BlockElement_headline"]:has(+ [data-content-element-type-alias="blockElementTimelineEntry"]) h2 {
    font-size: 24px;
    margin-top: 28px;
  }
}

/* ---------- Buttons und Textlinks der SDK4NET-Blöcke (Board: Link-Zustände) ---------- */
body .sdk-btn,
body a.sdk-btn:not([style*="color"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--sdk4net-radius-btn);
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

body .sdk-btn .bi {
  font-size: 16px;
  line-height: 1;
}

body a.sdk-btn--primary:not([style*="color"]) {
  background: var(--sdk4net-accent);
  color: var(--sdk4net-text-light);
}

body a.sdk-btn--primary:not([style*="color"]):hover {
  background: var(--sdk4net-accent-hover);
  color: var(--sdk4net-text-light);
}

body a.sdk-btn--light:not([style*="color"]) {
  background: var(--sdk4net-surface);
  color: var(--sdk4net-night);
}

body a.sdk-btn--light:not([style*="color"]):hover {
  background: var(--sdk4net-light-hover);
  color: var(--sdk4net-night);
}

body a.sdk-btn--ghost:not([style*="color"]) {
  border-color: var(--sdk4net-on-dark-brand);
  color: var(--sdk4net-text-light);
}

body a.sdk-btn--ghost:not([style*="color"]):hover {
  background: var(--sdk4net-on-dark-hover);
  color: var(--sdk4net-text-light);
}

/* Auf Signalblau: gefüllter Button mit blauer Schrift, Kontur weiß */
body .tile--blue a.sdk-btn--light:not([style*="color"]) {
  color: var(--sdk4net-accent);
}

body .tile--blue a.sdk-btn--light:not([style*="color"]):hover {
  background: var(--sdk4net-tint);
  color: var(--sdk4net-accent-hover);
}

body .tile--blue a.sdk-btn--ghost:not([style*="color"]) {
  border-color: var(--sdk4net-text-light);
}

body .tile--blue a.sdk-btn--ghost:not([style*="color"]):hover {
  background: var(--sdk4net-on-blue-hover);
}

body .tile--blue a:focus-visible {
  outline-color: var(--sdk4net-text-light);
}

body .sdk-link,
body a.sdk-link:not([style*="color"]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--sdk4net-accent);
  text-decoration: none;
}

body a.sdk-link:not([style*="color"]):hover {
  color: var(--sdk4net-accent-hover);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

body .is-dark a.sdk-link:not([style*="color"]) {
  color: var(--sdk4net-on-dark-brand);
}

body .is-dark a.sdk-link:not([style*="color"]):hover {
  color: var(--sdk4net-text-light);
}

body .link-ext {
  font-size: 0.85em;
}

@media (prefers-reduced-motion: reduce) {
  body .sdk-btn {
    transition: none;
  }
}

/* ---------- Startseite (Board VorschlagB_Cluster): Bänder liegen ohne Abstand aneinander ---------- */
body .section--hero:has(.profile-hero) {
  padding-top: 0;
  padding-bottom: 0;
}

body .col-sm-12 > article:has(.profile-hero) {
  max-width: none;
}

body article .umb-block-grid:has(.profile-hero) {
  margin: 0;
  gap: 0;
  --umb-block-grid--row-gap: 0;
}

/* Volle Breite ohne Überlauf: Fläche über box-shadow nach links und rechts verlängern */
body .profile-hero,
body .tiles-band {
  position: relative;
  box-shadow: 0 0 0 100vmax var(--band-bg);
  clip-path: inset(0 -100vmax);
  background: var(--band-bg);
}

/* ---------- Profil-Hero ---------- */
body .profile-hero {
  --band-bg: var(--sdk4net-night);
  color: var(--sdk4net-on-dark);
  padding: 72px 0 0;
}

body .profile-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: center;
  padding-bottom: 72px;
}

body .profile-hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

body .profile-hero__kicker {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--sdk4net-on-dark-brand);
}

body .profile-hero .profile-hero__title {
  margin: 0;
  font-size: 72px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sdk4net-text-light);
}

body article .profile-hero__tagline,
body .profile-hero__tagline {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--sdk4net-text-light);
}

body .profile-hero__intro {
  margin: 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--sdk4net-on-dark-muted);
}

body .profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

body .profile-hero__ring {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body .profile-hero__ring svg {
  width: 100%;
  height: auto;
}

body .profile-hero__node-label {
  font-family: var(--sdk4net-font-heading);
  font-size: 12px;
  font-weight: 700;
  fill: var(--sdk4net-text-light);
}

body .profile-hero__node-label--long {
  font-size: 10.5px;
  letter-spacing: -0.01em;
}

body .profile-hero__caption {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--sdk4net-on-dark-muted);
}

body .profile-hero__topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 18px 0;
  /* Trennlinie über die volle Fensterbreite: border-image mit Überstand erzeugt keine Scrollbreite
     (ein Pseudo-Element mit ±100vmax würde die Seite auf dem Handy seitlich scrollbar machen) */
  border-top: 1px solid var(--sdk4net-night-line);
  border-image: linear-gradient(var(--sdk4net-night-line), var(--sdk4net-night-line)) 1 / 1px 0 0 0 / 0 100vmax;
}

body article .profile-hero__topics-label,
body .profile-hero__topics-label {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--sdk4net-on-dark-brand);
}

body .profile-hero__chips {
  display: contents;
  list-style: none;
}

body .profile-hero__chips li {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--sdk4net-night-edge);
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--sdk4net-on-dark);
}

@media (max-width: 1000px) {
  body .profile-hero__grid {
    grid-template-columns: 1fr;
  }

  body .profile-hero__ring {
    max-width: 520px;
  }
}

/* Kopf des Heros: am Desktop nur Überzeile und Name, das Avatar-Sechseck erscheint erst auf dem Handy */
body .profile-hero__head-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body .profile-hero__avatar {
  display: none;
}

@media (max-width: 760px) {
  body .profile-hero {
    padding-top: 36px;
  }

  /* Board B_MobilHero, Variante B: Porträt neben Überzeile und Name (24 px Abstand), Ring entfällt */
  body .profile-hero__head {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  body .profile-hero__head-text {
    gap: 10px;
    min-width: 0;
  }

  body .profile-hero__avatar {
    display: block;
    flex: none;
    width: 112px;
    height: 129px;
    padding: 3px;
    box-sizing: border-box;
    background: var(--sdk4net-on-dark-brand);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }

  body .profile-hero__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  }

  body .profile-hero__ring {
    display: none;
  }

  body .profile-hero__head .profile-hero__title {
    font-size: 40px;
  }

  /* Neben dem Bild ist die Spalte schmal: Überzeile kleiner, damit lange Wörter ganz bleiben */
  body .profile-hero__head .profile-hero__kicker {
    font-size: 11px;
    letter-spacing: 0.5px;
    line-height: 1.5;
    overflow-wrap: normal;
    word-break: normal;
  }

  body .profile-hero .profile-hero__title {
    font-size: 44px;
  }

  body article .profile-hero__tagline,
  body .profile-hero__tagline {
    font-size: 18px;
  }

  body .profile-hero__grid {
    gap: 24px;
    padding-bottom: 32px;
  }
}

/* ---------- Kacheln (Layout „Kacheln“): graues Band, Raster 4 / 2 / 1 Spalten ---------- */
body .tiles-band {
  --band-bg: var(--sdk4net-bg-light);
  padding: 80px 0;
}

body .tiles-band + * {
  margin-top: 0;
}

body article .tiles-band__heading {
  margin: 0 0 32px;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body .tiles-band .umb-block-grid__area-container,
body .tiles-band .umb-block-grid__area {
  display: block;
}

body .tiles-band .umb-block-grid__layout-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(170px, auto);
  grid-auto-flow: row dense;
  gap: 16px;
}

body .tiles-band .umb-block-grid__layout-item {
  grid-column: span min(var(--umb-block-grid--item-column-span, 1), 4);
  grid-row: span var(--umb-block-grid--item-row-span, 1);
  min-width: 0;
}

body .tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
  padding: 24px;
  border-radius: var(--sdk4net-radius-card);
  background: var(--sdk4net-surface);
  box-shadow: var(--sdk4net-shadow-light);
  color: var(--sdk4net-text-dark);
}

body .tile--large {
  padding: 32px;
}

body .tile--tint {
  background: var(--sdk4net-tint);
  box-shadow: none;
}

body .tile--dark {
  background: var(--sdk4net-night);
  color: var(--sdk4net-text-light);
}

body .tile--blue {
  background: var(--sdk4net-accent);
  color: var(--sdk4net-text-light);
  box-shadow: none;
}

body .tile__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body .tile__kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--sdk4net-accent);
}

body .tile--dark .tile__kicker {
  color: var(--sdk4net-on-dark-brand);
}

body .tile--blue .tile__kicker {
  color: var(--sdk4net-text-light);
}

body article .tile__title,
body .tile__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  color: inherit;
  /* Lange Wörter („Vertriebsmanagement“) trennen statt mitten im Wort umbrechen */
  overflow-wrap: break-word;
  hyphens: auto;
}

body article .tile--large .tile__title {
  font-size: 32px;
  line-height: 1.15;
}

body .tile__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--sdk4net-text-body);
}

body .tile--large .tile__text {
  font-size: 17px;
  line-height: 1.7;
}

body .tile--dark .tile__text,
body .tile--blue .tile__text {
  color: var(--sdk4net-on-dark-muted);
}

body .tile--blue .tile__text {
  color: var(--sdk4net-text-light);
}

body .tile__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .tile__tags li {
  padding: 4px 8px;
  border: 1px solid var(--sdk4net-border-input);
  border-radius: var(--sdk4net-radius-btn);
  font-family: var(--sdk4net-font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: inherit;
}

body .tile--dark .tile__tags li {
  border-color: var(--sdk4net-night-edge);
}

body .tile--blue .tile__tags li {
  border-color: rgba(255, 255, 255, 0.5);
}

/* Große Kachel (2 × 2): Schlagworte als getönte Pillen wie im Board „Leadership“ */
body .tile--large.tile--light .tile__tags li {
  padding: 6px 12px;
  border: 0;
  border-radius: 22px;
  background: var(--sdk4net-tint);
  color: var(--sdk4net-accent-hover);
  font-family: var(--sdk4net-font-body);
  font-size: 14px;
  font-weight: 600;
}

body .tile__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

body .tile--dark .tile__links,
body .tile--blue .tile__links {
  gap: 8px;
}

/* Breite dunkle/blaue Kachel: Inhalt links, Buttons rechts (Board: Kontakt, YouTube) */
body .tiles-band [data-col-span="2"][data-row-span="1"] .tile--blue,
body .tiles-band [data-col-span="2"][data-row-span="1"] .tile--dark:has(.tile__links):not(:has(.tile__tags)) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

/* Vorhandene Listen-Blöcke als Kachel (Stammdaten, Kontakt) */
body .tiles-band [data-content-element-type-alias="blockElementFactList"],
body .tiles-band [data-content-element-type-alias="blockElementLinkList"],
body .tiles-band [data-content-element-type-alias="blockElementSkillsList"] {
  padding: 24px;
}

body .tiles-band [data-content-element-type-alias="blockElementFactList"] h3,
body .tiles-band [data-content-element-type-alias="blockElementLinkList"] h3,
body .tiles-band [data-content-element-type-alias="blockElementSkillsList"] h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--sdk4net-accent);
}

body .tiles-band .fact-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 0;
  font-size: 14px;
}

body .tiles-band .fact-list__value {
  font-weight: 600;
}

@media (max-width: 1000px) {
  body .tiles-band .umb-block-grid__layout-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .tiles-band .umb-block-grid__layout-item {
    grid-column: span min(var(--umb-block-grid--item-column-span, 1), 2);
  }
}

@media (max-width: 640px) {
  body .tiles-band {
    padding: 48px 0;
  }

  body article .tiles-band__heading {
    font-size: 28px;
    margin-bottom: 20px;
  }

  body .tiles-band .umb-block-grid__layout-container {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  body .tiles-band .umb-block-grid__layout-item {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  body article .tile--large .tile__title {
    font-size: 26px;
  }
}

/* ---------- Werdegang-Leiste: waagerechte Stationen ---------- */
body .career-strip {
  padding: 80px 0 96px;
}

body .career-strip__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

body article .career-strip__heading {
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body .career-strip__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
}

body .career-strip__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding-right: 14px;
}

body .career-strip__marker {
  display: flex;
  align-items: center;
  height: 18px;
}

body .career-strip__marker::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transform: rotate(45deg);
  background: var(--sdk4net-accent);
}

body .career-strip__marker::after {
  content: "";
  flex: 1;
  height: 2px;
  margin-left: 12px;
  background: var(--sdk4net-bg-subtle);
}

body .career-strip__period {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--sdk4net-accent);
}

body .career-strip__role {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--sdk4net-text-dark);
  /* Silbentrennung, wo der Browser ein Wörterbuch hat; sonst Umbruch im Wort statt Überlauf */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  min-width: 0;
}

body .career-strip__company {
  font-size: 14px;
  color: var(--sdk4net-text-muted);
}

@media (max-width: 900px) {
  body .career-strip {
    padding: 48px 0 56px;
  }

  body article .career-strip__heading {
    font-size: 28px;
  }

  body .career-strip__list {
    grid-template-columns: 1fr;
    gap: 20px;
    overflow: visible;
  }

  body .career-strip__item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    padding: 0;
  }

  body .career-strip__marker {
    grid-row: 1 / span 3;
    height: auto;
    align-items: flex-start;
    padding-top: 2px;
  }

  body .career-strip__marker::after {
    content: none;
  }

  body .career-strip__marker::before {
    width: 14px;
    height: 14px;
  }
}