/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/*
 * TOPNC main stylesheet
 * Generated from the Elementor website export dated 2026-07-14.
 *
 * 751 local Custom CSS entries were consolidated into this file.
 * Home-hero rules are scoped to the front page to prevent collisions with
 * application heroes and the legacy saved Hero template.
 */

/* =========================================================
   TOPNC – Global variables
   ========================================================= */

:root {
  --topnc-red: #AD282C;
  --topnc-red-dark: #8F1F24;
  --topnc-black: #090909;
  --topnc-dark: #221714;
  --topnc-text: #2D2D2D;
  --topnc-muted: #6F747A;
  --topnc-soft: #F7F8FA;
  --topnc-border: #E8E8E8;
  --topnc-white: #FFFFFF;
}


/* =========================================================
   01. Base
   ========================================================= */

.elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.eyebrow::before {
    content: "";
    width: 42px;
    height: 2px;
    background: #ad282c;
}


/* =========================================================
   02. Shared components
   ========================================================= */

.topnc-family-cta {
    background: radial-gradient(circle at 82% 44%, rgba(173, 40, 44, 0.20) 0%, rgba(173, 40, 44, 0.08) 28%, rgba(173, 40, 44, 0) 60%),
        linear-gradient(135deg, #151515 0%, #090909 100%);
}

/* Pills */
.application-pill,
.machine-pill {
  white-space: nowrap;
  word-break: normal;
  hyphens: none;
}

.topnc-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  overflow: hidden;
}

.topnc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 0 14px;
  white-space: nowrap;
  flex: 0 0 auto;
  line-height: 1;
}


.topnc-hero-strip {
    backdrop-filter: blur(18px);
}

