/* =============================================================
   SPOHN KUNSTSTOFFE CSS
   Multimedia Service Buchmann GmbH · www.MSBu.de 
   ============================================================ */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type="button"],[type="reset"],[type="submit"],button{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/barlow-condensed-v13-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-condensed-v13-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/barlow-condensed-v13-latin-700.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/barlow-condensed-v13-latin-800.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/inter-v20-latin-300.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dm-mono-v16-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/dm-mono-v16-latin-500.woff2') format('woff2');
}
/* 1. CUSTOM PROPERTIES
------------------------------------------------------------- */

:root {
  --spohn-blau:        rgb(2, 45, 241);
  --spohn-blau-hell:   rgb(232, 236, 254);
  --karte-hg:          rgb(1, 37, 195);
  --spohn-blau-mittel: rgb(195, 210, 253);
  --kobaltblau:   rgb(2, 45, 241);
  --royalblau:    rgb(20, 80, 200);
  --dunkelblau:   rgb(14, 89, 156);
  --stahlblau:    rgb(40, 100, 170);
  --marineblau:   rgb(8, 50, 110);
  --indigo:       rgb(58, 48, 140);
  --petrol:       rgb(10, 80, 95);
  --schiefer:     rgb(60, 70, 85);
  --taubenblau:   rgb(90, 110, 150);
  --mitternacht:  rgb(15, 25, 70);
  --tuerkis:         rgb(0, 160, 160);
  --tuerkis-dunkel:  rgb(0, 120, 125);
  --tuerkis-tief:    rgb(0, 90, 100);
  --meergruen:       rgb(10, 140, 130);
  --jade:            rgb(0, 110, 105);
  --cyan-dunkel:     rgb(15, 100, 140);
  --tinten:   rgb(12, 13, 16);
  --tinten-2: rgb(60, 62, 71);
  --tinten-3: rgb(122, 124, 135);
  --weiss:    rgb(255, 255, 255);
  --hell:     rgb(248, 248, 246);
  --hell-2:   rgb(242, 242, 240);
  --hell-3:   rgb(235, 234, 230);
  --linie:    rgb(224, 223, 219);
  --linie-2:  rgb(204, 203, 199);
  --schrift-kond: 'Barlow Condensed', sans-serif;
  --schrift-text: 'Inter', sans-serif;
  --schrift-mono: 'DM Mono', monospace;
}
html { overflow-x: clip; }
body { overflow-x: clip; position: relative; }

/* 2. RESET
------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  overflow-x: hidden;
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
  font-family: var(--schrift-text);
  font-size: 18px;
  line-height: 1.7;
  color: var(--tinten);
  background: var(--hell);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }
[class*="kuerzel"], [class*="-num"], code, pre,
.sr-num, .piolen-kuerzel, .ft-label, .sektion-label,
address, .schrift-mono, .chip,
[style*="font-family: var(--schrift-mono)"] {
  hyphens: none;
  overflow-wrap: normal;
}

/* 3. LAYOUT
------------------------------------------------------------- */
.inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 1rem + 3vw, 3.5rem); }
.pad { padding-top: 4.5rem; padding-bottom: 4.5rem; }
.pad-t { padding-top: 4.5rem; }
.reveal { opacity: 0; transition: opacity 0.6s ease; }
.reveal.sichtbar { opacity: 1; }
.reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal-right.sichtbar { opacity: 1; transform: none; }

/* 4. HEADER / NAV
------------------------------------------------------------- */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  display: flex;
  align-items: center;
  overflow: visible;
}

:root { --header-h: 72px; }
body { padding-top: var(--header-h); }

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

#nav-toggle { display: none; }

#nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--tinten);
  transition: all 0.25s;
}
#nav-toggle:checked ~ #nav-hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-toggle:checked ~ #nav-hamburger span:nth-child(2) { opacity: 0; }
#nav-toggle:checked ~ #nav-hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sub-toggle { display: none; }
.subnav { display: none; list-style: none; margin: 0; padding: 0; }
header nav a { text-decoration: none; transition: color 0.2s; }
.btn-anfrage {
  background: var(--spohn-blau);
  color: var(--weiss);
  border: none;
  cursor: pointer;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
}
.btn-anfrage:hover { opacity: 0.88; }

.btn-anfrage .icon { display: flex; }
.btn-anfrage .kurz { display: none; }
.btn-anfrage .lang { display: none; }

@media (min-width: 600px) {
  .btn-anfrage { padding: 10px 18px; }
  .btn-anfrage .icon { display: none; }
  .btn-anfrage .kurz { display: inline; }
}

@media (min-width: 1280px) {
  .btn-anfrage { padding: 10px 14px; }
  .btn-anfrage .lang { display: inline; }
}

.sprache {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--tinten-3);
  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;
}
.sprache:hover { color: var(--tinten-2); }
.sprache.aktiv { color: var(--spohn-blau); }

.nav-suche-icon {
  display: none;
  align-items: center;
  background: none;
  border: none;
  color: var(--tinten-2);
  padding: 4px;
  cursor: pointer;
  transition: color 0.2s;
}
.nav-suche-icon:hover { color: var(--spohn-blau); }

.nav-rechts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

@media (max-width: 1023px) {

  header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    min-height: 72px;
  }

  header .logo { flex-shrink: 0; margin-right: 12px; }
  header .logo img { height: 44px; width: auto; }
  .nav-rechts {
    margin-left: auto;
    margin-right: 60px;
    gap: 8px;
  }
  .nav-suche-icon { display: flex; }
  .sprache { display: inline; }
  #nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 400;
    background: var(--weiss);
    flex-shrink: 0;
  }
  header nav {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw;
    height: 100vh;
    background: var(--weiss);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 350;
    padding: 140px 0 80px;
  }

  #nav-toggle:checked ~ nav { display: block; }
  header nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  header nav > ul > li > a {
    display: block;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tinten-2);
    border-bottom: 1px solid var(--linie);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  header nav > ul > li > a {
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
  }
  header nav > ul > li > a:hover { border-bottom-color: var(--linie-2); }
  header nav > ul > li > a.aktiv { border-bottom-color: var(--spohn-blau); }

  header nav > ul > li > a.aktiv {
    color: var(--spohn-blau);
    font-weight: 700;
    padding-left: 36px;
    position: relative;
  }
  header nav > ul > li > a.aktiv::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--spohn-blau);
  }
  .has-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-bottom: 1px solid var(--linie);
  }
  .has-sub > a {
    flex: 0 0 auto;
    border-bottom: none;
    padding: 16px 24px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tinten-2);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .has-sub > a:hover,
  .has-sub > a.aktiv { color: var(--spohn-blau); }

  .sub-toggle {
    display: flex;
    align-items: center;
    padding: 0 12px;
    height: auto;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--tinten-3);
    font-size: 1.1rem;
    transition: transform 0.25s;
    user-select: none;
  }
  .sub-toggle::after { content: '→'; font-family: var(--schrift-mono); }
  #sub-prod:checked ~ .sub-toggle { transform: rotate(90deg); }
  #sub-app:checked  ~ .sub-toggle { transform: rotate(90deg); }

  .has-sub .subnav {
    width: 100%;
    background: var(--hell-2);
    border-top: 1px solid var(--linie);
  }
  #sub-prod:checked ~ .subnav { display: block; }
  #sub-app:checked  ~ .subnav { display: block; }

  .has-sub .subnav li a {
    display: block;
    padding: 13px 24px 13px 40px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--tinten-2);
    border-bottom: 1px solid var(--linie);
  }
  .has-sub .subnav li:last-child a { border-bottom: none; }
  .has-sub .subnav li a:hover  { color: var(--tinten); }
  .has-sub .subnav li a.aktiv  { color: var(--spohn-blau); }
  header nav::after {
    content: '';
    display: block;
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 130px;
    height: 30px;
    background: url('../images/logo-spohn-kunststoffe.png') right bottom / contain no-repeat;
    opacity: 1;
    pointer-events: none;
  }

  .has-sub .subnav { display: none; }
  #sub-prod:checked ~ .subnav,
  #sub-app:checked  ~ .subnav { display: block; }
  body.hat-unternav .has-sub:has(> a.aktiv) .subnav { display: block; }
  body.hat-unternav .has-sub:has(> a.aktiv) .sub-toggle { transform: rotate(90deg); }
}

