/*
Theme Name: Walther Systemtechnik
Theme URI: https://www.walther-systemtechnik.com
Author: Walther Systemtechnik GmbH
Description: Professionelles B2B-Theme für Walther Systemtechnik – Dosiertechnik für Industrie & Produktion. WooCommerce-kompatibel.
Version: 1.4.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary
Text Domain: walther-systemtechnik
*/

/* ============================================================
   CSS CUSTOM PROPERTIES – Walther Systemtechnik Brand & Style Guide v1.0
   Verbindliche Werte gemäß Styleguide April 2026
   ============================================================ */
:root {
  /* === Primärfarben (Styleguide Kap. 03) === */
  --blue-primary:    #0091d1;  /* Primärblau – CTAs, Links, Highlights */
  --blue-dark:       #006fa3;  /* Hover-Zustände, aktive Links */
  --blue-light:      #e6f5fb;  /* Hintergründe, Badges, Info-Boxen */
  --navy:            #495a65;  /* Navigation, Footer, Overlays */
  --charcoal:        #3a3a3a;  /* Haupttext, Überschriften, Body-Copy */
  --gray-medium:     #b3bfcc;  /* Trennlinien, Rahmen, Platzhalter */
  --gray-light:      #f1f1f1;  /* Seiten- und Karten-Hintergrund */
  --gray-border:     #e4e4e4;  /* Rahmen von Karten, Inputs, Tabellen */
  --white:           #ffffff;
  --danger:          #d1001a;  /* Fehlermeldungen */

  /* === Aliase für Template-Kompatibilität === */
  --wst-blue:        #0091d1;
  --wst-blue-dark:   #006fa3;
  --wst-blue-light:  #e6f5fb;
  --wst-navy:        #495a65;
  --wst-navy-dark:   #3a4a54;
  --wst-white:       #ffffff;
  --wst-text:        #3a3a3a;
  --wst-gray-100:    #f1f1f1;
  --wst-gray-200:    #e4e4e4;
  --wst-gray-300:    #b3bfcc;
  --wst-gray-500:    #b3bfcc;
  --wst-gray-700:    #495a65;
  --wst-border:      #e4e4e4;
  --wst-text-muted:  #495a65;

  /* === Typografie (Styleguide Kap. 04) === */
  --font-primary:    'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* === Abstände 8px-Basis (Styleguide Kap. 05) === */
  --sp-2xs:          2px;
  --sp-xs:           4px;
  --sp-sm:           8px;
  --sp-md:           16px;
  --sp-lg:           24px;
  --sp-xl:           40px;
  --sp-2xl:          64px;

  /* Aliase */
  --space-xs:        4px;
  --space-sm:        8px;
  --space-md:        16px;
  --space-lg:        24px;
  --space-xl:        40px;
  --space-xxl:       64px;

  /* === Layout === */
  --container-max:   1280px;
  --gutter:          32px;   /* Desktop-Gutter lt. Styleguide */
  --section-pad:     80px;
  --section-pad-sm:  40px;   /* = --sp-xl */

  /* === Schatten === */
  --shadow-sm:       0 1px 4px rgba(0,0,0,0.10);   /* Styleguide Kap. 08 */
  --shadow-md:       0 4px 12px rgba(0,0,0,0.12);  /* Karten-Hover */
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.14);

  /* === Border-Radius === */
  --radius-sm:       2px;    /* Buttons (Styleguide Kap. 07: border-radius: 2px) */
  --radius-md:       4px;    /* Karten (Styleguide Kap. 08: border-radius: 4px) */
  --radius-lg:       8px;

  /* === Animationen (max. 0.4s, Styleguide Kap. 12) === */
  --trans:           0.25s ease;
  --trans-slow:      0.35s ease;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
/* Styleguide Kap. 04: Body #3a3a3a, line-height 1.6 */
body { font-family: var(--font-primary); color: var(--charcoal); background: var(--white); line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-primary); text-decoration: none; transition: color var(--trans); }
a:hover { color: var(--blue-dark); }
ul { list-style: none; }