/* TOPNC Text-Link mit animiertem Pfeil */
.topnc-arrow-link-red .elementor-button,
.topnc-arrow-link-red a,
a.topnc-arrow-link-red {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 !important;
  min-height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #AD282C !important;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Pfeil erzeugen */
.topnc-arrow-link-red .elementor-button::after,
.topnc-arrow-link-red a::after,
a.topnc-arrow-link-red::after {
      color: #AD282C !important;
  content: "→";
  display: inline-block;
  margin-left: 2px;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

/* Hover: Pfeil fährt leicht nach rechts */
.topnc-arrow-link-red .elementor-button:hover::after,
.topnc-arrow-link-red a:hover::after,
a.topnc-arrow-link-red:hover::after {
  transform: translateX(4px);
}

/* Optional: Link beim Hover minimal dunkler */
.topnc-arrow-link-red .elementor-button:hover,
.topnc-arrow-link-red a:hover,
a.topnc-arrow-link-red:hover {
  color: #AD282C !important;
}

/* =========================================================
   TOPNC Global TablePress Styling
   Applies to all TablePress tables
   ========================================================= */

/* Wrapper für horizontales Scrollen */
.elementor-shortcode:has(.tablepress),
.topnc-tablepress-wrap {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
}

/* Alle TablePress-Tabellen */
.tablepress {
  --head-text-color: #221714;
  --head-bg-color: #F7F8FA;
  --odd-text-color: #6F747A;
  --odd-bg-color: #FFFFFF;
  --even-text-color: #6F747A;
  --even-bg-color: #FAFAFA;
  --hover-text-color: #2D2D2D;
  --hover-bg-color: #F7F8FA;
  --border-color: #E8E8E8;
  --padding: 18px 22px;

  width: 100% !important;
  min-width: 1120px;
  margin: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid #E8E8E8 !important;
  border-radius: 20px;
  background: #FFFFFF;
  color: #221714;
  font-family: "Manrope", Arial, sans-serif !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

/* Caption / Bearbeiten-Link ausblenden */
.tablepress caption {
  display: none !important;
}

/* Zellen allgemein */
.tablepress th,
.tablepress td {
  padding: 18px 22px !important;
  border: 0 !important;
  border-right: 1px solid #E8E8E8 !important;
  border-bottom: 1px solid #E8E8E8 !important;
  font-family: "Manrope", Arial, sans-serif !important;
  text-align: left !important;
  vertical-align: top !important;
}

/* Letzte Spalte ohne rechte Linie */
.tablepress th:last-child,
.tablepress td:last-child {
  border-right: 0 !important;
}

/* Letzte Tabellenzeile ohne untere Linie */
.tablepress tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Titelzeile */
.tablepress thead th {
  background: #F7F8FA !important;
  color: #221714 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: -.015em;
  white-space: nowrap;
}

/* Erste Spalte / Parameter */
.tablepress tbody td.column-1 {
  width: 240px;
  min-width: 240px;
  background: #FFFFFF !important;
  color: #090909 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

/* Werte-Spalten */
.tablepress tbody td:not(.column-1) {
  min-width: 170px;
  color: #6F747A !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* Zebra-Streifen */
.tablepress tbody tr:nth-child(odd) td {
  background: #FFFFFF !important;
}

.tablepress tbody tr:nth-child(even) td {
  background: #FAFAFA !important;
}

/* Hover */
.tablepress tbody tr:hover td {
  background: #F7F8FA !important;
}

/* Erste Spalte beim horizontalen Scrollen fixieren */
.tablepress thead th.column-1,
.tablepress tbody td.column-1 {
  position: sticky;
  left: 0;
  z-index: 2;
}

.tablepress thead th.column-1 {
  z-index: 3;
  background: #F7F8FA !important;
}

/* Leere Zellen als Strich */
.tablepress td:empty::after {
  content: "—";
  color: #B7BBC0;
}

/* Keine Sonderfarben / automatische Gruppenzeilen */
.tablepress tbody td {
  text-transform: none !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .tablepress {
    min-width: 1040px;
  }

  .tablepress th,
  .tablepress td {
    padding: 16px 18px !important;
  }

  .tablepress thead th {
    font-size: 15px !important;
  }

  .tablepress tbody td.column-1 {
    width: 220px;
    min-width: 220px;
  }

  .tablepress tbody td:not(.column-1) {
    min-width: 160px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .elementor-shortcode:has(.tablepress),
  .topnc-tablepress-wrap {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .tablepress {
    min-width: 980px;
    border-radius: 16px;
  }

  .tablepress th,
  .tablepress td {
    padding: 14px 16px !important;
  }

  .tablepress thead th {
    font-size: 14px !important;
  }

  .tablepress tbody td.column-1 {
    width: 200px;
    min-width: 200px;
    font-size: 13px !important;
  }

  .tablepress tbody td:not(.column-1) {
    min-width: 150px;
    font-size: 13px !important;
  }
}

.topnc-control-panel {
    background: radial-gradient(circle at 18% 50%, rgba(173,40,44,.20), transparent 42%),
      linear-gradient(135deg, #171717 0%, #090909 100%);
}


/* =========================================================
   03b. Hompepage Video Section
   ========================================================= */

/* =========================================================
   TOPNC Homepage Video Section – final clean version
   Uses:
   .topnc-video-home
   .topnc-video-home-copy
   .topnc-video-home-stage
   .topnc-video-home-pills
   .topnc-video-home-overlay
   ========================================================= */

.topnc-video-home {
  position: relative;
  background: #ffffff;
  overflow: visible;
  isolation: isolate;
}

.topnc-video-home > * {
  position: relative;
  z-index: 1;
}

/* Linke Spalte */
.topnc-video-home-copy {
  position: relative;
  z-index: 2;
}

/* Pills links */
.topnc-video-home-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topnc-video-home-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid #E8E8E8;
  background: #F7F8FA;
  color: #6F747A;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

/* Rechte Spalte */
.topnc-video-home-stage {
  position: relative;
  z-index: 2;
  overflow: visible;
}

/* roter Glow direkt hinter dem Elementor Video Widget */
.topnc-video-home-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 680px;
  height: 420px;
  transform: translate(-30%, -40%);
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(173, 40, 44, 0.30) 0%,
    rgba(173, 40, 44, 0.40) 36%,
    rgba(173, 40, 44, 0.04) 54%,
    rgba(173, 40, 44, 0) 74%
  );
  filter: blur(34px);
  pointer-events: none;
  z-index: 0;
}

/* Elementor Video Widget */
.topnc-video-home-stage .elementor-widget-video {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.topnc-video-home-stage .elementor-widget-video .elementor-widget-container,
.topnc-video-home-stage .elementor-widget-video .elementor-wrapper {
  position: relative;
  z-index: 1;
  overflow: hidden !important;
  border-radius: 28px !important;
  background: transparent !important;
}

/* eigentlicher Video-Rahmen */
.topnc-video-home-stage .elementor-widget-video .elementor-wrapper {
  border: 1px solid #E1E3E6;
  box-shadow: 0 22px 58px rgba(9, 9, 9, 0.08);
}

/* Bild / iframe / Video sauber runden */
.topnc-video-home-stage .elementor-widget-video iframe,
.topnc-video-home-stage .elementor-widget-video video,
.topnc-video-home-stage .elementor-widget-video .elementor-custom-embed-image-overlay {
  display: block;
  width: 100%;
  border-radius: 28px !important;
  overflow: hidden !important;
}

/* dunkles Overlay unten im Video */
.topnc-video-home-stage .elementor-widget-video .elementor-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 28px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, 0.50) 100%
  );
}

/* Titel-Overlay im Video */
.topnc-video-home-overlay {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 4;
  pointer-events: none;
}

.topnc-video-home-overlay span {
  display: block;
  margin-bottom: 8px;
  color: #AD282C;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.topnc-video-home-overlay strong {
  display: block;
  max-width: 470px;
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-size: 25px;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.055em;
}

/* Elementor Play Button */
.topnc-video-home-stage .elementor-custom-embed-play {
  z-index: 5;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.24));
}

.topnc-video-home-stage .elementor-custom-embed-play i,
.topnc-video-home-stage .elementor-custom-embed-play svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Tablet */

.topnc-video-home-stage::before {
  display:none!important;
}


@media (max-width: 1024px) {
  .topnc-video-home,
  .topnc-video-home > .e-con-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .topnc-video-home-copy,
  .topnc-video-home-stage {
    width: 100% !important;
    max-width: 100% !important;
  }

  .topnc-video-home-stage::before {
    width: 560px;
    height: 360px;
  }
}

/* Mobile */

.topnc-video-home-stage::before {
  display:none!important;
}


@media (max-width: 767px) {
  .topnc-video-home-pills {
    margin-top: 24px;
    padding-top: 22px;
  }
	

  .topnc-video-home-pills span {
    min-height: 31px;
    font-size: 11px;
    padding: 0 12px;
  }

  .topnc-video-home-stage .elementor-widget-video .elementor-widget-container,
  .topnc-video-home-stage .elementor-widget-video .elementor-wrapper,
  .topnc-video-home-stage .elementor-widget-video iframe,
  .topnc-video-home-stage .elementor-widget-video video,
  .topnc-video-home-stage .elementor-widget-video .elementor-custom-embed-image-overlay {
    border-radius: 20px !important;
  }

  .topnc-video-home-stage .elementor-widget-video .elementor-wrapper::after {
    border-radius: 20px;
  }

  .topnc-video-home-overlay {
    left: 20px;
    right: 20px;
    bottom: 18px;
  }

  .topnc-video-home-overlay strong {
    font-size: 19px;
    line-height: 1.08;
  }

  .topnc-video-home-stage::before {
    width: 420px;
    height: 300px;
    filter: blur(30px);
  }
}

/* TOPNC Video Play Icon – Farbe erzwingen */
body .topnc-video-home-stage .elementor-widget-video .elementor-custom-embed-play svg,
body .topnc-video-home-stage .elementor-widget-video .elementor-custom-embed-play svg path {
  fill: #AD282C !important;
  color: #AD282C !important;
}

/* Falls Elementor Icon-Font statt SVG nutzt */
body .topnc-video-home-stage .elementor-widget-video .elementor-custom-embed-play i,
body .topnc-video-home-stage .elementor-widget-video .elementor-custom-embed-play i::before {
  color: #AD282C !important;
}

/* Overlay ausblenden, sobald Video gestartet wurde */
.topnc-video-home-stage.is-video-playing .topnc-video-home-overlay {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

.topnc-video-home-overlay {
  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease;
}

/* =========================================================
   03. News and post content
   ========================================================= */

.topnc-post-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px) 0 0 / 72px 72px,
      linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px) 0 0 / 72px 72px;
    opacity: .5;
}