/* ── BLOCK A: Hamburger (max-width: 1023px) — bereits oben ── */

/* ── BLOCK B: Desktop mit Maus (min-width: 1024px, hover: hover) ── */
@media (min-width: 1024px) {

  :root { --header-h: 72px; }

  header {
    display: flex;
    align-items: center;
    padding: 0 clamp(20px, 2.75vw, 48px);
    min-height: 72px;
  }
  header .logo { flex-shrink: 0; margin-right: clamp(1rem, 2vw, 2rem); }
  header .logo img { height: 44px; width: auto; }
  #nav-hamburger { display: none; }
  .sub-toggle { display: none; }

  header nav {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
  }
  header nav > ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0; padding: 0;
    flex: 1; min-width: 0;
  }
  header nav > ul > li { flex-shrink: 0; }
  header nav > ul > li > a {
    display: block;
    padding: 0 clamp(8px, 1.2vw, 16px);
    line-height: var(--header-h);
    font-size: clamp(13px, 1.3vw, 16px);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tinten-2);
    white-space: nowrap;
    position: relative;
  }
  header nav > ul > li > a {
    position: relative;
    transition: color 0.2s;
  }
  header nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 14px;
    left: clamp(8px, 1.2vw, 16px);
    right: clamp(8px, 1.2vw, 16px);
    height: 2px;
    background: transparent;
    transition: background 0.2s;
  }
  header nav > ul > li > a.aktiv::after { background: transparent; }
  header nav > ul > li > a.aktiv {
    color: var(--tinten);
    font-weight: 600;
  }
  header nav > ul > li > a.aktiv::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: 8px; height: 8px;
    background: var(--spohn-blau);
  }
  .nav-rechts { gap: 12px; flex-shrink: 0; }
  .nav-suche-icon { display: flex; }
}

/* ── BLOCK B2: Flyout — nur mit Maus ── */
@media (min-width: 1024px) and (hover: hover) {
  header nav > ul > li > a:hover { color: var(--tinten); }
  header nav > ul > li > a:hover::after { background: var(--spohn-blau); }
  .has-sub .subnav {
    display: flex;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--hell-2);
    border-bottom: 1px solid var(--linie);
    z-index: 190;
    padding: 0 clamp(20px, 2.75vw, 48px);
    align-items: stretch;
    min-height: 52px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 2s;
    pointer-events: none;
  }
  .has-sub:hover .subnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
    pointer-events: auto;
  }
  .has-sub .subnav:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 2s;
    pointer-events: auto;
  }
  .has-sub:hover .subnav li a,
  body.hat-unternav .has-sub:has(> a.aktiv) .subnav li a {
    display: flex; align-items: center;
    padding: 0 1rem; height: 52px;
    font-size: 1rem; font-weight: 400; color: var(--tinten-2);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    text-transform: none; letter-spacing: 0;
  }
  .has-sub:hover .subnav li a:hover { color: var(--tinten); border-bottom-color: var(--tinten); }
  .has-sub:hover .subnav li a.aktiv { color: var(--spohn-blau); border-bottom-color: var(--spohn-blau); }
}

/* ── BLOCK C: Großes Touch-Gerät (min-width: 1024px, hover: none) ── */
@media (min-width: 1024px) and (hover: none) {
  .has-sub .subnav {
    display: flex;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--hell-2);
    border-bottom: 1px solid var(--linie);
    z-index: 190;
    padding: 0 clamp(20px, 2.75vw, 48px);
    align-items: stretch;
    min-height: 52px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .has-sub:has(> a.aktiv) .subnav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .has-sub .subnav li a {
    display: flex; align-items: center;
    padding: 0 1rem; height: 52px;
    font-size: 1rem; font-weight: 400; color: var(--tinten-2);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    text-transform: none; letter-spacing: 0;
  }
  .has-sub .subnav li a.aktiv { color: var(--spohn-blau); border-bottom-color: var(--spohn-blau); }
}

@media (min-width: 1280px) {
  :root { --header-h: 88px; }
  header .logo img { height: 70px; width: auto; }
  header { min-height: 88px; }
}

/* 5. UNTERNAVIGATION
------------------------------------------------------------- */
@media (min-width: 1024px) {
  /*  */
  body { padding-top: calc(var(--header-h) + 52px); background-color:#fff; }
}

@media (min-width: 1024px) and (hover: hover) {
  body.hat-unternav .has-sub:has(> a.aktiv) .subnav {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    transition: none !important;
    top: var(--header-h) !important;
    z-index: 150;
    border-top: none;
    padding: 0 clamp(20px, 2.75vw, 48px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.hat-unternav header { border-bottom: none; }
  body.hat-unternav .has-sub:has(> a.aktiv) .subnav::-webkit-scrollbar { display: none; }
  body.hat-unternav .has-sub:has(> a.aktiv) .subnav li a:hover {
    color: var(--tinten);
    border-bottom-color: var(--tinten);
  }
  body.hat-unternav .has-sub:has(> a.aktiv) .subnav li a.aktiv {
    color: var(--spohn-blau);
    border-bottom-color: var(--spohn-blau);
  }
  .piolen-seite .has-sub:has(> a.aktiv) .subnav li a.aktiv {
    color: var(--tuerkis-dunkel);
    border-bottom-color: var(--tuerkis-dunkel);
  }
  body.hat-unternav .has-sub:not(:has(> a.aktiv)):hover .subnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
  }
  body.hat-unternav .has-sub:not(:has(> a.aktiv)) .subnav:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 2s;
  }
}

/* 5b. HERO
------------------------------------------------------------- */
.hero { display: flex; flex-direction: column; }

.hero-text-bereich {
  padding: 56px 48px 48px;
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  font-family: var(--schrift-mono);
  font-size: 12px;
  color: var(--spohn-blau);
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--spohn-blau); flex-shrink: 0; }