/* TYPOGRAPHY – Styleguide Kap. 04 exakt */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-primary); font-weight: 700; color: var(--charcoal); }
/* H1 Hero: 2.5–3rem / line-height 1.15 */
h1 { font-size: 2rem !important;   line-height: normal !important;  margin-bottom: 0 !important; }
/* H2 Section: 1.75rem / line-height 1.2 */
h2 { font-size: 1.5rem !important;  line-height: normal !important; margin-bottom: 0 !important; }
/* H3 Subsection: 1.25rem / line-height 1.3 */
h3 { font-size: 1.25rem !important; line-height: normal !important;  margin-bottom: 0 !important; }
/* H4 Component: 1rem / line-height 1.4 */
h4 { font-size: 1rem !important;    line-height: normal !important;  margin-bottom: 0 !important; }
/* Subheading: 1.1rem / line-height 1.4 */
.subheading { font-size: 1.1rem; font-weight: 400; line-height: 1.4; color: var(--charcoal); }
/* Body: 1rem / 16px */
p { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; color: var(--charcoal); }
p:last-child { margin-bottom: 0; }
/* Small / Caption: 0.8rem */
small, .caption { font-size: 0.8rem; line-height: 1.5; }
/* Label / Tag: 0.7rem / 700 / Uppercase / letter-spacing */
.label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-primary);
}

/* LAYOUT – Styleguide Kap. 05 */
/* Container: max. 1280px, Padding Desktop min. 40px */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .container { padding: 0 16px; } }
.container--narrow { max-width: 900px; }
.section { padding: var(--section-pad) 0; }
.section--sm { padding: var(--section-pad-sm) 0; }
.section--bg-gray { background: var(--gray-light); }
.section--bg-light { background: #f7f7f7; }
.section--bg-navy { background: var(--navy); }
.grid { display: grid; gap: 32px; } /* Desktop-Gutter 32px */
.grid--2 { grid-template-columns: repeat(2,1fr); }
.grid--3 { grid-template-columns: repeat(3,1fr); }
.grid--4 { grid-template-columns: repeat(4,1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
@media (max-width: 1024px) { .grid--4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px)  { .grid--3, .grid--4 { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .grid--2 { grid-template-columns: 1fr; } }

/* CARD-GRID Alias */
.card-grid { display: grid; gap: 32px; }
.card-grid--3 { grid-template-columns: repeat(3,1fr); }
.card-grid--4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1024px) { .card-grid--4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px)  { .card-grid--3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } }

/* BUTTONS – Styleguide Kap. 07 exakt */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.75rem 1.75rem;         /* 12px 28px lt. Styleguide */
  font-family: var(--font-primary);
  font-size: 0.875rem;               /* 14px lt. Styleguide */
  font-weight: 600;
  border-radius: 2px;                /* lt. Styleguide */
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--trans);
  text-decoration: none;
  letter-spacing: 0.02em;
}
/* Primär */
.btn--primary { background: var(--blue-primary); color: var(--white); border-color: var(--blue-primary); }
.btn--primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-md); }
/* Outline */
.btn--outline, .btn--secondary {
  background: transparent;
  color: var(--blue-primary);
  border-color: var(--blue-primary);
}
.btn--outline:hover, .btn--secondary:hover {
  background: var(--blue-primary);
  color: var(--white);
}
/* Navy */
.btn--navy { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn--navy:hover { background: var(--wst-navy-dark); border-color: var(--wst-navy-dark); color: var(--white); }
/* Weiß (auf dunklem Hintergrund) */
.btn--white { background: var(--white); color: var(--blue-primary); border-color: var(--white); }
.btn--white:hover { background: var(--blue-light); }
/* Größen */
.btn--lg { font-size: 1rem; padding: 1rem 2.5rem; }
.btn--sm { font-size: 0.8rem; padding: 0.5rem 1.25rem; }
.btn--full { width: 100%; justify-content: center; }

/* SECTION HEADER */
.section-header { text-align: center; margin-bottom: 48px; }
.section-header__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin-bottom: 12px;
}
.section-header__subtitle { font-size: 1.1rem; color: var(--navy); max-width: 640px; margin: 0 auto; }

/* CARDS – Styleguide Kap. 08 exakt */
.card {
  background: var(--white);
  border: 1px solid var(--gray-border);        /* #e4e4e4 */
  border-radius: 4px;                           /* lt. Styleguide */
  box-shadow: 0 1px 4px rgba(0,0,0,0.10);      /* lt. Styleguide */
  overflow: hidden;
  transition: transform var(--trans), box-shadow var(--trans);
}
.card:hover {
  transform: translateY(-4px);                  /* lt. Styleguide: max. -4px */
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);     /* lt. Styleguide */
}
/* Karten-Aufbau: Bild-Bereich Höhe 140px, Hintergrund #f1f1f1 */
.card__image {
  height: 140px;
  background: var(--gray-light);                /* #f1f1f1 lt. Styleguide */
  overflow: hidden;
}
.card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.card:hover .card__image img { transform: scale(1.04); }
/* Eyebrow-Label: Primärblau, 0.65rem, Uppercase */
.card__eyebrow {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-primary);
  margin-bottom: 6px;
}
.card__body { padding: 24px; }
.card__title { font-size: 1rem; font-weight: 700; margin-bottom: 8px; color: var(--charcoal); line-height: 1.4; }
/* Beschreibungstext: 0.825rem, Navy, line-height 1.6 */
.card__text { font-size: 0.825rem; color: var(--navy); line-height: 1.6; margin-bottom: 16px; }