.topnc-post-content h2 {
  color: #090909;
  font-size: clamp(32px, 3vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.055em;
  font-weight: 800;
  margin: 64px 0 22px;
}
.topnc-post-content ul {
  margin: 0 0 34px;
  padding-left: 0;
  list-style: none;
}

.topnc-post-content li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  color: #6F747A;
  font-size: 16px;
  line-height: 1.75;
}

.topnc-post-content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #AD282C;
}

.topnc-post-content blockquote {
  margin: 54px 0;
  padding: 34px 38px;
  border-left: 5px solid #AD282C;
  border-radius: 18px;
  background: #F7F8FA;
  color: #090909;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* Alle Loop-Beiträge innerhalb einer Zeile gleich hoch */
.elementor-loop-container {
    align-items: stretch;
}

/* Loop-Item auf die vollständige Rasterhöhe strecken */
.elementor-loop-container > .e-loop-item {
    display: flex;
    height: 100%;
}

/* Elementor-Zwischenwrapper ebenfalls strecken */
.elementor-loop-container > .e-loop-item > .elementor {
    display: flex;
    width: 100%;
    height: 100%;
}

.elementor-loop-container > .e-loop-item > .elementor > .elementor-element {
    width: 100%;
    height: 100%;
}

/* Eigentliche News-Karte */
.topnc-news-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Bereich unterhalb des Bildes */
.topnc-news-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Read-more-Link immer nach unten schieben */
.topnc-news-readmore {
    margin-top: auto;
}

/* Globaler Tooltip – wird per JavaScript an den Body angehängt */
.topnc-title-tooltip {
    position: fixed;
    z-index: 999999;

    width: max-content;
    max-width: min(380px, calc(100vw - 30px));
    padding: 11px 14px;

    font-size: 14px;
    line-height: 1.45;
    font-weight: 400;
    color: #ffffff;

    background: #171d21;
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(5px);
    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}

.topnc-title-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Kleiner Tooltip-Pfeil */
.topnc-title-tooltip::after {
    content: "";
    position: absolute;

    left: 50%;
    bottom: -6px;

    width: 12px;
    height: 12px;

    background: #171d21;
    transform: translateX(-50%) rotate(45deg);
}

.topnc-title-tooltip.is-below::after {
    top: -6px;
    bottom: auto;
}

/* TOPNC Text-Link mit animiertem Pfeil */
.topnc-news-readmore .elementor-button,
.topnc-news-readmore a,
a.topnc-news-readmore {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 !important;
  min-height: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #AD282C !important;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Pfeil erzeugen */
.topnc-news-readmore .elementor-button::after,
.topnc-news-readmore a::after,
a.topnc-news-readmore::after {
      color: #AD282C !important;
  content: "→";
  display: inline-block;
  margin-left: 2px;
  color: currentColor;
  font-size: 14px;
  line-height: 1;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

/* Hover: Pfeil fährt leicht nach rechts */
.topnc-news-readmore .elementor-button:hover::after,
.topnc-news-readmore a:hover::after,
a.topnc-news-readmore:hover::after {
  transform: translateX(4px);
}

/* Optional: Link beim Hover minimal dunkler */
.topnc-news-readmore .elementor-button:hover,
.topnc-news-readmore a:hover,
a.topnc-news-readmore:hover {
  color: #AD282C !important;
}


/* =========================================================
   04. Header and footer
   ========================================================= */

/* Originallogo: roter Teil */
.logo-orig svg .cls-1 {
  fill: #AD282C !important;
}

/* Originallogo: dunkler/schwarzer Teil */
.logo-orig svg .cls-2 {
  fill: #221714 !important;
}

.topnc-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    color: rgba(255,255,255,.62);
    font-size: 14px;
}

.topnc-footer ul a,
.topnc-footer ul a:hover,
.topnc-footer ul a:active,
.topnc-footer ul a:visited {
    color: rgba(255,255,255,.62);
}

/* =========================================================
   TOPNC HEADER – TRANSPARENT ZU WEISS BEIM SCROLLEN
   Steuerung über .topnc-scrolled
   ========================================================= */


/* ---------------------------------------------------------
   Header Grundzustand
   --------------------------------------------------------- */

.topnc-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 9999;
  transition:
    background-color 0.35s ease,
    box-shadow 0.35s ease,
    backdrop-filter 0.35s ease,
    padding 0.35s ease;
}

/* Scrollzustand */
.topnc-header.topnc-scrolled {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(10px);
}

/* Falls du im WordPress-Backend eingeloggt bist */
body.admin-bar .topnc-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .topnc-header {
    top: 46px;
  }
}


/* ---------------------------------------------------------
   Logo-Wechsel mit zwei Icon-Widgets / SVGs
   --------------------------------------------------------- */

.topnc-logo-wrap {
  position: relative;
  width: 180px;
  height: 46px;
  flex-shrink: 0;
}

/* Beide Logo-Icon-Widgets exakt übereinanderlegen */
.topnc-logo-wrap .logo-light,
.topnc-logo-wrap .logo-dark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