h1 {
  font-family: var(--schrift-kond);
  font-size: clamp(48px, 5.5vw, 76px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 0.93;
  color: var(--tinten);
  margin-bottom: 20px;
}
h1 em { color: var(--spohn-blau); font-style: normal; }

.hero-untertitel {
	font-family: var(--schrift-mono);
	font-size: 14px;
	color: var(--tinten-3);
	letter-spacing: 1.5px;
	margin-bottom: 20px;
	line-height: 1.7;
}

.hero-beschreibung {
  font-size: 18px;
  color: var(--tinten-2);
  line-height: 1.75;
  max-width: 580px;
}

.hero-media {
  position: relative;
  overflow: hidden;
  background: var(--tinten);
  aspect-ratio: 16 / 7;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.slider-spur { display: flex; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.slider-folie { min-width: 100%; height: 100%; }
.slider-folie img { width: 100%; height: 100%; object-fit: cover; }

.slider-punkte {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.slider-punkt {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none; padding: 0;
  cursor: pointer;
  transition: background 0.3s;
}
.slider-punkt.aktiv { background: var(--weiss); }

.slider-pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(12,13,16,0.4);
  border: none;
  color: var(--weiss);
  font-size: 20px;
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s;
}
.slider-pfeil:hover { background: rgba(12,13,16,0.7); }
.slider-pfeil-links { left: 16px; }
.slider-pfeil-rechts { right: 16px; }
@media (min-width: 1024px) and (orientation: landscape) {
  .hero { position: relative; min-height: 80vh; }
  .hero-text-bereich {
    position: absolute;
    bottom: 2rem; left: 2rem;
    width: 46%; max-width: 600px;
    padding: 28px 36px 32px;
    background: rgba(248,248,246,0.75);
    border-right: 1px solid var(--linie);
    border-top: 1px solid rgba(224,223,219,0.5);
    border-bottom: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 1.2s ease, background 1.2s ease;
  }
  .hero-text-bereich.hero-verblasst {
    opacity: 0.12;
    background: rgba(248,248,246,0.3);
  }
  .hero-text-bereich:hover,
  .hero-text-bereich.hero-verblasst:hover {
    opacity: 1;
    background: rgba(248,248,246,0.75);
    transition: opacity 0.3s ease, background 0.3s ease;
  }
  .hero-text-bereich::after {
    content: '◁';
    position: absolute;
    right: -32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: rgba(255,255,255,0.7);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .hero-text-bereich.hero-verblasst::after {
    opacity: 1;
  }
  .hero-text-bereich h1 { font-size: clamp(42px, 4.9vw, 68px); }
  .hero-text-bereich .hero-beschreibung { font-size: 16px; }
  .hero-media {
    position: absolute;
    inset: 0;
    aspect-ratio: unset;
    height: 100%;
    width: 100%;
  }
}

/* 6. SUCHFELD
   vorhanden sind und diese größer als Viewport-Höhe sind
------------------------------------------------------------- */
.suchbereich-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 600px) {
  .suchbereich-inner { padding: 0 1.5rem; }
}

.suchbereich {
  background: var(--spohn-blau);
  padding: 1.75rem 0 1.5rem;
  z-index: 100;
}
@media (min-width: 600px) {
  .suchbereich { padding: 2rem 0 1.75rem; }
}
.suchbereich.such-unten { padding-top: 2rem; }

.such-ergebnisse-wrap {
  background: var(--spohn-blau);
  padding: 0 1.5rem 2rem;
}
.such-ergebnisse-wrap .overlay-ergebnisse {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  padding: 0;
  background: var(--spohn-blau);
}

.suchfeld-wrap {
  display: flex;
  max-width: 860px;
  margin: 0 auto;
  background: var(--weiss);
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.suchfeld-wrap:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,0.4); }

.suchfeld-wrap input {
  flex: 1;
  border: none;
  outline: none;
  padding: 16px 14px;
  font-family: var(--schrift-mono);
  font-size: 1rem;
  color: var(--tinten);
  background: transparent;
  caret-color: var(--spohn-blau);
  min-width: 0;
}
.suchfeld-wrap input::placeholder { color: var(--tinten-3); }

.suchfeld-wrap button {
  background: var(--tinten);
  border: none;
  padding: 0 1rem;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--weiss);
  white-space: nowrap;
  transition: opacity 0.2s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.suchfeld-wrap button:hover { opacity: 0.85; }
.suchfeld-wrap button .such-icon { display: flex; }
.suchfeld-wrap button .such-txt  { display: none; }
@media (min-width: 600px) {
  .suchfeld-wrap button { padding: 0 1.5rem; }
  .suchfeld-wrap button .such-icon { display: none; }
  .suchfeld-wrap button .such-txt  { display: inline; }
}

.such-chips {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding: 12px 0 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
}
.such-chips::-webkit-scrollbar { display: none; }

.suchfeld-wrap + .such-chips { padding-top: 8px; }
.suchbereich-inner { position: relative; }
.suchbereich-inner::before,
.suchbereich-inner::after {
  content: '';
  position: absolute;
  top: auto;
  bottom: 0;
  width: 40px;
  height: 36px;
  z-index: 2;
  pointer-events: none;
}
.suchbereich-inner::before {
  left: 1rem;
  background: linear-gradient(to right, var(--spohn-blau), transparent);
}
.suchbereich-inner::after {
  right: 1rem;
  background: linear-gradient(to left, var(--spohn-blau), transparent);
}
@media (min-width: 600px) {
  .suchbereich-inner::before { left: 1.5rem; }
  .suchbereich-inner::after { right: 1.5rem; }
}
@media (min-width: 1024px) {
  .suchbereich-inner::before,
  .suchbereich-inner::after { display: none; }
  .such-chips {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .chip { flex-shrink: 1; }
}

.chip {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.75);
  background: none;
  transition: all 0.18s;
}
.chip:hover { border-color: var(--weiss); color: var(--weiss); background: rgba(255,255,255,0.12); }

/* 7. TYPO
------------------------------------------------------------- */
.sektion-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--spohn-blau);
  margin-bottom: 16px;
}
.label-quadrat {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--spohn-blau);
  flex-shrink: 0;
}

h2 {
  font-family: var(--schrift-kond);
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 0.93;
  color: var(--tinten);
  margin-bottom: 36px;
}
h2 em { color: var(--spohn-blau); font-style: normal; }

h3 {
  font-family: var(--schrift-kond);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--tinten);
}

/* 8. LEISTUNGEN
------------------------------------------------------------- */
.leistungen { background: var(--weiss); }

.leistungen-kopf {
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 1rem + 3vw, 3.5rem) 0;
  max-width: 1280px;
  margin: 0 auto;
}
.leistungen { padding-top: clamp(2.5rem, 5vw, 4rem); }
.leistungen + .leistungen { border-top: none; }