/* BREADCRUMBS */
/* ── Breadcrumb-Streifen ──────────────────────────────
   Vollbreite Bar, Inhalt im .container = bündig mit Logo
   ──────────────────────────────────────────────────── */
.wst-breadcrumb-bar {
    width: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--gray-border);   /* #e4e4e4 */
}

.breadcrumbs {
    padding: 10px 0;
    font-size: 0.82rem;
    color: var(--gray-medium);
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}
/* Standard <a> Links */
/* Breadcrumb: Startseite (erster Link) – schwarz, fett */
.breadcrumbs ol > a:first-of-type { color: var(--charcoal); font-weight: 700; text-decoration: none; transition: color 0.2s; }
.breadcrumbs ol > a:first-of-type:hover { color: var(--blue-primary); }
/* Breadcrumb: Zwischenpunkte – schwarz, normal */
.breadcrumbs a { color: var(--charcoal); font-weight: 400; text-decoration: none; transition: color 0.2s; }
.breadcrumbs a:hover { color: var(--blue-primary); }
/* Breadcrumb: Letzter Punkt (aktuell) – grau, nicht klickbar */
.breadcrumbs .breadcrumb-current { color: var(--gray-medium) !important; font-weight: 400 !important; cursor: default; pointer-events: none; }

/* Breadcrumb im Hero MIT Bild: weiße Schrift */
.page-hero--has-img .wst-breadcrumb-bar,
.page-hero--has-img .breadcrumbs { background: transparent; border-bottom: none; }
.page-hero--has-img .breadcrumbs,
.page-hero--has-img .breadcrumbs a,
.page-hero--has-img .breadcrumbs li::after { color: rgba(255,255,255,0.7); }
.page-hero--has-img .breadcrumbs a:hover { color: #fff; }
.page-hero--has-img .breadcrumbs li:last-child { color: #fff; }

/* BADGE */
.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.badge--blue { background: var(--blue-light); color: var(--blue-dark); }
.badge--navy { background: var(--navy); color: var(--white); }

/* TABLES – Styleguide Kap. 10 exakt */
.wst-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
/* Header: Navy #495a65, weißer Text, Bold, 0.78rem */
.wst-table th {
  background: var(--navy);
  color: var(--white);
  padding: 0.7rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 0.78rem;
}
/* Zeilen-Trennlinie: 1px solid #e4e4e4 */
.wst-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--gray-border); }
/* Gerade Zeilen: #ffffff, Ungerade: #f1f1f1 */
.wst-table tbody tr:nth-child(odd) td { background: var(--gray-light); }
.wst-table tbody tr:nth-child(even) td { background: var(--white); }
/* Hover: #e6f5fb */
.wst-table tbody tr:hover td { background: var(--blue-light); }
/* Erste Spalte: Monospace, Navy, Bold */
.wst-table td:first-child { font-family: 'Courier New', Courier, monospace; color: var(--navy); font-weight: 700; }

/* FORMS – Styleguide Kap. 09 exakt */
.wst-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
/* Label: 0.825rem, 600, #3a3a3a */
.form-group label { font-size: 0.825rem; font-weight: 600; color: var(--charcoal); }
/* Input: border #b3bfcc, border-radius: 2px, padding: 0.65rem 0.9rem */
.form-group input,
.form-group textarea,
.form-group select {
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--gray-medium);
  border-radius: 2px;
  font-family: var(--font-primary);
  font-size: 1rem;                     /* min. 14px/0.875rem lt. Kap.12 */
  color: var(--charcoal);
  transition: border-color var(--trans), box-shadow var(--trans);
  background: var(--white);
}
/* Focus: border #0091d1, box-shadow 0 0 0 3px rgba(0,145,209,0.15) */
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blue-primary);
  box-shadow: 0 0 0 3px rgba(0,145,209,0.15);
}
/* Placeholder: #b3bfcc */
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-medium); }
/* Fehler-State: #d1001a */
.form-group--error input,
.form-group--error textarea { border-color: var(--danger); }
.form-group__error-msg { font-size: 0.825rem; color: var(--danger); }
.form-group textarea { min-height: 140px; resize: vertical; }

/* RESPONSIVE */
@media (max-width: 768px) { :root { --section-pad: 48px; --section-pad-sm: 32px; } }