/* Helles SVG-Logo wirklich weiß erzwingen */
.topnc-logo-wrap .logo-light .elementor-icon {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.topnc-logo-wrap .logo-light svg,
.topnc-logo-wrap .logo-light svg * {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Elementor Icon-Element auf volle Fläche bringen */
.topnc-logo-wrap .logo-light .elementor-icon,
.topnc-logo-wrap .logo-dark .elementor-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* SVG sauber skalieren */
.topnc-logo-wrap .logo-light svg,
.topnc-logo-wrap .logo-dark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Startzustand: helles Logo sichtbar */
.topnc-logo-wrap .logo-light {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Startzustand: dunkles Logo unsichtbar */
.topnc-logo-wrap .logo-dark {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
}

/* Scrollzustand: helles Logo ausblenden */
.topnc-header.topnc-scrolled .topnc-logo-wrap .logo-light {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}

/* Scrollzustand: dunkles Logo einblenden */
.topnc-header.topnc-scrolled .topnc-logo-wrap .logo-dark {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* ---------------------------------------------------------
   Navigation – Farbe wechseln
   --------------------------------------------------------- */

/* Navigation Startzustand */
.topnc-main-nav a,
.topnc-main-nav .elementor-item {
  color: #ffffff !important;
  transition:
    color 0.35s ease,
    opacity 0.35s ease;
}

/* Navigation Hover im Startzustand */
.topnc-main-nav a:hover,
.topnc-main-nav .elementor-item:hover {
  color: #AD282C !important;
  opacity: 1;
}

/* Aktiver Menüpunkt im Startzustand */
.topnc-main-nav .current-menu-item > a,
.topnc-main-nav .elementor-item.elementor-item-active {
  color: #AD282C !important;
  opacity: 1;
}

/* Navigation Scrollzustand */
.topnc-header.topnc-scrolled .topnc-main-nav a,
.topnc-header.topnc-scrolled .topnc-main-nav .elementor-item {
  color: #111827 !important;
  opacity: 1;
}

/* Navigation Hover im Scrollzustand */
.topnc-header.topnc-scrolled .topnc-main-nav a:hover,
.topnc-header.topnc-scrolled .topnc-main-nav .elementor-item:hover {
  color: #AD282C !important;
  opacity: 1;
}

/* Aktiver Menüpunkt im Scrollzustand */
.topnc-header.topnc-scrolled .topnc-main-nav .current-menu-item > a,
.topnc-header.topnc-scrolled .topnc-main-nav .elementor-item.elementor-item-active {
  color: #c4001a !important;
  opacity: 1;
}




/* ---------------------------------------------------------
   Button – Farbe wechseln
   --------------------------------------------------------- */

/* Button Startzustand */
.topnc-header-button .elementor-button {
  background: #AD282C !important;
  color: #ffffff !important;
  border: 1px solid #AD282C !important;
  transition:
    background-color 0.35s ease,
    color 0.35s ease,
    border-color 0.35s ease;
}

/* Button Hover Startzustand */
.topnc-header-button .elementor-button:hover {
  background: #AD282C !important;
  color: #FFFFFF !important;
  border-color: #AD282C !important;
}

/* Button Scrollzustand */
.topnc-header.topnc-scrolled .topnc-header-button .elementor-button {
  background: #AD282C !important;
  color: #ffffff !important;
  border-color: #AD282C !important;
}

/* Button Hover Scrollzustand */
.topnc-header.topnc-scrolled .topnc-header-button .elementor-button:hover {
  background: #AD282C !important;
  color: #ffffff !important;
  border-color: #AD282C !important;
}

/* =========================================================
   TOPNC DESKTOP DROPDOWN – STARTZUSTAND + SCROLLZUSTAND
   ========================================================= */

@media (min-width: 1025px) {

  /* ---------------------------------------------------------
     Dropdown-Indikator im Startzustand: weiß
     --------------------------------------------------------- */

  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-item .sub-arrow,
  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-item .sub-arrow i,
  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-item .sub-arrow svg {
    color: #ffffff !important;
    fill: #ffffff !important;
  }

  /* Auch bei Hover / aktiv im Startzustand weiß lassen */
  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-item:hover .sub-arrow,
  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-item.highlighted .sub-arrow,
  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-item.elementor-item-active .sub-arrow {
    color: #ffffff !important;
    fill: #ffffff !important;
  }


  /* ---------------------------------------------------------
     Dropdown-Indikator im Scrollzustand: Anthrazit
     --------------------------------------------------------- */

  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-item .sub-arrow,
  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-item .sub-arrow i,
  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-item .sub-arrow svg {
    color: #221714 !important;
    fill: #221714 !important;
  }

  /* Bei Hover / aktiv im Scrollzustand: TOPNC-Rot */
  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-item:hover .sub-arrow,
  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-item.highlighted .sub-arrow,
  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-item.elementor-item-active .sub-arrow {
    color: #AD282C !important;
    fill: #AD282C !important;
  }


  /* ---------------------------------------------------------
     Desktop Dropdown im Startzustand: Glass / Blur
     --------------------------------------------------------- */

  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu {
    min-width: 230px !important;
    padding: 8px 0 !important;
    border: solid rgba(255, 255, 255, 0.14) !important;
  border-width: 1px 1px 1px 1px !important;
    border-radius: 0 0 12px 12px !important;
    background: rgba(0, 0, 0, 0.16) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden;
  }

  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li,
  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a {
    background: transparent !important;
  }

  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a {
    padding: 14px 18px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition:
      background-color 0.22s ease,
      color 0.22s ease;
  }

  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li:last-child a {
    border-bottom: 0 !important;
  }

  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a:hover,
  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-item-active,
  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu .current-menu-item > a {
    color: #AD282C !important;
    background: rgba(255, 255, 255, 0) !important;
  }


  /* ---------------------------------------------------------
     Desktop Dropdown im Scrollzustand: weiß
     --------------------------------------------------------- */

  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu {
    min-width: 230px !important;
    padding: 8px 0 !important;
  border: solid rgba(0, 0, 0, 0.08) !important;
  border-width: 1px 1px 1px 1px !important;
    border-radius: 0 0 12px 12px !important;
    background: rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden;
  }

  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li,
  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a {
    background: transparent !important;
  }

  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a {
    padding: 14px 18px !important;
    color: #221714 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition:
      background-color 0.22s ease,
      color 0.22s ease;
  }

  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu li:last-child a {
    border-bottom: 0 !important;
  }

  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a:hover,
  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu a.elementor-item-active,
  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu .current-menu-item > a {
    color: #AD282C !important;
    background: rgba(255, 255, 255, 1) !important;
  }
}

/* ---------------------------------------------------------
   Mobile Navigation Dropdown
   --------------------------------------------------------- */

@media (max-width: 1024px) {

  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--dropdown,
  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--dropdown .elementor-nav-menu {
    background: rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(16px);
  }

  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--dropdown a {
    color: #ffffff !important;
  }

  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--dropdown a:hover,
  .topnc-header:not(.topnc-scrolled) .topnc-main-nav .elementor-nav-menu--dropdown a.elementor-item-active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--dropdown,
  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--dropdown .elementor-nav-menu {
    background: #ffffff !important;
  }

  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--dropdown a {
    color: #221714 !important;
  }

  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--dropdown a:hover,
  .topnc-header.topnc-scrolled .topnc-main-nav .elementor-nav-menu--dropdown a.elementor-item-active {
    color: #221714 !important;
    background: #f7f8fa !important;
  }
}


/* =========================================================
   FIX: SVG-Klassen-Kollision im Logo
   Beide Inline-SVGs nutzen .cls-1 – deshalb Farbe erzwingen
   ========================================================= */

/* Weißes Logo komplett weiß */
.topnc-logo-wrap .logo-light svg,
.topnc-logo-wrap .logo-light svg * {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Originallogo: roter Teil */
.topnc-logo-wrap .logo-dark svg .cls-1 {
  fill: #AD282C !important;
}

/* Originallogo: dunkler/schwarzer Teil */
.topnc-logo-wrap .logo-dark svg .cls-2 {
  fill: #221714 !important;
}


/* =========================================================
   05. Shared hero elements
   ========================================================= */

/* Dunkles Overlay für Text-Lesbarkeit */
.topnc-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.92) 0%,
            rgba(0,0,0,.78) 24%,
            rgba(0,0,0,.44) 48%,
            rgba(0,0,0,.14) 72%,
            rgba(0,0,0,.48) 100%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.42) 0%,
            rgba(0,0,0,.04) 42%,
            rgba(0,0,0,.72) 100%
        );
}

/* Service and contact hero overlays */
.service-hero::before,
.contact-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 35%, rgba(173,40,44,.20), transparent 52%),
    linear-gradient(90deg, rgba(9,9,9,.96), rgba(9,9,9,.84) 35%, rgba(9,9,9,.54) 62%, rgba(9,9,9,.58));
  z-index: 1;
}