.service-reihen {
  border-top: 1px solid var(--linie);
  margin-top: 2rem;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(1.25rem, 1rem + 3vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}

.service-zeile {
  display: block;
  padding: 2rem 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.service-zeile:last-child { border-bottom: 1px solid var(--linie); }
.service-zeile:hover { background: var(--spohn-blau-hell); }

.sr-links { margin-bottom: 10px; }

.sr-num {
  display: block;
  font-family: var(--schrift-mono);
  font-size: 40px;
  font-weight: 500;
  color: var(--spohn-blau);
  line-height: 1;
  opacity: 0.35;
  margin-bottom: 6px;
}

.sr-titel h3 {
  font-family: var(--schrift-kond);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--tinten);
  margin-top: 4px;
}

.sr-text {
  font-size: 1rem;
  color: var(--tinten-2);
  line-height: 1.65;
  margin-bottom: 0.75rem;
  text-decoration: none;
}

.sr-pfeil {
  display: inline-block;
  font-family: var(--schrift-mono);
  font-size: 1rem;
  letter-spacing: 0.5px;
  color: var(--tinten-3);
  white-space: nowrap;
  transition: color 0.2s;
  margin-top: 1rem;
  text-align: left;
}
.service-zeile:hover .sr-pfeil { color: var(--spohn-blau); }

.job-liste {
  border-top: 1px solid var(--linie);
  margin-top: 2rem;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 clamp(1.25rem, 1rem + 3vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}

.job-karte {
  display: block;
  padding: 2rem 0;
  border-bottom: 1px solid var(--linie);
}

.job-links { margin-bottom: 10px; }
.job-links .sr-num {
  display: block;
  flex: none;
  text-align: left;
  font-family: var(--schrift-mono);
  font-size: 40px;
  font-weight: 500;
  color: var(--spohn-blau);
  line-height: 1;
  opacity: 0.6;
  margin-bottom: 14px;
}
.job-links h3 {
  font-family: var(--schrift-kond);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--tinten);
  margin: 4px 0 0;
}

.job-rechts { max-width: 680px; }

.job-vorschau,
.job-rest {
  font-size: 1rem;
  color: var(--tinten-2);
  line-height: 1.65;
}
.job-vorschau p,
.job-rest p { margin: 0 0 0.75rem; }
.job-rest h4 {
  font-family: var(--schrift-kond);
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tinten);
  margin: 1.5rem 0 0.5rem;
}
.job-rest ul {
  margin: 0 0 0.75rem;
  padding-left: 0;
  list-style: none;
}
.job-rest li {
  margin-bottom: 0.4rem;
  padding-left: 20px;
  position: relative;
}
.job-rest li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background: var(--spohn-blau);
  opacity: 0.45;
}

.job-mehr {
  display: block;
  margin-top: 0.75rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--schrift-mono);
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--spohn-blau);
}
.job-mehr:hover { text-decoration: underline; }

.job-bewerben {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--schrift-mono);
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--spohn-blau);
  text-decoration: none;
}
.job-bewerben:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .job-karte { padding: 2.5rem 0; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .job-karte {
    display: flex;
    gap: 0;
    align-items: flex-start;
  }
  .job-links {
    flex: 0 0 38%;
    margin-bottom: 0;
    padding-right: 24px;
    border-right: 1px solid var(--linie);
  }
  .job-rechts {
    flex: 1;
    padding-left: 24px;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .job-karte {
    display: flex;
    align-items: flex-start;
  }
  .job-links {
    flex: 0 0 300px;
    margin-bottom: 0;
    padding-right: 24px;
    border-right: 1px solid var(--linie);
  }
  .job-rechts {
    flex: 1;
    padding-left: 28px;
    max-width: 680px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .service-zeile {
    display: flex;
    gap: 0;
    padding: 2rem 0;
    align-items: flex-start;
  }
  .sr-links {
    flex: 0 0 38%;
    margin-bottom: 0;
    padding-right: 24px;
    border-right: 1px solid var(--linie);
  }
  .sr-num { text-align: left; }
  .sr-rechts {
    flex: 0 0 62%;
    padding-left: 24px;
  }
  .sr-text { margin-bottom: 12px; }
}

@media (min-width: 1024px) {
  .service-reihen {
    display: block;
  }
  .service-zeile {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    min-height: 88px;
    padding: 0;
    border-bottom: 1px solid var(--linie);
  }

  .sr-links {
    display: flex;
    align-items: center;
    flex: 0 0 300px;
    min-width: 0;
    padding: 24px 0;
    margin-bottom: 0;
    position: relative;
  }
  .sr-links::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 80%;
    background: var(--linie);
  }
  .sr-rechts {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    padding: 0;
  }

  .sr-num {
    display: block;
    flex: 0 0 80px;
    font-size: 40px;
    padding: 0 16px 0 0;
    margin-bottom: 0;
    text-align: right;
    opacity: 0.35;
  }
  .sr-titel {
    flex: 1;
    padding: 0 20px;
  }
  .sr-titel h3 {
    margin-top: 0;
  }
  .sr-text {
    flex: 1;
    padding: 24px 28px;
    margin-bottom: 0;
    position: relative;
  }
  .sr-text::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 80%;
    background: var(--linie);
  }
  .sr-pfeil {
	display: block;
	flex: 0 0 auto;
	padding: 0 28px;
	font-size: 14px;
	letter-spacing: 1px;
	margin-top: 0;
	color: var(--tinten-3);
	white-space: nowrap;
  }
  .service-zeile:hover .sr-pfeil { color: var(--spohn-blau); }
}

/* 9. KACHELN
------------------------------------------------------------- */
.kacheln-bereich { padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 1rem + 3vw, 3.5rem); max-width: 1280px; margin: 0 auto; }

.kacheln-reihe {
  display: flex;
  flex-wrap: wrap;
  margin: -3px;
}

.kachel {
  width: 100%;
  flex: none;
  border: 3px solid var(--weiss);
  aspect-ratio: 1;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(3rem, 8vw, 4rem) 1.75rem 1.75rem;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.2s;
  position: relative;
  overflow: hidden;
}

@media (max-width: 599px) {
  .kachel { aspect-ratio: unset; }
}

@media (min-width: 600px) {
  .kachel { width: 50%; aspect-ratio: 1; padding-bottom: 1.75rem; }
}
@media (min-width: 1024px) {
  .kachel { width: 33.333%; }
}
@media (min-width: 1280px) {
  .kachel { width: 25%; }
  .kacheln-reihe:not(:has(> .kachel:nth-child(4))) .kachel,
  .kacheln-reihe-wrap:not(:has(> .kachel:nth-child(4))) .kachel { width: 33.333%; }
}
.kachel:hover { filter: brightness(1.15);   color: inherit;
}

.k-quadrat {
  width: 30px; height: 30px;
  background: rgba(255,255,255,0.5);
  position: absolute;
  top: 20px; left: 20px;
}

.kachel h4 {
  font-family: var(--schrift-kond);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--weiss);
  letter-spacing: 0.3px;
  line-height: 1.15;
  margin-bottom: 8px;
}
@media (min-width: 600px) {
  .kachel h4 { min-height: calc(2 * 1.15 * 24px); }
  .kachel p  { min-height: calc(3 * 1.5 * 1rem); }
}
.kachel p { font-size: 1rem; color: rgba(255,255,255,0.72); line-height: 1.5; margin-bottom: 1rem; }
.kachel-link {
  font-size: 0;
  color: rgba(255,255,255,0.8);
  position: absolute;
  bottom: clamp(1rem, 3%, 1.75rem);
  right: clamp(1rem, 3%, 1.75rem);
}
.kachel-link::after {
  content: '→';
  font-family: var(--schrift-mono);
  font-size: 1.25rem;
  transition: transform 0.2s;
}
.kachel:hover .kachel-link::after { transform: translateX(4px); }

.kachel-kobaltblau  { background: var(--kobaltblau); }
.kachel-royalblau   { background: var(--royalblau); }
.kachel-dunkelblau  { background: var(--dunkelblau); }
.kachel-stahlblau   { background: var(--stahlblau); }
.kachel-marineblau  { background: var(--marineblau); }
.kachel-indigo      { background: var(--indigo); }
.kachel-petrol      { background: var(--petrol); }
.kachel-schiefer    { background: var(--schiefer); }
.kachel-taubenblau  { background: var(--taubenblau); }
.kachel-mitternacht { background: var(--mitternacht); }
.kachel-tuerkis        { background: var(--tuerkis); }
.kachel-tuerkis-dunkel { background: var(--tuerkis-dunkel); }
.kachel-tuerkis-tief   { background: var(--tuerkis-tief); }
.kachel-meergruen      { background: var(--meergruen); }
.kachel-jade           { background: var(--jade); }
.kachel-cyan-dunkel    { background: var(--cyan-dunkel); }