/* ============================================================
   HERO (Startseite)
   ============================================================ */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  background: var(--wst-navy-dark) center/cover no-repeat;
  overflow: hidden;
  padding-top: 70px; /* Höhe des fixed Headers */
}
.hero__overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(51,63,71,0.88) 0%, rgba(0,145,209,0.45) 100%); }
.hero__content { position:relative; z-index:1; max-width:680px; }
.hero__eyebrow { display:inline-block; background:rgba(0,145,209,0.3); border:1px solid rgba(0,145,209,0.5); color:rgba(255,255,255,0.9); font-size:0.8rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:6px 16px; border-radius:20px; margin-bottom:20px; }
.hero__title { font-size:clamp(2rem,5vw,3.4rem); color:var(--white); margin-bottom:20px; line-height:1.15; }
.hero__title--accent { color:var(--blue-primary); }
.hero__subtitle { font-size:clamp(1rem,1.5vw,1.2rem); color:rgba(255,255,255,0.85); margin-bottom:36px; line-height:1.7; }
.hero__actions { display:flex; gap:16px; flex-wrap:wrap; }
.hero__scroll { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.6); cursor:pointer; animation:bounce 2s infinite; }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ============================================================
   USP BAR
   ============================================================ */
.usp-bar { background:var(--white); border-bottom:1px solid var(--gray-border); box-shadow:var(--shadow-sm); }
.usp-bar__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.usp-bar__item { display:flex; align-items:center; gap:16px; padding:24px; border-right:1px solid var(--gray-border); }
.usp-bar__item:last-child { border-right:none; }
.usp-bar__icon { color:var(--blue-primary); flex-shrink:0; }
.usp-bar__text { display:flex; flex-direction:column; }
.usp-bar__text strong { font-size:0.95rem; font-weight:700; color:var(--navy); }
.usp-bar__text span { font-size:0.7rem !important; color:var(--navy); }

/* ============================================================
   CATEGORY CARDS (Startseite)
   ============================================================ */