.service-hero::after,
.contact-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 84px 84px;
  opacity: .42;
  z-index: 2;
}

.service-hero-card,
.contact-hero-card {
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  backdrop-filter: blur(18px);
  box-shadow: 0 34px 100px rgba(0,0,0,.36);
}


/* =========================================================
   06. Generic machine-family template
   ========================================================= */

.topnc-family-hero {
    background: radial-gradient(circle at 78% 42%, rgba(173, 40, 44, 0.16) 0%, rgba(173, 40, 44, 0.07) 18%, rgba(173, 40, 44, 0.00) 42%),
        linear-gradient(135deg, #ffffff 0%, #fbfbfb 55%, #f5f5f5 100%);
}

.topnc-family-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-image:
    linear-gradient(90deg, rgba(34, 23, 21, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(34, 23, 21, 0.04) 1px, transparent 1px);

  background-size: 104px 104px;
  background-position: center top;

  opacity: 1;

  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    black 18%,
    black 78%,
    transparent 100%
  );
}

.topnc-family-hero__visual {
      position: relative;
      z-index: 1;
      min-width: 0;
      min-height: 560px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-left: clamp(-120px, -5vw, -50px);
    }

    .topnc-family-hero__visual::before {
      content: "";
      position: absolute;
      width: clamp(420px, 40vw, 760px);
      height: clamp(420px, 40vw, 760px);
      left: 50%;
      top: 50%;
      transform: translate(-45%, -50%);
      border-radius: 999px;
      background: radial-gradient(circle, rgba(173, 40, 44, 0.24) 0%, rgba(173, 40, 44, 0.12) 34%, rgba(173, 40, 44, 0) 70%);
      filter: blur(18px);
      pointer-events: none;
    }
    
    /* Tablet */