/* 10. NACHHALTIGKEIT
------------------------------------------------------------- */
.nachhaltigkeit {
  background: var(--spohn-blau-hell);
  border-top: 1px solid var(--spohn-blau-mittel);
}

.nach-flex { display: flex; align-items: flex-start; max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 1rem + 3vw, 3.5rem); }
.nach-rechts { margin-left: 4.5rem; }
.nach-links { flex: 3; }
.nach-rechts { flex: 2; }

.nach-label {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--schrift-mono);
	font-size: 14px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--spohn-blau);
	margin-bottom: 16px;
}
.nach-label-quadrat { display: inline-block; width: 10px; height: 10px; background: var(--spohn-blau); flex-shrink: 0; }

.nach-text { font-size: 18px; color: var(--tinten-2); line-height: 1.75; margin-bottom: 28px; }

.btn-nach {
	font-family: var(--schrift-mono);
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	background: var(--spohn-blau);
	color: var(--weiss);
	border: none;
	padding: 13px 26px;
	transition: opacity 0.2s;
}
.btn-nach:hover { opacity: 0.88; }

.nach-items { padding-top: 3.625rem; }

.nach-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--weiss);
  border: 1px solid var(--spohn-blau-mittel);
  padding: 18px 22px;
  cursor: pointer;
  transition: all 0.2s;
}
.nach-item:hover { border-color: var(--spohn-blau); background: rgba(2,45,241,0.03); }
.nach-item-quadrat { width: 10px; height: 10px; background: var(--spohn-blau); flex-shrink: 0; }
.nach-item h4 { font-family: var(--schrift-kond); font-size: 19px; font-weight: 700; text-transform: uppercase; color: var(--tinten); letter-spacing: 0.3px; margin: 0; }
.nach-item p {
	font-size: 16px;
	color: var(--tinten-3);
	line-height: 1.4;
	margin: 0;
}
.nach-pfeil { margin-left: auto; font-family: var(--schrift-mono); font-size: 14px; color: var(--spohn-blau); }

/* 11. FOOTER
------------------------------------------------------------- */
footer {
  background: var(--hell-2);
  border-top: 1px solid var(--linie);
  padding: 3rem clamp(1.25rem, 1rem + 3vw, 3.5rem) 0;
}

.ft-logo {
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--linie);
}
.ft-logo img { height: 48px; width: auto; }

.ft-mitte {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.ft-label {
  font-family: var(--schrift-mono);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--tinten-3);
  margin-bottom: 1rem;
}

.ft-nav {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.ft-nav a {
  font-size: 1rem;
  color: var(--tinten-2);
  text-decoration: none;
  transition: color 0.2s;
  line-height: 1.4;
}
.ft-nav a:hover { color: var(--tinten); }
.ft-nav a.hervor { color: var(--spohn-blau); font-weight: 500; }
.ft-nav a[href$=".pdf"]::before { content: '→ '; font-family: var(--schrift-mono); }
.ft-nav a[href$=".pdf"]::after {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 0.85em;
  margin-left: 0.35em;
  vertical-align: -0.05em;
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  border-radius: 0;
  clip-path: polygon(0 0, 65% 0, 100% 35%, 100% 100%, 0 100%);
  background:
    linear-gradient(135deg, transparent 33%, currentColor 33%, currentColor 66%, transparent 66%) top right / 35% 35% no-repeat;
  opacity: 0.7;
}
.ft-nav a:not([href$=".pdf"])::before { content: '→ '; font-family: var(--schrift-mono); }
.ft-nav a[href$=".pdf"]::before { content: ''; }

address {
  font-style: normal;
  font-family: var(--schrift-mono);
  font-size: 1rem;
  color: var(--tinten-2);
  line-height: 2.1;
}
address a { color: var(--tinten-2); text-decoration: none; }
address a:hover { color: var(--spohn-blau); }

.ft-unten {
  margin-top: 2.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--linie);
}
.ft-msbu { font-size: 0.8rem; color: var(--tinten-3); }
.ft-msbu a { color: var(--tinten-3); text-decoration: none; }
.ft-msbu a:hover { color: var(--tinten-2); }

@media (min-width: 600px) {
  .ft-mitte {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "anschrift downloads"
      "kontakt   mehr";
    column-gap: 0;
    row-gap: 2rem;
  }
  .ft-anschrift  { grid-area: anschrift; padding-right: 2rem; border-right: 1px solid var(--linie); }
  .ft-kontakt    { grid-area: kontakt;   padding-right: 2rem; border-right: 1px solid var(--linie); }
  .ft-downloads  { grid-area: downloads; padding-left: 2rem; }
  .ft-mehr       { grid-area: mehr;      padding-left: 2rem; }
}

@media (min-width: 1024px) {
  .ft-mitte {
    grid-template-columns: 2.5fr 1.4fr 1fr;
    grid-template-areas:
      "anschrift downloads mehr"
      "kontakt   downloads mehr";
    row-gap: 2rem;
  }
  .ft-anschrift  { grid-area: anschrift; padding-right: 2rem; border-right: 1px solid var(--linie); }
  .ft-kontakt    { grid-area: kontakt;   padding-right: 2rem; border-right: 1px solid var(--linie); }
  .ft-downloads  { grid-area: downloads; padding-left: 2rem; padding-right: 2rem; border-right: 1px solid var(--linie); }
  .ft-mehr       { grid-area: mehr;      padding-left: 2rem; }
}

@media (min-width: 1280px) {
  .ft-mitte {
    grid-template-columns: 1.6fr 1.4fr 1.4fr 1fr;
    grid-template-areas: "anschrift kontakt downloads mehr";
    row-gap: 0;
  }
  .ft-anschrift  { padding-right: 2.5rem; border-right: none; }
  .ft-kontakt    { padding-left: 2.5rem; padding-right: 2.5rem; border-right: 1px solid var(--linie); }
  .ft-downloads  { padding-left: 2.5rem; padding-right: 2.5rem; border-right: 1px solid var(--linie); }
  .ft-mehr       { padding-left: 2.5rem; border-right: none; }
}

/* 12. TO-TOP
------------------------------------------------------------- */
#totop {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 500;
  background: var(--spohn-blau);
  color: var(--weiss);
  border: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  box-shadow: 0 4px 16px rgba(2,45,241,0.3);
}
#totop.sichtbar { opacity: 1; pointer-events: auto; }
#totop:hover { opacity: 0.88; }

/* 13. COOKIE
------------------------------------------------------------- */
#cookie-hinweis {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--tinten);
  color: var(--weiss);
  padding: 1rem clamp(1.25rem, 1rem + 3vw, 3.5rem);
  display: none;
  align-items: center;
  gap: 20px;
  z-index: 500;
  border-top: 2px solid var(--spohn-blau);
}
#cookie-hinweis.sichtbar { display: flex; }

#cookie-hinweis p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0;
  flex: 1;
}
#cookie-hinweis a { color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.3); }
#cookie-hinweis a:hover { color: var(--weiss); }