/* Grid – unterstützt beide Klassen */
.category-cards,
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.category-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--navy);
    display: block;
    text-decoration: none;
    border-radius: 4px;
}
/* Hintergrundbild per background-image (inline-style) */
.category-card__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s ease;
}
/* Fallback: img-Tag drin */
.category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.category-card:hover .category-card__image,
.category-card:hover .category-card__image img {
    transform: scale(1.05);
}
/* Dunkler Gradient von unten */
.category-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.05) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px 24px;
    transition: background 0.3s ease;
}
.category-card:hover .category-card__overlay {
    background: linear-gradient(to top, rgba(0,70,130,0.82) 0%, rgba(0,70,130,0.3) 60%, rgba(0,0,0,0.05) 100%);
}
.category-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 6px;
    line-height: 1.2;
}
.category-card__sub {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.82);
    margin: 0 0 14px;
    line-height: 1.5;
}
.category-card__link {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4dc8f0;
    letter-spacing: 0.03em;
    transition: letter-spacing 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.category-card:hover .category-card__link {
    letter-spacing: 0.07em;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 1024px) { .category-cards, .category-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px)  { .category-cards, .category-grid { grid-template-columns: 1fr; } }

/* ============================================================
   INDUSTRIES GRID
   ============================================================ */
.industries-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.industry-card { background:var(--white); border:1px solid var(--gray-border); border-radius:4px; padding:28px; display:flex; flex-direction:column; gap:10px; transition:all var(--trans); text-decoration:none; position:relative; }
.industry-card:hover { box-shadow:var(--shadow-md); border-color:var(--blue-primary); transform:translateY(-2px); }
.industry-card__icon { font-size:2.2rem; }
.industry-card__title { font-size:1.1rem; color:var(--navy); font-weight:700; }
.industry-card__desc { font-size:0.875rem; color:var(--navy); flex:1; }
.industry-card__arrow { color:var(--blue-primary); margin-top:8px; transition:transform var(--trans); }
.industry-card:hover .industry-card__arrow { transform:translateX(4px); }

/* ============================================================
   ABOUT TEASER
   ============================================================ */
.about-teaser { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-teaser__media { position:relative; }
.about-teaser__image-wrap { border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; }
.about-teaser__image-wrap img { width:100%; height:100%; object-fit:cover; }
.about-teaser__badge { position:absolute; bottom:-20px; right:-20px; background:var(--blue-primary); color:var(--white); border-radius:4px; padding:20px 24px; text-align:center; box-shadow:var(--shadow-lg); }
.about-teaser__badge-year { display:block; font-size:2rem; font-weight:800; line-height:1; }
.about-teaser__badge-text { display:block; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.8; }
.about-teaser__content h2 { margin-bottom:20px; }
.about-teaser__list { display:flex; flex-direction:column; gap:10px; margin:20px 0 28px; }
.about-teaser__list li { display:flex; align-items:flex-start; gap:10px; font-size:0.9rem; color:var(--navy); }
.about-teaser__list li .icon { color:var(--blue-primary); flex-shrink:0; margin-top:2px; }

/* ============================================================
   STATS
   ============================================================ */
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
.stat-item { }
.stat-item__value { display:block; font-size:clamp(2rem,4vw,3rem); font-weight:800; color:var(--white); margin-bottom:8px; }
.stat-item__label { font-size:0.9rem; color:rgba(255,255,255,0.75); line-height:1.4; }

/* ============================================================
   PAGE HERO
   ============================================================ */
.page-hero { padding:60px 0; }
.page-hero--navy { background:var(--navy); color:var(--white); }
.page-hero--navy h1 { color:var(--white); }
.page-hero--blue { background:var(--blue-primary); color:var(--white); }
.page-hero--blue h1 { color:var(--white); }
.page-hero--light { background:var(--gray-light); }
.page-hero__sub { font-size:1.1rem; color:rgba(255,255,255,0.8); max-width:600px; margin-top:12px; line-height:1.6; }
.page-hero--light .page-hero__sub { color:var(--navy); }

/* ============================================================
   SUB-NAV CARDS (Unternehmen)
   ============================================================ */
.sub-nav-card { display:flex; align-items:center; gap:24px; background:var(--white); border:1px solid var(--gray-border); border-radius:4px; padding:28px 32px; transition:all var(--trans); color:var(--charcoal); }
.sub-nav-card:hover { box-shadow:var(--shadow-md); border-color:var(--blue-primary); color:var(--charcoal); transform:translateX(4px); }
.sub-nav-card__icon { color:var(--blue-primary); flex-shrink:0; }
.sub-nav-card > div { flex:1; }
.sub-nav-card h3 { font-size:1.1rem; margin-bottom:4px; color:var(--navy); }
.sub-nav-card p { font-size:0.875rem; color:var(--navy); }
.sub-nav-card .icon { color:var(--blue-primary); flex-shrink:0; }

/* ============================================================
   SERVICES GRID
   ============================================================ */
.services-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.service-card { background:var(--white); border:1px solid var(--gray-border); border-radius:4px; padding:28px 24px; display:flex; flex-direction:column; gap:12px; transition:all var(--trans); text-decoration:none; color:var(--charcoal); }
.service-card:hover { box-shadow:var(--shadow-md); border-color:var(--blue-primary); transform:translateY(-3px); }
.service-card__icon { color:var(--blue-primary); }
.service-card__title { font-size:1rem; font-weight:700; color:var(--navy); }
.service-card__desc { font-size:0.875rem; color:var(--navy); flex:1; line-height:1.6; }
.service-card__link { display:flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:700; color:var(--blue-primary); margin-top:auto; }
.service-card:hover .service-card__link .icon { transform:translateX(4px); }

/* ============================================================
   CTA BLOCK
   ============================================================ */
.cta-block { text-align:center; max-width:640px; margin:0 auto; }
.cta-block h2 { margin-bottom:12px; }
.cta-block p { color:var(--navy); margin-bottom:28px; }
.cta-block__actions { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ============================================================
   TEAM CARDS
   ============================================================ */
.team-card { background:var(--white); border:1px solid var(--gray-border); border-radius:4px; overflow:hidden; }
.team-card__photo { aspect-ratio:4/5; background:var(--gray-light); position:relative; overflow:hidden; }
.team-card__photo img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
.team-card:hover .team-card__photo img { transform:scale(1.04); }
.team-card__placeholder { display:flex; align-items:center; justify-content:center; height:100%; }
.team-card__dept { position:absolute; top:12px; left:12px; }
.team-card__info { padding:20px; }
.team-card__name { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:4px; }
.team-card__role { font-size:0.85rem; color:var(--blue-primary); font-weight:600; margin-bottom:12px; }
.team-card__contact { display:flex; align-items:center; gap:6px; font-size:0.82rem; color:var(--navy); margin-top:4px; transition:color var(--trans); }
.team-card__contact:hover { color:var(--blue-primary); }

/* ============================================================
   JOBS
   ============================================================ */
.job-item { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; background:var(--white); border:1px solid var(--gray-border); border-radius:4px; margin-bottom:12px; gap:16px; transition:border-color var(--trans); }
.job-item:hover { border-color:var(--blue-primary); }
.job-item__title { font-size:1rem; font-weight:700; color:var(--navy); margin-bottom:4px; }
.job-item__meta { font-size:0.85rem; color:var(--gray-medium); }
.jobs-empty { text-align:center; padding:40px; background:var(--gray-light); border-radius:4px; }

/* ============================================================
   TIMELINE
   ============================================================ */
.timeline { margin-top:48px; }
.timeline__heading { font-size:1.4rem; margin-bottom:32px; }
.timeline__item { display:grid; grid-template-columns:80px 1fr; gap:24px; margin-bottom:28px; padding-bottom:28px; border-bottom:1px solid var(--gray-border); }
.timeline__item:last-child { border-bottom:none; }
.timeline__year { font-size:1.2rem; font-weight:800; color:var(--blue-primary); }
.timeline__content p { color:var(--navy); }

/* ============================================================
   QUALITY SECTION
   ============================================================ */
.quality-section { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.quality-section__text h2 { margin-bottom:16px; }
.cert-placeholder { display:inline-flex; align-items:center; justify-content:center; width:100px; height:80px; border:1px solid var(--gray-medium); border-radius:4px; font-size:0.75rem; font-weight:700; color:var(--gray-medium); text-align:center; margin:8px; }
.quality-section__certs { display:flex; flex-wrap:wrap; gap:0; padding-top:32px; }

/* ============================================================
   LEGAL PAGE
   ============================================================ */
.legal-page { padding:48px 0 80px; }
.legal-page__header { margin-bottom:40px; padding-bottom:24px; border-bottom:2px solid var(--blue-light); }
.legal-page__title { font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:8px; }
.legal-page__updated { font-size:0.85rem; color:var(--gray-medium); }
.legal-page__content h2 { font-size:1.3rem; margin-top:36px; margin-bottom:12px; color:var(--navy); }
.legal-page__content h3 { font-size:1.05rem; margin-top:24px; margin-bottom:10px; color:var(--navy); }
.legal-page__content p,.legal-page__content li { font-size:0.95rem; line-height:1.8; color:var(--navy); margin-bottom:12px; }
.legal-page__content a { color:var(--blue-primary); }
.legal-page__content ul { list-style:disc; padding-left:24px; margin-bottom:16px; }
.legal-fallback { margin-top:40px; padding-top:40px; border-top:1px solid var(--gray-border); }
.legal-fallback h2 { font-size:1.3rem; margin-bottom:16px; color:var(--navy); margin-top:32px; }
.legal-fallback h3 { font-size:1rem; margin-top:24px; margin-bottom:8px; color:var(--navy); }
.legal-fallback address { font-style:normal; line-height:1.8; color:var(--navy); }

/* ============================================================
   ARCHIVE LAYOUT
   ============================================================ */
.archive-layout { display:grid; grid-template-columns:1fr 280px; gap:48px; }
.archive-sidebar { position:sticky; top:90px; }
.pagination-wrap { margin-top:48px; display:flex; gap:8px; }
.page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 8px; border:1px solid var(--gray-medium); border-radius:2px; color:var(--navy); font-weight:600; font-size:0.9rem; transition:all var(--trans); }
.page-numbers.current,.page-numbers:hover { background:var(--blue-primary); border-color:var(--blue-primary); color:var(--white); }

/* TEXT UTILITIES */
.text-center { text-align:center; }

/* ============================================================
   RESPONSIVE ADDITIONS
   ============================================================ */
@media (max-width:1200px) {
  .category-cards, .category-grid { grid-template-columns:repeat(2,1fr); }
  .services-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px) {
  .usp-bar__grid { grid-template-columns:repeat(2,1fr); }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .industries-grid { grid-template-columns:repeat(2,1fr); }
  .about-teaser { grid-template-columns:1fr; gap:40px; }
  .about-teaser__badge { bottom:-10px; right:20px; }
  .quality-section { grid-template-columns:1fr; }
  .archive-layout { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .category-cards, .category-grid { grid-template-columns:1fr; }
  .industries-grid { grid-template-columns:1fr; }
  .services-grid { grid-template-columns:1fr; }
  .usp-bar__grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
  .hero { min-height:480px; padding-top:70px; }
  .footer-cta__inner { flex-direction:column; }
}

/* Standard-Template: 50px Abstand oben + unten */
.page-template-default .page-content,
body.page:not([class*="page-template-"]) .page-content {
    padding-top: 50px;
    padding-bottom: 50px;
}

/* Breadcrumb Trenner (per JS eingefügt) */
.breadcrumbs .bc-sep {
    color: var(--charcoal, #3a3a3a);
    margin: 0 4px;
    font-weight: 400;
}

/* ============================================================
   SINGLE ARTICLE – Vollbreite + Bulletpoints
   ============================================================ */

/* Volle Breite: kein max-width auf dem Artikel */
body.single .single-article {
    max-width: none !important;
    width: 100%;
}

/* Bulletpoints: globalen ul{list-style:none} Reset überschreiben */
body.single .entry-content ul,
body.single .single-article__body ul {
    list-style: disc !important;
    padding-left: 1.6rem !important;
    margin-bottom: 1.25rem !important;
}
body.single .entry-content ul li,
body.single .single-article__body ul li {
    list-style: disc !important;
    margin-bottom: 0.4rem;
    line-height: 1.7;
}
body.single .entry-content ol,
body.single .single-article__body ol {
    list-style: decimal !important;
    padding-left: 1.6rem !important;
    margin-bottom: 1.25rem !important;
}
body.single .entry-content ol li,
body.single .single-article__body ol li {
    list-style: decimal !important;
    margin-bottom: 0.4rem;
    line-height: 1.7;
}

/* Breadcrumb Separatoren: werden von wst_breadcrumbs() direkt ausgegeben */

/* GTranslate: nur Flagge, kein Text */
.lang-switcher a span { display: none !important; }

/* Footer-Bottom: Copyright-Absatz margin zurücksetzen */
.footer-copyright { margin: 0 !important; padding: 0 !important; line-height: 1.4 !important; }
.footer-bottom__inner { align-items: center !important; }

/* ============================================================
   GLOBALE SCHRIFTGRÖSSEN-NORMALISIERUNG
   p, li, a → einheitlich 1rem (16px)
   Ausnahmen: Header-Nav, Footer-Nav, Footer-Bottom
   ============================================================ */





/* ============================================================
   GLOBALE ÜBERSCHRIFTEN-NORMALISIERUNG
   h1–h4 überall einheitlich – überschreibt alle spezifischeren Regeln
   ============================================================ */
:where(body) h1,
body h1 { font-size: 2rem !important;   line-height: normal !important; }

:where(body) h2,
body h2 { font-size: 1.5rem !important;  line-height: normal !important; }

:where(body) h3,
body h3 { font-size: 1.25rem !important; line-height: normal !important; }

:where(body) h4,
body h4 { font-size: 1rem !important;    line-height: normal !important; }

/* WST-1 USP: Textfarbe bei hellem Hintergrund */
.ws1-usp[style*="color:#2c3e50"] .ws1-usp__h2,
.ws1-usp[style*="color:#2c3e50"] .ws1-usp__item,
.ws1-usp[style*="color:#2c3e50"] .ws1-usp__item strong {
    color: #2c3e50 !important;
    opacity: 1 !important;
}

/* 2-Spalten Text: Bullet-Points */
.two-col-text__text ul {
    list-style: disc !important;
    padding-left: 1.5em !important;
    margin: 0 !important;
}
.two-col-text__text ul li {
    list-style: disc !important;
    display: list-item !important;
}
.two-col-text__text ol {
    list-style: decimal !important;
    padding-left: 1.5em !important;
}

/* ── Wrapper-Reset: kein weißer Streifen vor Footer ── */
html,
body,
#page,
#content,
#main,
.site-main,
.site-footer,
.page-content,
article.hentry,
article.page,
article.post {
    background: transparent !important;
}
.page-content,
article.hentry {
    margin: 0 !important;
    padding: 0 !important;
}
/* ============================================================
   GLOBALE FONT-SIZE NORMALISIERUNG – 1rem überall
   Ausnahme: Navigation (Header + Footer)
   ============================================================ */
body p,
body li,
body a,
body span,
body input,
body select,
body textarea,
body input[type="checkbox"],
body input[type="radio"],
body button,
body label {
    font-size: 1rem !important;
}

/* Ausnahmen Navigation Header */
.topbar *,
.main-nav *,
.mega-menu *,
.mobile-nav *,
.lang-switcher *,
.header__actions *,
.breadcrumbs * {
    font-size: inherit !important;
}

/* Ausnahmen Navigation Footer */
.footer-legal-nav *,
.footer-col__list *,
.footer-col__title,
.footer-contact-item *,
.footer-bottom * {
    font-size: inherit !important;
}
/* Text-Block: Bullet-Points */
.text-block__content ul { list-style: disc !important; padding-left: 1.5em !important; margin: 0 !important; }
.text-block__content ul li { list-style: disc !important; display: list-item !important; }
.text-block__content ol { list-style: decimal !important; padding-left: 1.5em !important; }




/* ── Bilder nie über Originalgröße vergrößern ── */
.section img:not([style*="width:"]):not([class*="full"]),
.ws1-icon-item__img,
.firm-usps__icon img,
.sidebar-recent-thumb img,
.four-images__item img,
.product-card__img img,
.tk-way__image img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
}
/* Überschriften – kein margin/padding */
h1,h2,h3,h4,h5,h6 { margin:0; padding:0; }

/* ============================================================
   GLOBALE FLIESSTEXT-VEREINHEITLICHUNG – 1rem / 16px
   Alle Textblöcke in Sections auf einheitliche Größe
   ============================================================ */
.image-text__body,
.image-text__body p,
.text-block__content,
.text-block__content p,
.two-col-text__text,
.two-col-text__text p,
.tk-way__text,
.tk-way__text p,
.ws1-intro__graybox-txt,
.ws1-intro__graybox-txt p,
.uu-intro,
.uu-intro p,
.uu-body,
.uu-body p,
.section-text,
.section-text p,
.wst-news-grid p,
.single-article__body,
.single-article__body p,
.accordion__content,
.accordion__content p,
.conv-card__text,
.app-card__text,
.check-editor__text,
.check-editor__text p,
.three-cols__text,
.three-cols__text p {
    font-size: 1rem !important;
    line-height: 1.75 !important;
}

/* ============================================================
   ÜBERSCHRIFT → FLIESSTEXT: gestaffelter Abstand
   ============================================================ */
h1 + p, h1 + div, h1 + ul, h1 + ol { margin-top: 40px !important; }
h2 + p, h2 + div, h2 + ul, h2 + ol { margin-top: 30px !important; }
h3 + p, h3 + div, h3 + ul, h3 + ol { margin-top: 20px !important; }
/* h3 in Sections: kein margin-top */
.ws1-icon-item h3,
.tk-way h3,
.three-cols__col h3,
.two-col-text__col h3,
.conv-card h3,
.app-card h3 { margin-top: 0 !important; }
h4 + p, h4 + div, h4 + ul, h4 + ol { margin-top: 10px !important; }
p, div.image-text__body, div.two-col-text__text,
div.text-block__content, div.tk-way__text,
div.ss-txt-body, div.three-cols__text {
    margin-top: 0 !important;
}
/* Nach H1/H2/H3/H4: gestaffelter Abstand – höhere Spezifität */
h1 + div.text-block__content { margin-top: 40px !important; }
h2 + div.text-block__content { margin-top: 30px !important; }
h3 + div.text-block__content { margin-top: 20px !important; }
h4 + div.text-block__content { margin-top: 10px !important; }
/* Erster <p> in Textcontainern: kein Browser-Default margin-top */
div.image-text__body p:first-child,
div.two-col-text__text p:first-child,
div.text-block__content p:first-child,
div.tk-way__text p:first-child,
div.ss-txt-body p:first-child,
div.three-cols__text p:first-child {
    margin-top: 0 !important;
}
/* Bullet-Point Abstand: exakt 20px zwischen li, kein extra ul-Margin */
.image-text__body ul, .image-text__body ol,
.two-col-text__text ul, .two-col-text__text ol,
.text-block__content ul, .text-block__content ol,
.tk-way__text ul, .tk-way__text ol,
.ss-txt-body ul, .ss-txt-body ol,
.three-cols__text ul, .three-cols__text ol {
    margin: 0 !important;
    padding-left: 1.5em !important;
}
.image-text__body li,
.two-col-text__text li,
.text-block__content li,
.tk-way__text li,
.ss-txt-body li,
.three-cols__text li,
.accordion__content li,
.single-article__body li {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}
.image-text__body li:last-child,
.two-col-text__text li:last-child,
.text-block__content li:last-child,
.tk-way__text li:last-child,
.ss-txt-body li:last-child,
.three-cols__text li:last-child,
.accordion__content li:last-child,
.single-article__body li:last-child { margin-bottom: 0 !important; }
/* p in li: kein eigener Margin */
.image-text__body li p,
.two-col-text__text li p,
.text-block__content li p,
.tk-way__text li p,
.three-cols__text li p,
.accordion__content li p,
.single-article__body li p { margin: 0 !important; }
/* <br> in ul/ol verstecken (TinyMCE fügt sie ein) */
.image-text__body ul br, .image-text__body ol br,
.two-col-text__text ul br, .two-col-text__text ol br,
.text-block__content ul br, .text-block__content ol br,
.tk-way__text ul br, .tk-way__text ol br,
.three-cols__text ul br, .three-cols__text ol br,
.accordion__content ul br, .accordion__content ol br,
.single-article__body ul br, .single-article__body ol br { display: none !important; }

/* image-text: Abstand exakt 30px nach Heading, 0 sonst */
.image-text__text-col .image-text__body { margin-top: 0 !important; }
.image-text__text-col .image-text__heading + .image-text__body { margin-top: 30px !important; }

/* TPG Widget-Überschrift + Trennlinie ausblenden */
.tpg-widget-heading-wrapper { display: none !important; }