@media (max-width: 1024px) {
  .topnc-family-hero__visual {
    min-height: 280px;
    margin-left: clamp(-70px, -4vw, -30px);
    justify-content: flex-start;
  }

  .topnc-family-hero__visual::before {
    width: clamp(360px, 55vw, 600px);
    height: clamp(260px, 55vw, 400px);
    transform: translate(-50%, -50%);
    filter: blur(16px);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .topnc-family-hero__visual {
    min-height: 260px;
    margin-left: 0;
    justify-content: center;
    align-items: center;
  }

  .topnc-family-hero__visual::before {
    width: clamp(280px, 88vw, 420px);
    height: clamp(180px, 88vw, 320px);
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    filter: blur(14px);
  }
}

/* Sehr kleine Smartphones */
@media (max-width: 480px) {
  .topnc-family-hero__visual {
    min-height: 300px;
  }

  .topnc-family-hero__visual::before {
    width: clamp(240px, 95vw, 360px);
    height: clamp(240px, 95vw, 360px);
    top: 50%;
    filter: blur(12px);
  }
}

.topnc-family-hero__logo-bg {
      position: absolute;
      width: clamp(680px, 58vw, 1100px);
      left: 8%;
      top: 55%;
      transform: translateY(-50%) rotate(2deg);
      opacity: 0.05;
      filter: blur(0.3px);
      pointer-events: none;
      user-select: none;
    }
    
    /* Tablet */
@media (max-width: 1024px) {
  .topnc-family-hero__logo-bg {
    width: clamp(320px, 70vw, 580px);
    left: 2%;
    top: 32%;
    transform: translateY(-50%) rotate(2deg);
    opacity: 0.045;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .topnc-family-hero__logo-bg {
    width: clamp(360px, 115vw, 560px);
    left: 50%;
    top: 68%;
    transform: translate(-50%, -50%) rotate(2deg);
    opacity: 0.04;
    filter: blur(0.2px);
  }
}


/* =========================================================
   07. Forms
   ========================================================= */

/* TOPNC Elementor Service Form */
.topnc-service-form {
  --topnc-red: #AD282C;
  --topnc-red-dark: #8F1F24;
  --topnc-black: #090909;
  --topnc-text: #2D2D2D;
  --topnc-muted: #6F747A;
  --topnc-soft: #F7F8FA;
  --topnc-border: #E8E8E8;
}

/* Mehr Abstand zwischen zweispaltigen Feldern */
.topnc-service-form .elementor-form-fields-wrapper {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 18px;
}

.topnc-service-form .elementor-field-group {
  margin-bottom: 0 !important;
}

.topnc-service-form .elementor-field-group.elementor-col-50 {
  width: calc(50% - 12px) !important;
}

.topnc-service-form .elementor-field-group.elementor-col-100 {
  width: 100% !important;
}

/* Labels */
.topnc-service-form .elementor-field-label {
  color: var(--topnc-black);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

/* Input, Textarea, Select */
.topnc-service-form .elementor-field,
.topnc-service-form .elementor-field-textual,
.topnc-service-form input,
.topnc-service-form textarea,
.topnc-service-form select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--topnc-border);
  border-radius: 12px;
  background-color: #F7F8FA !important;
  color: var(--topnc-text);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  padding: 0 16px;
  box-shadow: none;
  outline: none;
  transition:
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease;
}

/* Textarea */
.topnc-service-form textarea.elementor-field,
.topnc-service-form textarea.elementor-field-textual {
  min-height: 150px;
  padding: 15px 16px;
  resize: vertical;
}

/* Placeholder */
.topnc-service-form input::placeholder,
.topnc-service-form textarea::placeholder {
  color: rgba(111, 116, 122, 0.72);
  opacity: 1;
}

/* Fokus */
.topnc-service-form .elementor-field:focus,
.topnc-service-form .elementor-field-textual:focus,
.topnc-service-form input:focus,
.topnc-service-form textarea:focus,
.topnc-service-form select:focus {
  border-color: rgba(173, 40, 44, 0.48);
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(173, 40, 44, 0.08);
}

/* Select / Pulldown */
.topnc-service-form select {
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
  padding-right: 16px;
  background-image: none !important;
}

.topnc-service-form select:focus {
  background-image: none !important;
}

/* Elementor Select Wrapper bereinigen */
.topnc-service-form .elementor-field-type-select .elementor-select-wrapper {
  width: 100%;
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.topnc-service-form .elementor-field-type-select select,
.topnc-service-form .elementor-field-type-select .elementor-field-textual {
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  box-sizing: border-box;
  display: block;
}

.topnc-service-form .elementor-select-wrapper::before {
  right: 18px;
  transform: translateY(-50%);
}

/* Upload-Feld sauber aufbauen */
.topnc-service-form .elementor-field-type-upload {
  position: relative;
  display: grid !important;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "label label"
    "button filename";
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
  min-height: auto;
}

/* Upload-Label oben links */
.topnc-service-form .elementor-field-type-upload .elementor-field-label {
  grid-area: label;
  display: block;
  width: 100%;
  margin: 0;
}

/* Echtes Datei-Feld unsichtbar über Button/Dateiname legen */
.topnc-service-form .elementor-field-type-upload input[type="file"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 28px;
  width: 100%;
  height: 44px;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  border: 0;
  background: transparent !important;
}

/* Eigener englischer Upload-Button */
.topnc-service-form .elementor-field-type-upload::before {
  grid-area: button;
  content: "Choose file";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #DADDE2;
  color: var(--topnc-black);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  pointer-events: none;
}

/* Dateiname / No file selected */
.topnc-service-form .topnc-upload-filename {
  grid-area: filename;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  color: var(--topnc-muted);
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  pointer-events: none;
}

/* Mobile */
@media (max-width: 767px) {
  .topnc-service-form .elementor-field-type-upload {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "button"
      "filename";
  }

  .topnc-service-form .elementor-field-type-upload::before {
    width: max-content;
  }

  .topnc-service-form .topnc-upload-filename {
    min-height: auto;
  }

  .topnc-service-form .elementor-field-type-upload input[type="file"] {
    top: 28px;
    height: 86px;
  }
}

/* Upload-Feld optisch wie Formularfeld einfassen */
.topnc-service-form .elementor-field-type-upload {
  min-height: 82px;
  padding: 0;
}

/* Checkbox / Acceptance */
.topnc-service-form .elementor-field-type-acceptance label,
.topnc-service-form .elementor-field-type-checkbox label {
  color: var(--topnc-muted);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

.topnc-service-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  accent-color: var(--topnc-red);
  margin-right: 8px;
}

/* Button */
.topnc-service-form .elementor-button {
  background: var(--topnc-red);
  color: #ffffff;
  border: 1px solid var(--topnc-red);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 28px;
  box-shadow: 0 18px 35px rgba(173, 40, 44, 0.24);
  transition:
    background-color .22s ease,
    border-color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.topnc-service-form .elementor-button:hover {
  background: var(--topnc-red-dark);
  border-color: var(--topnc-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgba(173, 40, 44, 0.30);
}

.topnc-service-form .elementor-button-text {
  color: #ffffff;
}

/* Fehlermeldungen */
.topnc-service-form .elementor-message,
.topnc-service-form .elementor-form-help-inline {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.topnc-service-form .elementor-message-danger,
.topnc-service-form .elementor-form-help-inline {
  color: var(--topnc-red);
}

/* Erfolgsmeldung */
.topnc-service-form .elementor-message-success {
  color: #1f7a45;
}

/* Mobile */
@media (max-width: 767px) {
  .topnc-service-form .elementor-form-fields-wrapper {
    column-gap: 0;
    row-gap: 18px;
  }

  .topnc-service-form .elementor-field-group.elementor-col-50,
  .topnc-service-form .elementor-field-group.elementor-col-100 {
    width: 100% !important;
  }

  .topnc-service-form .elementor-field,
  .topnc-service-form .elementor-field-textual,
  .topnc-service-form input,
  .topnc-service-form textarea,
  .topnc-service-form select {
    min-height: 50px;
    font-size: 15px;
  }

  .topnc-service-form .elementor-button {
    width: 100%;
  }

  .topnc-service-form .topnc-upload-filename {
    display: flex;
    margin-left: 0;
    margin-top: 10px;
  }
}

/* TOPNC Elementor Contact Form */
.topnc-contact-form {
  --topnc-red: #AD282C;
  --topnc-red-dark: #8F1F24;
  --topnc-black: #090909;
  --topnc-text: #2D2D2D;
  --topnc-muted: #6F747A;
  --topnc-soft: #F7F8FA;
  --topnc-border: #E8E8E8;
}

/* Formular-Gruppen */
.topnc-contact-form .elementor-field-group {
  margin-bottom: 18px;
}

/* Labels */
.topnc-contact-form .elementor-field-label {
  color: var(--topnc-black);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

/* Input, Textarea, Select */
.topnc-contact-form .elementor-field,
.topnc-contact-form .elementor-field-textual,
.topnc-contact-form input,
.topnc-contact-form textarea,
.topnc-contact-form select {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--topnc-border);
  border-radius: 12px;
  background-color: #F7F8FA!important;
  color: var(--topnc-text);
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 500;
  padding: 0 16px;
  box-shadow: none;
  outline: none;
  transition: 
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease;
}

/* Textarea */
.topnc-contact-form textarea.elementor-field,
.topnc-contact-form textarea.elementor-field-textual {
  min-height: 150px;
  padding: 15px 16px;
  resize: vertical;
}

/* Placeholder */
.topnc-contact-form input::placeholder,
.topnc-contact-form textarea::placeholder {
  color: rgba(111, 116, 122, 0.72);
  opacity: 1;
}

/* Fokus */
.topnc-contact-form .elementor-field:focus,
.topnc-contact-form .elementor-field-textual:focus,
.topnc-contact-form input:focus,
.topnc-contact-form textarea:focus,
.topnc-contact-form select:focus {
  border-color: rgba(173, 40, 44, 0.48);
  background-color: #ffffff;
  box-shadow: 0 0 0 4px rgba(173, 40, 44, 0.08);
}

/* Select / Pulldown */
.topnc-contact-form select {
  appearance: auto;
  -webkit-appearance: auto;
  cursor: pointer;
  padding-right: 16px;
  background-image: none !important;
}

/* Select bei Fokus */
.topnc-contact-form select:focus {
  background-image: none !important;
}

/* Checkbox / Acceptance */
.topnc-contact-form .elementor-field-type-acceptance label,
.topnc-contact-form .elementor-field-type-checkbox label {
  color: var(--topnc-muted);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
}

.topnc-contact-form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 18px;
  accent-color: var(--topnc-red);
  margin-right: 8px;
}

/* Button */
.topnc-contact-form .elementor-button {
  background: var(--topnc-red);
  color: #ffffff;
  border: 1px solid var(--topnc-red);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 28px;
  box-shadow: 0 18px 35px rgba(173, 40, 44, 0.24);
  transition:
    background-color .22s ease,
    border-color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.topnc-contact-form .elementor-button:hover {
  background: var(--topnc-red-dark);
  border-color: var(--topnc-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgba(173, 40, 44, 0.30);
}

/* Button Text */
.topnc-contact-form .elementor-button-text {
  color: #ffffff;
}

/* Fehlermeldungen */
.topnc-contact-form .elementor-message,
.topnc-contact-form .elementor-form-help-inline {
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
}

.topnc-contact-form .elementor-message-danger,
.topnc-contact-form .elementor-form-help-inline {
  color: var(--topnc-red);
}

/* Erfolgsmeldung */
.topnc-contact-form .elementor-message-success {
  color: #1f7a45;
}

/* Mobile */
@media (max-width: 767px) {
  .topnc-contact-form .elementor-field,
  .topnc-contact-form .elementor-field-textual,
  .topnc-contact-form input,
  .topnc-contact-form textarea,
  .topnc-contact-form select {
    min-height: 50px;
    font-size: 15px;
  }

  .topnc-contact-form .elementor-button {
    width: 100%;
  }
}

/* Elementor Select Wrapper bereinigen */
.topnc-contact-form .elementor-field-type-select .elementor-select-wrapper {
  width: 100%;
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Select-Feld sauber auf volle Breite ziehen */
.topnc-contact-form .elementor-field-type-select select,
.topnc-contact-form .elementor-field-type-select .elementor-field-textual {
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  box-sizing: border-box;
  display: block;
}

/* Falls Elementor den Wrapper-Pfeil noch beeinflusst */
.topnc-contact-form .elementor-select-wrapper::before {
  right: 18px;
  transform: translateY(-50%);
}


/* =========================================================
   08. Company timeline
   ========================================================= */

.topnc-timeline-slider {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.topnc-timeline-track {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Wichtig: Elementor-Container dürfen nicht schrumpfen */
.topnc-timeline-card {
  flex: 0 0 270px !important;
  width: 270px !important;
  max-width: 270px !important;
}

/* Falls Elementor intern .e-con-inner erzeugt */
.topnc-timeline-track > .e-con-inner {
  width: max-content !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* Cards innerhalb der Elementor-Inner-Struktur */
.topnc-timeline-track > .e-con-inner > .topnc-timeline-card {
  flex: 0 0 270px !important;
  width: 270px !important;
  max-width: 270px !important;
}

/* Scrollbar sichtbar machen */
.topnc-timeline-track::-webkit-scrollbar {
  height: 8px;
}

.topnc-timeline-track {
  scrollbar-width: thin;
}


/* =========================================================
   09. Machine-family pages
   ========================================================= */

/* Machine-family hero backgrounds */
.topnc-ics-family-hero,
.topnc-loong-family-hero,
.topnc-phantom-family-hero,
.topnc-kunpeng-family-hero {
  min-height: calc(100vh - 80px);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.topnc-ics-family-hero {
  background-image: url("/wp-content/uploads/2026/07/ics-img-6.jpg");
}

.topnc-loong-family-hero {
  background-image: url("/wp-content/uploads/2026/07/loong-img-3.jpg");
}

.topnc-phantom-family-hero {
  background-image: url("/wp-content/uploads/2026/07/phantom-img-3.jpg");
}

.topnc-kunpeng-family-hero {
  background-image: url("/wp-content/uploads/2026/07/kunpeng-img-3.jpg");
}

.topnc-ics-family-hero::before,
.topnc-loong-family-hero::before,
.topnc-phantom-family-hero::before,
.topnc-kunpeng-family-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(34, 23, 21, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(34, 23, 21, 0.04) 1px, transparent 1px);
  background-size: 104px 104px;
  background-position: center top;
  opacity: 1;
  mask-image: linear-gradient(180deg, transparent 0%, black 18%, black 78%, transparent 100%);
}

.topnc-ics-family-hero > *,
.topnc-loong-family-hero > *,
.topnc-phantom-family-hero > *,
.topnc-kunpeng-family-hero > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .topnc-ics-family-hero {
    background-position: 65%;
  }
}

@media (max-width: 767px) {
  .topnc-ics-family-hero,
  .topnc-loong-family-hero,
  .topnc-phantom-family-hero,
  .topnc-kunpeng-family-hero {
    background-size: cover;
    background-repeat: no-repeat;
  }

  .topnc-ics-family-hero {
    background-image:
      linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
      url("/wp-content/uploads/2026/07/ics-img-6.jpg");
    background-position: 68% center;
  }

  .topnc-loong-family-hero {
    background-image:
      linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
      url("/wp-content/uploads/2026/07/loong-img-3.jpg");
    background-position: 55% center;
  }

  .topnc-phantom-family-hero {
    background-image:
      linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
      url("/wp-content/uploads/2026/07/phantom-img-3.jpg");
    background-position: 65% center;
  }

  .topnc-kunpeng-family-hero {
    background-image:
      linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.72)),
      url("/wp-content/uploads/2026/07/kunpeng-img-3.jpg");
    background-position: 65% center;
  }

  .topnc-ics-family-hero::before,
  .topnc-loong-family-hero::before,
  .topnc-phantom-family-hero::before,
  .topnc-kunpeng-family-hero::before {
    display: none;
  }
}


/* =========================================================
   10. Home hero
   Gilt für:
   - Startseite
   - Seite ID 13
   - Seite ID 1995
   ========================================================= */

body:is(.home, .page-id-13, .page-id-1995) .topnc-hero {
    position: relative;
    overflow: hidden;
    min-height: 920px;
    color: var(--topnc-white);
    background: #08090a;
    isolation: isolate;
}


/* Elementor inner container */
body:is(.home, .page-id-13, .page-id-1995) .topnc-hero > .e-con-inner {
    position: relative;
    min-height: 920px;
    display: flex;
    align-items: center;
    z-index: 5;
}

/* Textbereich */
body:is(.home, .page-id-13, .page-id-1995) .topnc-hero-content {
    position: relative;
    z-index: 10;
    width: min(660px, 100%);
}

/* Bildcontainer wird aus dem normalen Elementor-Layout herausgenommen */
body:is(.home, .page-id-13, .page-id-1995) .topnc-hero .topnc-hero-bg {
    position: absolute !important;
    inset: 0 auto 0 50%;
    width: 100vw !important;
    height: 100% !important;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Elementor-Bildwidget auf volle Fläche ziehen */
body:is(.home, .page-id-13, .page-id-1995) .topnc-hero .topnc-hero-bg .elementor-widget-image,
body:is(.home, .page-id-13, .page-id-1995) .topnc-hero .topnc-hero-bg .elementor-widget-container {
    width: 100%;
    height: 100%;
}

body:is(.home, .page-id-13, .page-id-1995) .topnc-hero .topnc-hero-bg img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block;
    object-fit: cover;
    object-position: 62% center;
    filter: contrast(1.06) saturate(.96);
}

/* Grid über dem Bild */
body:is(.home, .page-id-13, .page-id-1995) .topnc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .48;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .055) 1px,
            transparent 1px
        ) center top / 104px 100%,
        linear-gradient(
            rgba(255, 255, 255, .045) 1px,
            transparent 1px
        ) center top / 100% 104px;
}

/* Roter Glow über dem Bild, aber unter dem Text */
body:is(.home, .page-id-13, .page-id-1995) .topnc-hero .topnc-hero-bg::before {
    content: "";
    position: absolute;
    left: var(--glow-x, 66%);
    top: var(--glow-y, 50%);
    width: 1100px;
    height: 1100px;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
        circle,
        rgba(173, 40, 44, .90) 0%,
        rgba(173, 40, 44, .62) 18%,
        rgba(173, 40, 44, .36) 36%,
        rgba(173, 40, 44, .16) 56%,
        transparent 76%
    );
    filter: blur(70px);
    opacity: 1;
    mix-blend-mode: screen;
}

/* =========================================================
   TOPNC Home Hero – Responsive Height Override
   Muss ganz ans Ende der CSS-Datei
   ========================================================= */

/* Tablet */
@media screen and (max-width: 1024px) {
  body.home .topnc-hero,
  body.page-id-13 .topnc-hero,
  body.page-id-1995 .topnc-hero,
  body.home .topnc-hero > .e-con-inner,
  body.page-id-13 .topnc-hero > .e-con-inner,
  body.page-id-1995 .topnc-hero > .e-con-inner {
    min-height: 760px !important;
  }
}

/* Mobile */
@media screen and (max-width: 767px) {
  body.home .topnc-hero,
  body.page-id-13 .topnc-hero,
  body.page-id-1995 .topnc-hero,
  body.home .topnc-hero > .e-con-inner,
  body.page-id-13 .topnc-hero > .e-con-inner,
  body.page-id-1995 .topnc-hero > .e-con-inner {
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Kleine Smartphones */
@media screen and (max-width: 480px) {
  body.home .topnc-hero,
  body.page-id-13 .topnc-hero,
  body.page-id-1995 .topnc-hero,
  body.home .topnc-hero > .e-con-inner,
  body.page-id-13 .topnc-hero > .e-con-inner,
  body.page-id-1995 .topnc-hero > .e-con-inner {
    min-height: 0 !important;
    height: auto !important;
  }
}


/* =========================================================
   TOPNC Home Hero – Rundungen am Hero-Bildcontainer entfernen
   ========================================================= */

body:is(.home, .page-id-13, .page-id-1995) .topnc-hero .topnc-hero-bg,
body:is(.home, .page-id-13, .page-id-1995) .topnc-hero .topnc-hero-bg .elementor-widget-container,
body:is(.home, .page-id-13, .page-id-1995) .topnc-hero .topnc-hero-bg img {
  border-radius: 0 !important;
}

/* =========================================================
   TOPNC Styling für PopUp Close Button
   ========================================================= */

.dialog-close-button.dialog-lightbox-close-button {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 9999 !important;

  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(255, 255, 255, 0.36) !important;
  border-radius: 999px !important;
  background: rgba(9, 9, 9, 0.48) !important;

  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: none !important;
  text-decoration: none !important;

  transition: background 0.2s ease, transform 0.2s ease;
}

.dialog-close-button.dialog-lightbox-close-button:hover {
  background: #AD282C !important;
  transform: rotate(90deg);
}

.dialog-close-button.dialog-lightbox-close-button svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  fill: currentColor !important;
  color: #ffffff !important;
}

.dialog-close-button.dialog-lightbox-close-button:hover svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* =========================================================
   Consent Tool Settings Button ausblenden
   ========================================================= */
html body .ccm-settings-summoner {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}