#cookie-ok {
  background: var(--spohn-blau);
  color: var(--weiss);
  border: none;
  padding: 9px 18px;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
#cookie-ok:hover { opacity: 0.85; }

/* 14. SUCHE-OVERLAY
------------------------------------------------------------- */
#suche-overlay { display: none; position: fixed; inset: 0; z-index: 9999; }
#suche-overlay.offen { display: block; }
.overlay-hg { position: absolute; inset: 0; background: rgba(12,13,16,0.4); }
.overlay-panel {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--weiss);
  border-bottom: none;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(12,13,16,0.12);
}
@media (max-width: 767px) {
  .overlay-panel { top: 0; bottom: 0; max-height: none; }
}
.overlay-kopf { display: flex; align-items: center; border-bottom: 1px solid var(--linie); }
#overlay-eingabe {
  flex: 1;
  border: none;
  outline: none;
  padding: 22px 32px;
  font-size: 18px;
  font-family: var(--schrift-mono);
  color: var(--tinten);
  background: transparent;
}
#overlay-eingabe::placeholder { color: var(--tinten-3); }
#overlay-schliessen {
  border: none; background: none;
  padding: 22px 26px;
  font-size: 20px;
  color: var(--tinten-3);
  border-left: 1px solid var(--linie);
  transition: color 0.2s;
}
#overlay-schliessen:hover { color: var(--tinten); }
.overlay-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--hell-2);
}
.overlay-chips button {
  background: var(--spohn-blau-hell);
  border: 1px solid var(--spohn-blau-mittel);
  padding: 7px 14px;
  font-size: 14px;
  font-family: var(--schrift-mono);
  color: var(--spohn-blau);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.15s;
}
.overlay-chips button:hover { background: var(--spohn-blau); color: var(--weiss); border-color: var(--spohn-blau); }
.overlay-ergebnisse {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  padding: clamp(12px, 1.5vw, 24px) clamp(12px, 2.5vw, 36px);
  background: var(--spohn-blau);
}
.overlay-leer { padding: 48px 32px; text-align: center; display: none; }
.such-ergebnisse-wrap .overlay-leer {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem 1rem;
}
.overlay-leer span { display: block; font-size: 28px; color: var(--linie-2); margin-bottom: 12px; }
.overlay-leer p { font-family: var(--schrift-mono); font-size: 14px; color: var(--tinten-3); }

.karte {
  padding: clamp(1rem, 1rem + 0.5vw, 1.5rem);
}

.karte a {
  display: block;
  text-decoration: none;
  color: var(--weiss);
  background: var(--karte-hg);
  border: 1px solid rgba(255,255,255,0.18);
  padding: clamp(14px, 1.5vw, 22px);
  transition: border-color 0.2s, background 0.2s;
  height: 100%;
}

.karte a:hover {
  border-color: rgba(255,255,255,0.45);
  background: rgb(1, 42, 210);
}
.karte-marke {
  font-family: var(--schrift-mono);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin-bottom: 10px;
}

.karte h4 {
  font-family: var(--schrift-kond);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--weiss);
  line-height: 1.15;
  margin-bottom: 8px;
}

.karte p {
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.65;
  margin-bottom: 12px;
}

.karte-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 6px;
}

.karte-tags span {
  font-family: var(--schrift-mono);
  font-size: 14px;
  padding: 3px 8px;
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
}

.karte-oem {
  font-family: var(--schrift-mono);
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  margin-top: 6px;
}

/* 15. PRODUKTSEITE
------------------------------------------------------------- */
.intro-flex {
  display: flex;
  align-items: flex-start;
  padding: 4rem clamp(1.25rem, 1rem + 3vw, 3.5rem);
  background: var(--weiss);
  border-bottom: 1px solid var(--linie);
}
.intro-bild { margin-left: 4rem; }
.intro-text { flex: 1; }
.intro-bild { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.intro-bild img { width: 100%; height: auto; object-fit: cover; }
.intro-bild img.logo-bild { width: 100%; max-width: 400px; height: auto; display: block; }
.piolen-bereich { background: var(--hell-2); border-top: 1px solid var(--linie); }
.piolen-kopf { padding: 3.5rem 0 0; }
.piolen-liste { padding: 0 0 4rem; margin-top: 2rem; }

.piolen-item { border-top: 1px solid var(--linie); }
.piolen-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 22px 0;
  text-align: left;
  cursor: pointer;
  gap: 20px;
  transition: color 0.2s;
}
.piolen-trigger:hover h3 { color: var(--tuerkis-dunkel); }
.piolen-trigger h3 { flex: 1; font-size: 20px; margin: 0; transition: color 0.2s; }
.piolen-kuerzel {
	font-family: var(--schrift-mono);
	font-size: 14px;
	letter-spacing: 1.5px;
	color: var(--tinten-3);
	white-space: nowrap;
}
.piolen-pfeil { font-family: var(--schrift-mono); font-size: 18px; color: var(--tuerkis); transition: transform 0.3s, color 0.2s; line-height: 1; }
.piolen-item.offen .piolen-pfeil { transform: rotate(45deg); color: var(--tuerkis-dunkel); }
.piolen-inhalt { display: none; padding: 0 0 28px; font-size: 16px; color: var(--tinten-2); line-height: 1.75; max-width: 720px; }
.piolen-item.offen .piolen-inhalt { display: block; }
.piolen-inhalt p { margin-bottom: 12px; }
.piolen-anfrage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--schrift-mono);
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tuerkis-dunkel);
  border: 1px solid var(--tuerkis);
  padding: 10px 20px;
  transition: all 0.2s;
}
.piolen-anfrage:hover { background: var(--tuerkis-dunkel); color: var(--weiss); border-color: var(--tuerkis-dunkel); }
.sr-partner-logo {
	display: block;
	height: 3rem;
	width: auto;
	margin-top: 0.75rem;
	margin-bottom: 0;
	opacity: 0.85;
	flex-shrink: 0;
	margin-left: 1vw;
}
.ace-oem-kopf { font-family: var(--schrift-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--tinten-3); margin-bottom: 14px; }
.ace-oem-reihe { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2rem; }
.ace-oem-kachel {
  flex: 0 0 auto;
  width: fit-content;
  min-width: 0;
  padding: 10px 18px;
  background: transparent;
  border: 1.5px solid var(--linie-2);
  font-family: var(--schrift-kond);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tinten);
  text-align: center;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.ace-oem-kachel:hover {
  border-color: var(--spohn-blau);
  background: var(--spohn-blau-hell);
  color: var(--spohn-blau);
}
.ace-oem-kachel.dim { border-color: var(--linie-2); }
.ace-oem-kachel.tief { border-color: var(--linie-2); }

.ace-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--schrift-mono);
	font-size: 14px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--weiss);
	background: var(--spohn-blau);
	border: none;
	padding: 12px 22px;
	margin-top: 20px;
	margin-right: 8px;
	transition: opacity 0.2s;
	cursor: pointer;
}
.ace-btn:hover { opacity: 0.88; }
.ace-btn-rand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--spohn-blau);
  border: 1px solid var(--spohn-blau-mittel);
  padding: 11px 22px;
  transition: all 0.2s;
}
.ace-btn-rand:hover { background: var(--spohn-blau); color: var(--weiss); border-color: var(--spohn-blau); }
.sektion-label-tuerkis { color: var(--tuerkis-dunkel); }
.sektion-label-tuerkis .label-quadrat { background: var(--tuerkis-dunkel); }
.h2-tuerkis em { color: var(--tuerkis-dunkel); }

/* 16. RESPONSIVE
------------------------------------------------------------- */
@media (max-width: 767px) {
  .nach-flex { flex-direction: column; }
  .nach-rechts { margin-left: 0; margin-top: 2.5rem; }
  .nach-items { padding-top: 0; }
  .hero-media { aspect-ratio: 16 / 9; }
  .intro-flex { flex-direction: column; }
  .intro-bild { margin-left: 0 !important; margin-top: 2.25rem; }
  .intro-bild { max-width: none; }
  .sr-titel h3 {
    font-family: var(--schrift-kond);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--tinten);
  }
  .sr-pfeil { padding: 0 1rem; }
  /* Aktuelles */
  .top10{padding-top:5px;}
  .bottom10{padding-bottom:5px;}
  .left10{padding-left:5px;}
  .right10{padding-right:5px;}
  .sp-show{
	  display:block;
  }
  .aktuelles table:not(.pager-table){
	  width:100% !important;
  }
  .aktuelles table:not(.pager-table) td{
	  width:100% !important;
	  display: block;
	  border:none;
  }
  .aktuelles table:not(.pager-table) tr{
	  display:block;
	  margin-bottom:10px;
	  padding-bottom:10px;
	  border-bottom:1px solid #ccc;
  }
  .lightbox .flex-20{
	  width:33.333%;
	  max-width:33.333%;
  }
  .lightbox .flex-20:nth-child(n+4){
	  display:none;
  }
  .lightbox.expanded .flex-20:nth-child(n+4) {
	  display: inherit;
  }
  .lightbox-button:before{
	  content:"weitere Bilder >>";
  }
  .lightbox.expanded .lightbox-button:before{
	  content:"<< weinger Bilder";
  }
}

@media (max-width: 767px) {
  .sr-pfeil {
    background: none;
    padding-left: 0;
  }
}
@media (max-width: 767px) {
  .hero-text-bereich { padding: 2.5rem 1.5rem 2.25rem; }
  .suchbereich { padding: 1.25rem 0 1rem; }
  .such-chips::-webkit-scrollbar { display: none; }
  .chip { flex-shrink: 0; }
  .service-reihen {
    border-top: 1px solid var(--linie);
    margin-top: 2rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(1.25rem, 1rem + 3vw, 3.5rem);
  }
  .service-zeile {
    display: block;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--linie);
    text-decoration: none;
    color: inherit;
  }

.service-zeile:hover { background: rgba(0,120,125,0.06); }
}

.piolen-seite .service-zeile:hover .sr-pfeil { color: var(--tuerkis-dunkel); }
.piolen-seite .sektion-label { color: var(--tuerkis-dunkel); }
.piolen-seite .sektion-label .label-quadrat { background: var(--tuerkis-dunkel); }
.piolen-seite h2 em { color: var(--tuerkis-dunkel); }
.piolen-seite h1 em { color: var(--tuerkis-dunkel); }
.piolen-seite .piolen-trigger:hover h3 { color: var(--tuerkis-dunkel); }
.piolen-seite .piolen-pfeil { color: var(--tuerkis); }
.piolen-seite .piolen-item.offen .piolen-pfeil { color: var(--tuerkis-dunkel); }
.piolen-seite .nach-label { color: var(--tinten-2); }
.piolen-seite .nach-label-quadrat { background: var(--tinten-3); }
.piolen-seite .nach-item { border-color: var(--linie-2); }
.piolen-seite .nach-item:hover { border-color: var(--tuerkis); background: rgba(0,160,160,0.04); }
.piolen-seite .nach-item-quadrat { background: var(--tuerkis-dunkel); }
.piolen-seite .nach-pfeil { color: var(--tuerkis-dunkel); }
.piolen-seite .btn-nach { background: var(--tuerkis-dunkel); }
.piolen-seite .overlay-chips button { background: rgba(0,120,125,0.08); border-color: rgba(0,120,125,0.3); color: var(--tuerkis-dunkel); }
.piolen-seite .overlay-chips button:hover { background: var(--tuerkis-dunkel); color: var(--weiss); border-color: var(--tuerkis-dunkel); }
.piolen-seite #suche-overlay .overlay-panel { border-bottom-color: var(--tuerkis-dunkel); }
.suchbereich.suchbereich-tuerkis { background: var(--tuerkis-tief); }
.suchbereich.suchbereich-tuerkis.such-sticky { top: 88px; }
.such-ergebnisse-wrap.such-ergebnisse-tuerkis { background: var(--tuerkis-tief); }
.nach-flex-wide {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 1rem + 3vw, 3.5rem);
  gap: 4.5rem;
}
a.nach-item { text-decoration: none; }
/**/
.produkte-zitat { position: relative; }

.produkte-zitat-bild {
  position: relative;
  overflow: hidden;
  height: 720px;
}

.produkte-zitat-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(80%) brightness(0.9);
  transition: filter 1.2s ease;
}

.produkte-zitat.sichtbar .produkte-zitat-bild img {
  filter: grayscale(0%) brightness(1);
}

.produkte-zitat-text {
  position: absolute;
  bottom: 0; left: 0;
  background: rgba(12,13,16,0.7);
  padding: 24px 40px;
  max-width: 640px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.produkte-zitat-text p {
  font-family: var(--schrift-kond);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--weiss);
  line-height: 1.2;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.produkte-zitat-text cite {
  font-family: var(--schrift-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-style: normal;
}

@media (max-width: 1023px) {
  .produkte-zitat-bild { height: 480px; }
}

@media (max-width: 767px) {
  .nach-flex-wide { padding: 0 1.5rem; }
  .produkte-zitat-bild { height: 340px; }
  .produkte-zitat-text { padding: 16px 20px; }
  .produkte-zitat-text p { font-size: 18px; }
}
/* 17. LABOR
------------------------------------------------------------- */
.labor-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  margin-top: 0;
}

.labor-gruppe {
  background: var(--weiss);
  padding: 2rem 2.25rem 1.75rem;
}

.labor-gruppe-kopf {
  font-family: var(--schrift-mono);
  font-size: 0.875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--spohn-blau);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--linie);
}

.labor-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--linie);
}
.labor-item:last-child { border-bottom: none; }

.labor-kuerzel {
  font-family: var(--schrift-mono);
  font-size: 1rem;
  letter-spacing: 1.5px;
  color: var(--tinten-3);
  background: var(--hell-2);
  padding: 4px 8px;
  flex-shrink: 0;
  width: 48px;
  text-align: center;
  margin-top: 2px;
}

.labor-item strong {
  display: block;
  font-family: var(--schrift-kond);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tinten);
  letter-spacing: 0.3px;
  line-height: 1.2;
  margin-bottom: 3px;
}

.labor-item p {
  font-size: 1rem;
  color: var(--tinten-3);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 767px) {
  .labor-grid { grid-template-columns: 1fr; }
  .labor-gruppe { padding: 24px; }
}
.ace-oem-bereich {
	padding: 0 3rem 1rem;
	margin: auto;
	max-width: 1280px;
}
.ace-oem-hinweis {
	font-family: var(--schrift-mono);
	font-size: 16px;
	color: var(--tinten-3);
	margin-top: 16px;
}
.ace-btn-mt { margin-top: 12px; margin-bottom: 48px; display: inline-flex; }
.sr-pfeil-grau { font-family: var(--schrift-mono); font-size: 12px; letter-spacing: 1px; color: var(--tinten-3); border-left: 1px solid var(--linie); padding: 0 28px; white-space: nowrap; }

a.pn-eltern:hover { color: var(--spohn-blau); }
a.pn-eltern.aktiv { color: var(--spohn-blau); font-weight: 500; }

/* 18. KONTAKTFORMULAR
------------------------------------------------------------- */
.kontakt-form { display: flex; flex-direction: column; gap: 1.25rem; }
.kf-hinweis { font-size:0.8em; }
.kf-feld { display: flex; flex-direction: column; gap: 0.4rem; }
.kf-feld label {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tinten-3);
}
.kf-feld input,
.kf-feld select,
.kf-feld textarea {
  border: 1px solid var(--linie-2);
  background: var(--weiss);
  padding: 0.75rem 1rem;
  font-family: var(--schrift-text);
  font-size: 1rem;
  color: var(--tinten);
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
}
.kf-feld input:focus,
.kf-feld select:focus,
.kf-feld textarea:focus { border-color: var(--spohn-blau); }
.kf-feld textarea { resize: vertical; min-height: 120px; }
.kf-submit {
  align-self: flex-start;
  background: var(--spohn-blau);
  color: var(--weiss);
  border: none;
  padding: 0.875rem 2rem;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
}
.kf-submit:hover { opacity: 0.88; }

/* 19. AKTUELLES
------------------------------------------------------------- */
.artikel-liste {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 1rem + 3vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}
.artikel {
  padding: 2rem 0;
  border-bottom: 1px solid var(--linie);
}
.artikel:last-child { border-bottom: none; }
.artikel-datum {
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--tinten-3);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.artikel h3 {
  font-family: var(--schrift-kond);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--tinten);
  margin-bottom: 0.75rem;
  hyphens: auto;
}
.artikel p {
  font-size: 1rem;
  color: var(--tinten-2);
  line-height: 1.7;
}
.artikel p a { color: var(--spohn-blau); text-decoration: underline; }
.mitsui-seite .intro-text { max-width: 720px; }
.mitsui-seite .intro-text .hero-beschreibung { max-width: none; }
.mitsui-seite .intro-flex { align-items: stretch; }
.mitsui-seite .intro-bild { justify-content: center !important; }
.nach-item:hover .nach-pfeil,
.service-zeile:hover .sr-pfeil,
.ft-nav a:hover::before,
.btn-nach:hover { opacity: 0.85; }
.nach-item .nach-pfeil,
.sr-pfeil { transition: transform 0.2s ease, color 0.2s ease; }
.nach-item:hover .nach-pfeil { transform: translateX(4px); }

/* 19.a AKTUELLES
------------------------------------------------------------- */
.aktuelles p{
	margin-top: 0px;
	margin-bottom: 0px;
}
.aktuelles ul,.aktuelles ol{
	padding-left: 20px;
	margin: 0px;
	display:inline-block;
}
.aktuelles img{
	width:auto;
	max-width:100%;
	height:auto !important;
}
.datum{
	font-size:0.9em;
	margin-bottom:5px;
}
a.button_pager{
	cursor: pointer;
	color: #fff;
	text-decoration: none !important;
	display: inline-block;
	padding: 0px 6px !important;
	background-color: var(--spohn-blau);
	line-height:36px;
}
a.button_pager:hover,a.pager:hover{
	color: #fff;
	text-decoration: none !important;
	background-color: var(--spohn-blau);
	padding: 0px 6px !important;
	line-height:36px;
}
.pager{
	color: #ccc;
	text-decoration: none;
	margin-left:-2px;
	padding: 0px 6px;
	display: inline-block;
	background-color: #ECEDEE;
	line-height:36px;
}
.pager_active{
	color: #fff;
	text-decoration: none;
	margin-left:-2px;
	padding: 0px 6px;
	display: inline-block;
	background-color: var(--spohn-blau);
	line-height:36px;
}
.pager_inactive{
	margin-left:-2px;
	background-color: #ECEDEE;
	color: #ccc;
	line-height:36px;
}
.flex-container{
	display: flex;
}
.flex-container img{
	max-width:100%;
	height:auto !important;
	transform: translateZ(0px);
}
.flex-wrap{
	flex-wrap: wrap;
}
.flex-100{
	width:100%;
	max-width:100%;
}
.aktuelles .lightbox img{
	width:100%;
}
.aktuelles .lightbox a{
	position:relative;
	display:block;
	width:100%;
	line-height:10px;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
@media(hover:hover){
.aktuelles .lightbox a:not(.lightbox-button):hover{
	transform:scale(1.05);
}
}
.flex-20{
	width:20% !important;
	max-width:20% !important;
}
.sp-show{
	  display:none;
}
.aktuelles table:not(.pager-table){
	width:100% !important;
}
.aktuelles table:not(.pager-table) td{
	width:100% !important;
	display: block;
	border:none;
}
.aktuelles table:not(.pager-table) tr{
	display:block;
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:1px solid #ccc;
}
.lightbox .flex-20{
	width:33.333%;
	max-width:33.333%;
}
.lightbox .flex-20:nth-child(n+4) {
	display: inherit;
}
.lightbox .flex-20:nth-child(n+6){
	display:none;
}
.lightbox.expanded .flex-20:nth-child(n+6) {
	display: inherit;
}
.lightbox-button:before{
	content:"weitere Bilder >>";
}
.lightbox.expanded .lightbox-button:before{
	content:"<< weinger Bilder";
}

/* 20. KONTAKT-SEITE
------------------------------------------------------------- */
.kontakt-flex {
  display: flex;
  gap: 0;
  align-items: flex-start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 1rem + 3vw, 3.5rem);
}
.kontakt-links {
  flex: 0 0 38%;
  padding-right: 3rem;
  border-right: 1px solid var(--linie);
}
.kontakt-rechts {
  flex: 0 0 62%;
  padding-left: 3rem;
}
.kontakt-quicklinks {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}
.kontakt-quicklink {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linie);
  text-decoration: none;
  color: var(--tinten);
  transition: color 0.2s;
}
.kontakt-quicklink:first-child { border-top: 1px solid var(--linie); }
.kontakt-quicklink:hover { color: var(--spohn-blau); }
.kontakt-quicklink:hover .kql-icon { transform: translateX(4px); }
.kql-icon {
  font-family: var(--schrift-mono);
  font-size: 1.1rem;
  color: var(--spohn-blau);
  transition: transform 0.2s;
  flex-shrink: 0;
  width: 1.5rem;
}
.kontakt-quicklink strong {
  display: block;
  font-family: var(--schrift-kond);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.kontakt-quicklink p {
  font-size: 0.875rem;
  color: var(--tinten-3);
  margin: 0;
}
@media (max-width: 767px) {
  .kontakt-flex { flex-direction: column; }
  .kontakt-links { flex: none; width: 100%; padding-right: 0; border-right: none; border-bottom: 1px solid var(--linie); padding-bottom: 2rem; margin-bottom: 2rem; }
  .kontakt-rechts { flex: none; width: 100%; padding-left: 0; }
}
.mitsui-seite .kachel-link::after { content: '↓'; }