/* ================= DIT v2 Styles (ähnlich, nicht gleich) ================= */
:root{
  --brand:#808080;          /* DIT Petrol */
  --accent:#E7AA1B;         /* Goldgelb */
  --ink:#0f1b2d;
  --muted:#6b7280;
  --paper:#ffffff;
  --soft:#f6f8fb;
  --soft-2:#eef2f6;
  --radius:8px;
  --pill:12px;
  --container:1200px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 10px 30px rgba(6,70,78,.15);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:.15s ease}

h1{font-size:clamp(2rem,1.6rem + 3vw,3.4rem);line-height:1.15;margin:0 0 .6rem}
h2{font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem);line-height:1.2;margin:0 0 .4rem}
h3{font-size:clamp(1.05rem,1rem + .4vw,1.25rem);margin:.2rem 0 .35rem}
p{margin:0 0 .9rem}
.muted{color:var(--muted)}

.container{max-width:var(--container);margin:0 auto;padding:0 20px}
section{padding:70px 0}
.section-soft{background:var(--soft);border-top:1px solid var(--soft-2);border-bottom:1px solid var(--soft-2)}

/* ================= Header – schlank, pill-nav, kein farbband ================= */
header.site-header{
  position:sticky;top:0;background:#fff;z-index:1000;box-shadow:0 6px 16px rgba(0,0,0,.05);border-bottom:2px solid var(--soft-2)
}
.header-inner{display:flex;align-items:center;gap:16px;min-height:74px}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{height:56px;width:auto}

.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;flex-wrap:wrap}
.nav a{
  display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 14px;
  border-radius:var(--radius);font-weight:800;letter-spacing:.01em
}
.nav a:hover{background:var(--soft);color:var(--brand)}

.menu-toggle{display:none}
@media (max-width:1100px){
  .nav{display:none}
  .menu-toggle{display:inline-flex;margin-left:auto;align-items:center;justify-content:center;width:42px;height:42px;border:0;background:var(--soft);border-radius:var(--radius)}
  .menu-toggle:after{content:"≡";font-size:22px}
  .nav.open{display:block;position:absolute;left:0;right:0;top:74px;background:#fff;border-bottom:2px solid var(--soft-2)}
  .nav.open ul{flex-direction:column;padding:8px}
  .nav.open a{height:auto;padding:.7rem 1rem}
}

/* ================= Hero – Full-bleed, Glas-Panel links ================= */
.hero{padding:0}
.hero .slider{width:100vw;margin-left:calc(50% - 50vw);position:relative}
.slides{list-style:none;margin:0;padding:0;position:relative;height:min(82vh,760px);min-height:360px;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;background:#000}
.slide.is-active{opacity:1}
.slide img,.slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.slider-prev,.slider-next{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(0,0,0,.45);
  color:#fff;border:0;border-radius:var(--radius);width:42px;height:42px;font-size:22px;cursor:pointer
}
.slider-prev{left:14px}.slider-next{right:14px}
.slider-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:6px;justify-content:center;z-index:2}
.slider-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.6)}
.slider-dots button[aria-selected="true"]{background:#fff}

/* Glas-Panel (statt Text frei über dem Video) */
.hero .glass{
  position:absolute;left:0;top:0;bottom:0;z-index:1;display:flex;align-items:center
}
.hero .glass .panel{
  margin:clamp(12px,4vw,40px);padding:clamp(14px,3.2vw,32px);
  background:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(2px);
  border:1px solid var(--soft-2);border-radius:var(--radius);box-shadow:var(--shadow-md);max-width:720px
}
.hero .panel p{max-width:62ch}

/* CTAs als Kapseln */
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.btn{display:inline-block;padding:.85rem 1.1rem;border-radius:var(--radius);font-weight:800;border:1px solid var(--soft-2);background:#fff;box-shadow:var(--shadow-sm)}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#0b1324}
.btn-ghost{background:#fff}
.btn-ghost:hover{background:var(--soft)}

/* ================= USP-Bar ================= */
.usp{background:#fff;border-bottom:1px solid var(--soft-2)}
.usp .row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 0}
.usp-item{display:flex;align-items:center;gap:.6rem}
.usp-icon{width:34px;height:34px;border-radius:var(--radius);background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800}

/* ================= Sections ================= */

/* Schwerpunkte – asymmetrisches Grid, weniger „Karte“ */
#schwerpunkte .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media (max-width:1200px){#schwerpunkte .grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){#schwerpunkte .grid{grid-template-columns:1fr}}
.tile{background:#fff;border:1px solid var(--soft-2);border-radius:var(--radius);overflow:hidden}
.tile .body{padding:14px}

/* Über DIT – Text rechts statt links */
#ueber .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;align-items:center;margin-top:14px}
@media (max-width:1000px){#ueber .wrap{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.stat{font-weight:900;font-size:1.5rem;color:var(--brand)}

/* Konfiguratoren – „Medialist“ (Media links, Text rechts) */
.medialist{display:grid;gap:12px;margin-top:12px}
.mediaitem{display:grid;grid-template-columns:1.1fr 1.6fr;gap:12px;background:#fff;border:1px solid var(--soft-2);border-radius:var(--radius);overflow:hidden}
@media (max-width:900px){.mediaitem{grid-template-columns:1fr}}
.mediaitem .body{padding:14px}

/* Standort */
#standort .grid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:12px}
@media (max-width:980px){#standort .grid{grid-template-columns:1fr}}
.media-16x9{position:relative}
.media-16x9::before{content:"";display:block;padding-top:56.25%}
.media-16x9 > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}

/* Jobs – simple list */
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
@media (max-width:1100px){.jobs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.jobs{grid-template-columns:1fr}}
.job{background:#fff;border:1px solid var(--soft-2);border-radius:var(--radius);padding:14px}
.badge{display:inline-block;padding:.15rem .5rem;border-radius:var(--radius);background:var(--soft);border:1px solid var(--soft-2);font-weight:800}

/* News – 2-spaltig */
.news{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-top:12px}
@media (max-width:1000px){.news{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--soft-2);border-radius:var(--radius);overflow:hidden}
.card .body{padding:14px}

/* Footer */
footer{background:#808080;color:#fff;border-top:3px solid var(--accent)}
footer .inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:16px 0;flex-wrap:wrap}
footer .links ul{list-style:none;margin:0;padding:0;display:flex;gap:.8rem;flex-wrap:wrap}
footer a,footer button{color:#fff;background:transparent;border:0;padding:.4rem .6rem;border-radius:8px;font-weight:800}
footer a:hover,footer button:hover{background:rgba(255,255,255,.13)}

/* === Header adjustments (fit one row, image only) === */
.header-inner{gap:12px}
.brand img{height:52px}
.nav ul{gap:4px;flex-wrap:nowrap}
.nav a{height:40px;padding:0 10px;font-weight:800}
@media (max-width:1240px){
  .nav a{padding:0 9px;font-weight:800}
}

/* === Aspect helpers === */
.media-16x10{position:relative}
.media-16x10::before{content:"";display:block;padding-top:62.5%}
.media-16x10 > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}

/* === Tile structure === */
.tile{display:flex;flex-direction:column}
.tile .body{min-height:94px}

/* === Hover polish & squarer look === */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;background:transparent;transform:scaleX(.4);transition:transform .15s ease,background .15s ease}
.nav a:hover::after{background:var(--accent);transform:scaleX(1)}

.tile,.card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.tile:hover,.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand)}

.btn{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}

#schwerpunkte .tile--wide{grid-column:span 2}
#schwerpunkte .tile .body p{margin:.35rem 0 .6rem}
#schwerpunkte .actions{margin-top:.4rem}

/* === Page hero (static jpg) === */
.page-hero{position:relative;padding:0}
.page-hero .media-16x9{width:100vw;margin-left:calc(50% - 50vw)}
.page-hero .overlay{position:absolute;inset:0;display:flex;align-items:center;color:#fff;
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.25),transparent 60%)}
.page-hero h1{color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.35);margin:0 0 .3rem}

/* === Downloads grid === */
.downloads-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.downloads-grid{grid-template-columns:1fr}}
.d-card{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--soft-2);background:#fff;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.d-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.d-icon{flex:0 0 56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);background:var(--soft);border:1px solid var(--soft-2);font-weight:900}
.d-body h3{margin:.1rem 0 .2rem}

/* === Page hero height fix === */
.page-hero .media-16x9{width:100vw;margin-left:calc(50% - 50vw);height:min(82vh,760px);position:relative}
.page-hero .media-16x9::before{padding-top:0}
.page-hero .media-16x9 > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){
  .page-hero .media-16x9{height:min(56vh,520px)}
}

/* === Oberflächen cards sizing === */
#oberflaeche .card-grid{grid-template-columns:repeat(3,1fr)}
#oberflaeche .card .media-16x9{position:relative;height:220px}
#oberflaeche .card .media-16x9::before{padding-top:0}
#oberflaeche .card .media-16x9 > *{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:1000px){#oberflaeche .card-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){#oberflaeche .card-grid{grid-template-columns:1fr}}

/* === Logistics page helpers === */
.info-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;margin-top:12px}
@media (max-width:980px){.info-grid{grid-template-columns:1fr}}
.iconbox{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--soft-2);background:#fff;border-radius:var(--radius);padding:14px;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.iconbox:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.icon{width:40px;height:40px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--soft-2);display:flex;align-items:center;justify-content:center;font-weight:900}
.logos-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px}
.logos-row img{height:28px;opacity:.85;filter:grayscale(1)}
.logos-row img:hover{opacity:1;filter:none}
.table-lite{width:100%;border-collapse:collapse;border:1px solid var(--soft-2);border-radius:var(--radius);overflow:hidden;background:#fff}
.table-lite th,.table-lite td{padding:10px;border-bottom:1px solid var(--soft-2);text-align:left}
.table-lite thead th{background:var(--soft)}
.route-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:10px}

/* === Feature grid (Partnerschaft) === */
.feature-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.feature-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.feature-grid{grid-template-columns:1fr}}
.feature{background:#fff;border:1px solid var(--soft-2);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.feature:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.feature-icon{width:40px;height:40px;border-radius:var(--radius);background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;margin-bottom:.5rem}
.steps{counter-reset:step}
.steps li{background:#fff;border:1px solid var(--soft-2);border-radius:var(--radius);padding:14px;margin:.5rem 0;position:relative}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:10px;top:10px;width:26px;height:26px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--soft-2);display:flex;align-items:center;justify-content:center;font-weight:900}
.steps li > *{margin-left:38px}
.cta-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:12px}

/* === Career page helpers === */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.filters input,.filters select{height:40px;padding:0 10px;border:1px solid var(--soft-2);border-radius:var(--radius);background:#fff}
.apply-bar{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:10px}
.badge-role{display:inline-block;margin-left:6px;padding:.1rem .5rem;border:1px solid var(--soft-2);border-radius:var(--radius);background:var(--soft);font-weight:800;font-size:.85rem}
.job .meta{color:var(--muted);font-size:.95rem;margin:.3rem 0 .6rem}

/* === News & About helpers === */
.news-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.news-grid{grid-template-columns:1fr}}
.post{background:#fff;border:1px solid var(--soft-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.post:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.post .meta{color:var(--muted);font-size:.92rem;margin:.25rem 0 .6rem}

.team-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.team-grid{grid-template-columns:1fr}}
.team-card{background:#fff;border:1px solid var(--soft-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.team-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.team-photo{position:relative;height:260px}
.team-photo::before{content:"";display:block;padding-top:0}
.team-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.values{grid-template-columns:1fr}}
.value{background:#fff;border:1px solid var(--soft-2);border-radius:var(--radius);padding:14px}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badges img{height:34px;filter:grayscale(1);opacity:.85}
.badges img:hover{filter:none;opacity:1}

/* === Karriere (LGT-Style) === */
.job-grid{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1100px){ .job-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){  .job-grid{ grid-template-columns:1fr; } }

.job-card{
  background:#fff;
  border:1px solid var(--soft-2);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.job-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:var(--brand);
}

.job-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 .4rem;
}
.job-head .badge{ margin:0; }

/* Häkchenliste (wie LGT) */
.tick-list{
  margin:.5rem 0 1rem;
  padding-left:1.2rem; /* Standard Bullets; wenn Häkchen gewünscht: unten aktivieren */
}
.tick-list li{ margin:.2rem 0; }

/* Optional: echte Häkchen anstelle von • */
/*
.tick-list{ list-style:none; padding-left:0; }
.tick-list li{ position:relative; padding-left:1.4rem; }
.tick-list li::before{
  content:"✓";
  position:absolute; left:0; top:.1rem;
  font-weight:900; color:var(--brand);
}
*/

/* Falls .badge bei dir nicht existiert, minimaler Style: */
.badge{
  display:inline-block;
  padding:.2rem .55rem;
  border:1px solid var(--soft-2);
  border-radius:var(--radius);
  background:var(--soft);
  font-weight:800;
  font-size:.85rem;
}

/* Portrait-Ratio für Kachelbilder */
.media-9x16 { position: relative; }
.media-9x16::before { content:""; display:block; padding-top:177.78%; } /* 16/9 * 100 */
.media-9x16 > * { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Kachel-Stretch in der Schwerpunkte-Reihe, damit beide Boxen unten bündig sind */
#schwerpunkte .grid { align-items: stretch; }
#schwerpunkte .tile { display:flex; flex-direction:column; height:100%; }
#schwerpunkte .tile .body { margin-top:auto; }

/* Portrait 3:4 (etwas „breiter“, passt besser zur linken Kachelhöhe) */
.media-3x4 { position:relative; }
.media-3x4::before { content:""; display:block; padding-top:133.333%; } /* 4/3*100 */
.media-3x4 > * { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Sicherstellen, dass die Kacheln in der Zeile gleich hoch werden und unten bündig abschließen */
#schwerpunkte .grid { align-items:stretch; }
#schwerpunkte .tile { display:flex; flex-direction:column; height:100%; }
#schwerpunkte .tile .body { margin-top:auto; }
/* Mobile-Fix: Kacheln nicht strecken, Text nicht nach unten schieben */
@media (max-width: 768px){
  #schwerpunkte .tile{
    display:block;
    height:auto;
  }
  #schwerpunkte .tile .body{
    margin-top:0;
  }
}

/* 4:3 Media-Ratio für Detailfotos (sauberer Crop) */
.media-4x3 { position: relative; }
.media-4x3::before { content:""; display:block; padding-top:75%; }
.media-4x3 > * { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Grid für die Qualitäts-Detailkarten */
.detail-grid{
  list-style:none; margin:10px 0 0; padding:0;
  display:grid; gap:14px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:1000px){ .detail-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .detail-grid{ grid-template-columns:1fr; } }

/* „Made in Germany“-Badge */
.badge-flag{
  display:inline-block; margin-right:.4rem; padding:.2rem .55rem;
  border:1px solid var(--soft-2); border-radius:var(--radius);
  background:var(--soft); font-weight:800; white-space:nowrap;
}
.quality-note{ margin-top:.4rem; }

/* Ratio-Helper: Bild füllt den Rahmen immer vollständig */
.media-4x3,
.media-3x4,
.media-9x16 { position: relative; }
.media-4x3::before { content:""; display:block; padding-top:75%; }       /* 4:3  */
.media-3x4::before { content:""; display:block; padding-top:133.333%; }  /* 3:4  */
.media-9x16::before{ content:""; display:block; padding-top:177.778%; }  /* 9:16 */

.media-4x3 > img,
.media-3x4 > img,
.media-9x16 > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;                 /* füllt den Rahmen, zuschneiden erlaubt */
  object-position: center;
}

/* Falls ein globales img{ height:auto } das überschreibt, sicherstellen: */
.media-4x3 > img,
.media-3x4 > img,
.media-9x16 > img { height: 100% !important; }

/* Einheitliche Logo-Felder (funktioniert für JPG/PNG/SVG) */
.logos-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* Jede Marke bekommt eine Box – sorgt für sauberes Grid */
.logo{
  width:120px;              /* Breite je Feld */
  height:40px;              /* Höhe je Feld (klein halten) */
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;          /* neutraler Hintergrund (wichtig bei JPG) */
  border:1px solid var(--soft-2);
  border-radius:var(--radius);
  padding:6px 8px;          /* etwas Luft um das Logo */
  box-shadow:var(--shadow-sm);
}

/* Bild immer komplett sichtbar, nie verzerrt */
.logo img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:none;              /* KEIN Graufilter */
  opacity:1;
}

/* Optional leichtes Hover-Feedback – kannst du auch weglassen */
.logo:hover{ box-shadow:var(--shadow-md); border-color:var(--brand); }

/* Feintuning für sehr breite / sehr hohe Logos (bei Bedarf) */
.logo--wide  { width:140px; }
.logo--tall  { height:48px; }

/* ==== Logos in Farbe & einheitlich ==== */

/* Alte Regeln überschreiben (falls noch vorhanden) */
.logos-row img{
  filter: none !important;           /* Farbe statt Graustufen */
  -webkit-filter: none !important;
  opacity: 1 !important;
  height: 24px !important;           /* einheitliche Höhe */
  width: auto;                       /* Seitenverhältnis beibehalten */
  display: block;                    /* kein Zeilen-Baseline-Versatz */
}

/* Reihe ordentlich anordnen */
.logos-row{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* 3-Spalten-Grid für Portfolio-Überblick */
.card-grid{ display: grid; gap: 14px; }
.card-grid-3{ grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1100px){
  .card-grid-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .card-grid-3{ grid-template-columns: 1fr; }
}

/* =========================
   Logistics page – Extras
   ========================== */

/* --- Logistikoptionen: Icon + Layout --- */
#logistik .logistik-card .body{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

#logistik .logistik-card h3{
  margin-top:0;
  margin-bottom:.25rem;
}

#logistik .logistik-card p{
  margin:.2rem 0 0;
}

#logistik .logistik-card .logistik-icon{
  flex:0 0 40px;
  justify-content:center;
  align-items:center;
  font-size:1.3rem;
  background:var(--brand);
  color:#fff;
}

/* etwas mehr Luft zwischen Zeilen auf kleineren Screens */
@media (max-width:800px){
  #logistik .logistik-card .body{
    align-items:flex-start;
  }
}

/* --- Verpackung & Dokumentation: dezenter Hover auf Bild + Liste --- */
#verpackung .mediaitem{
  position:relative;
  overflow:hidden;
}

#verpackung .mediaitem .media-16x9{
  transition:transform .35s ease;
}

#verpackung .mediaitem .media-16x9::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(12,110,120,.22), transparent 55%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

#verpackung .mediaitem:hover .media-16x9{
  transform:scale(1.03);
}

#verpackung .mediaitem:hover .media-16x9::after{
  opacity:1;
}

/* Liste etwas feiner machen */
#verpackung .verpackung-list{
  padding-left:1.2rem;
  font-size:.98rem;
}
#verpackung .verpackung-list li{
  margin:.2rem 0;
}

/* --- Versandzonen: Icons, Pillen & Row-Hover --- */
#laufzeiten .table-lite{
  border-radius:var(--radius);
  overflow:hidden;
}

/* Pilles für die Zonen */
#laufzeiten .zone-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.2rem .65rem;
  border-radius:var(--pill);
  background:var(--soft);
  border:1px solid var(--soft-2);
  font-weight:700;
  font-size:.95rem;
}

#laufzeiten .zone-pill .zone-icon{
  font-size:1.1rem;
  line-height:1;
}

/* Express etwas hervorheben */
#laufzeiten .zone-pill--accent{
  background:rgba(231,170,27,.08);
  border-color:var(--accent);
  color:var(--ink);
}

/* Hover-Effekt nur für diese Tabelle */
#laufzeiten .table-lite tbody tr:hover td{
  background:var(--soft);
}

/* Hinweis mit kleinem Icon */
#laufzeiten .note{
  display:flex;
  align-items:flex-start;
  gap:6px;
}

#laufzeiten .note-icon{
  margin-top:2px;
  font-size:1.05rem;
}

/* Kleine Optimierung für Logos-Row in Standort-Block (optional, falls gewünscht) */
#standort .logos-row{
  margin-top:12px;
}

/* =========================================
   Partnerschaft – Page Polish
   ========================================== */

/* --- Hero: kleines Partnerschaft-Badge --- */
.hero-partnerschaft .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}

.hero-partnerschaft .overlay .container{
  max-width:960px;
}

.hero-partnerschaft .badge{
  margin-bottom:.4rem;
  background:#03a6fd;
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.hero-partnerschaft .muted{
  max-width:520px;
}

/* --- Intro: Subline + Highlight-Liste + Button-Micro-Interaction --- */
#intro .intro-sub{
  margin-top:.25rem;
  max-width:520px;
}

#intro .info-grid > div:first-child{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}

#intro .partner-highlights{
  list-style:none;
  padding:0;
  margin:.25rem 0 .75rem;
}

#intro .partner-highlights li{
  display:flex;
  align-items:flex-start;
  gap:.4rem;
  font-size:.95rem;
}

#intro .partner-highlights .dot{
  flex:0 0 6px;
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--brand);
  margin-top:.45rem;
}

/* Kleine Pfeil-Animation nur bei den Hero-Buttons */
#intro .cta-row .btn-primary{
  position:relative;
  overflow:hidden;
}

#intro .cta-row .btn-primary::after{
  content:"↗";
  margin-left:.35rem;
  font-size:.9em;
  transition:transform .15s ease;
  display:inline-block;
}

#intro .cta-row .btn-primary:hover::after{
  transform:translateX(2px);
}

/* --- Vorteile: Icon leicht hervorheben --- */
#vorteile .feature-icon{
  box-shadow:var(--shadow-sm);
}

/* --- Aufgabenverteilung: Table-as-Card --- */
#aufgaben .card-table{
  padding:0;
  overflow:hidden;
}

#aufgaben .table-aufgaben thead th{
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}

#aufgaben .table-aufgaben thead th:first-child{
  font-weight:700;
}

#aufgaben .table-aufgaben tbody tr:hover td{
  background:var(--soft);
}

#aufgaben .table-aufgaben td{
  vertical-align:middle;
}

#aufgaben .area-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:var(--soft);
  margin-right:.4rem;
  font-size:1rem;
}

#aufgaben .pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.15rem .6rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  border:1px solid var(--soft-2);
  background:var(--soft);
}

#aufgaben .pill-dit{
  background:rgba(12,110,120,.08);
  border-color:rgba(12,110,120,.25);
  color:var(--ink);
}

#aufgaben .pill-lgt{
  background:rgba(231,170,27,.08);
  border-color:rgba(231,170,27,.35);
  color:var(--ink);
}

#aufgaben .cell-muted{
  color:var(--muted);
}

/* --- Ablauf: Step-Linie zwischen den Schritten --- */
#ablauf .steps{
  margin-top:16px;
}

#ablauf .steps li{
  overflow:hidden;
}

#ablauf .steps li::after{
  content:"";
  position:absolute;
  left:22px;              /* mittig unter der Step-Nummer */
  top:38px;
  bottom:-14px;
  width:2px;
  background:var(--soft-2);
}

#ablauf .steps li:last-child::after{
  display:none;
}

#ablauf .steps li h3{
  margin-top:0;
  margin-bottom:.15rem;
}

/* --- Portfolio: Karten mit Tag & Hover --- */
#portfolio .portfolio-card{
  display:flex;
  flex-direction:column;
  height:100%;
  transition:transform .18s ease,box-shadow .18s ease;
}

#portfolio .portfolio-card .media-16x9{
  position:relative;
  overflow:hidden;
}

#portfolio .portfolio-card .media-16x9 img{
  transition:transform .35s ease;
}

#portfolio .portfolio-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}

#portfolio .portfolio-card:hover .media-16x9 img{
  transform:scale(1.04);
}

#portfolio .portfolio-card .body{
  padding:14px 16px 16px;
}

#portfolio .badge-tag{
  margin-bottom:.3rem;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

#portfolio .badge-dit{
  background:rgba(12,110,120,.08);
  border-color:rgba(12,110,120,.25);
  color:var(--ink);
}

#portfolio .badge-lgt{
  background:rgba(231,170,27,.08);
  border-color:rgba(231,170,27,.4);
  color:var(--ink);
}

#portfolio .badge-standort{
  background:var(--soft);
  border-color:var(--soft-2);
}

/* =========================================
   Karriere – Page Polish
   ========================================== */

/* Hero Karriere */
.hero-karriere .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-karriere .overlay .container{
  max-width:960px;
}
.hero-karriere .badge{
  margin-bottom:.4rem;
  background:#03a6fd;
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-karriere .muted{
  max-width:520px;
}

/* Benefits – Hover & Subline */
#benefits .benefits-sub{
  margin-top:.25rem;
  max-width:520px;
}
#benefits .feature{
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
#benefits .feature:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  background:#fff;
}
#benefits .feature-icon{
  box-shadow:var(--shadow-sm);
}

/* Jobs – Subline & Filter-Chips */
#jobs .jobs-sub{
  margin-top:.25rem;
  max-width:640px;
}
#jobs .filters{
  margin:16px 0 10px;
}
#jobs .filters .chip{
  border:1px solid var(--soft-2);
  border-radius:999px;
  padding:0 .75rem;
  height:32px;
  font-size:.85rem;
  background:#fff;
  cursor:default;
}
#jobs .filters .chip.is-active{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

/* Job-Karten: Hover & Header */
#jobs .jobs{
  margin-top:16px;
}
#jobs .job{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#jobs .job:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--soft-2);
}
#jobs .job-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  margin-bottom:.1rem;
}
#jobs .job h3{
  margin:.1rem 0;
}
#jobs .job .meta{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  color:var(--muted);
  font-size:.95rem;
  margin:.2rem 0 .5rem;
}
#jobs .job .meta span{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}
#jobs .job .job-list{
  margin-top:.3rem;
}

/* Bewerbungsprozess – Step-Linie */
#prozess .steps{
  margin-top:16px;
}
#prozess .steps li{
  overflow:hidden;
}
#prozess .steps li::after{
  content:"";
  position:absolute;
  left:22px;
  top:38px;
  bottom:-14px;
  width:2px;
  background:var(--soft-2);
}
#prozess .steps li:last-child::after{
  display:none;
}

/* Initiativbewerbung – Card mit Icon */
#bewerbung .card-application{
  transition:box-shadow .18s ease,transform .18s ease;
}
#bewerbung .card-application:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
#bewerbung .application{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
#bewerbung .application-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft);
  font-size:1.4rem;
}
#bewerbung .application-copy p{
  margin:.2rem 0;
}
#bewerbung .application-copy .apply-bar{
  margin-top:.8rem;
}
@media (max-width:600px){
  #bewerbung .application{
    flex-direction:column;
  }
}

/* =========================================
   Über uns – Page Polish
   ========================================== */

/* Hero Über uns */
.hero-ueberuns .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-ueberuns .overlay .container{
  max-width:960px;
}
.hero-ueberuns .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-ueberuns .muted{
  max-width:520px;
}

/* Mission & Stats */
#mission .mission-sub{
  margin-top:.25rem;
  margin-bottom:.5rem;
  max-width:520px;
}
#mission .stats-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
#mission .stat-card{
  flex:1 1 140px;
  min-width:140px;
  background:#fff;
  border:1px solid var(--soft-2);
  border-radius:var(--radius);
  padding:10px 12px;
}
#mission .stat-number{
  display:flex;
  align-items:baseline;
  gap:2px;
  font-size:1.4rem;
  font-weight:800;
  color:var(--ink);
}
#mission .stat-unit{
  font-size:.9rem;
}
#mission .stat-card .muted{
  margin-top:2px;
  font-size:.9rem;
}

/* Werte – Icons im Kopf */
#werte .value{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
#werte .value-head{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.15rem;
}
#werte .value-icon{
  width:32px;
  height:32px;
  border-radius:999px;
  background:var(--soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
}

/* Historie – Timeline-Linie */
#historie .steps{
  margin-top:16px;
}
#historie .steps li{
  overflow:hidden;
}
#historie .steps li::after{
  content:"";
  position:absolute;
  left:22px;
  top:38px;
  bottom:-14px;
  width:2px;
  background:var(--soft-2);
}
#historie .steps li:last-child::after{
  display:none;
}
#historie .step-meta{
  margin:.1rem 0 .25rem;
}

/* Team – Karten & Hover */
#team .team-card{
  background:#fff;
  border:1px solid var(--soft-2);
  border-radius:var(--radius);
  padding:10px 12px 14px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#team .team-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--brand);
}
#team .team-photo{
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:10px;
  position:relative;
}
#team .team-photo img{
  transition:transform .35s ease;
}
#team .team-card:hover .team-photo img{
  transform:scale(1.05);
}
#team .badge-team{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.2rem;
}
#team .body h3{
  margin:.1rem 0;
}

/* Qualität – Card mit Icon & Liste */
#qualitaet .qualitaet-card{
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
#qualitaet .qualitaet-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
  border-color:var(--soft-2);
}
#qualitaet .qualitaet-body{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
#qualitaet .qualitaet-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft);
  font-size:1.4rem;
}
#qualitaet .qualitaet-list{
  margin:.4rem 0 .6rem;
}
@media (max-width:640px){
  #qualitaet .qualitaet-body{
    flex-direction:column;
  }
}

/* =========================================
   Aktuelles – Page Polish
   ========================================== */

/* Hero Aktuelles */
.hero-aktuelles .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-aktuelles .overlay .container{
  max-width:960px;
}
.hero-aktuelles .badge{
  margin-bottom:.4rem;
  background:#03a6fd;
  color:#fff;
  border-color:rgba(255,255,255,.3);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-aktuelles .muted{
  max-width:520px;
}

/* News-Karten (Highlights & Alle Meldungen) */
.news-grid .post{
  display:flex;
  flex-direction:column;
}

/* Mehr Innenabstand für Text & Button */
.news-grid .post .body{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  height:100%;
}

.news-grid .post h3{
  margin:.1rem 0 .15rem;
}

/* Meta bleibt wie gehabt, nur optisch etwas luftiger durch card-padding */
.news-grid .post .meta{
  margin-top:.2rem;
}

/* Button an den Kartenboden & nicht am Rand kleben */
.news-grid .post .actions{
  margin-top:auto;
  padding-top:.75rem;
}

/* Bild-Hover: leichtes Zoomen wie bei modernen News-Karten */
.news-grid .post .media-16x9{
  position:relative;
  overflow:hidden;
}
.news-grid .post .media-16x9 img{
  transition:transform .35s ease;
}
.news-grid .post:hover .media-16x9 img{
  transform:scale(1.04);
}

/* Presse/Downloads: etwas mehr Luft in den Boxen */
#presse .downloads-grid{
  margin-top:18px;
}
#presse .d-card{
  padding:12px 16px;
}
#presse .d-body h3{
  margin:.1rem 0 .2rem;
}
#presse .d-body .muted{
  margin-bottom:.35rem;
}

/* Hero-Untertitel auf allen Seiten weiß */
.page-hero .overlay .muted{
  color: #fff;
}

/* =========================================
   Aktuelles – Detailseite CNC-News
   ========================================== */

/* Hero für News-Detail */
.hero-news-detail .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-news-detail .overlay .container{
  max-width:960px;
}
.hero-news-detail .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-news-detail .muted{
  max-width:520px;
}
.hero-news-detail .meta{
  margin-top:.25rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Back-Link oberhalb des Artikels */
#maschinenpark .back-link{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.9rem;
  margin-bottom:.4rem;
}
#maschinenpark .back-link:hover{
  text-decoration:underline;
}

/* Kontakt-Card */
#kontakt .kontakt-body p{
  margin:.2rem 0;
}

/* Stat-Grid für Fertigung & Qualität */
#fertigung-qualitaet .stat-grid{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
#fertigung-qualitaet .stat-grid li{
  flex:1 1 140px;
  min-width:140px;
  background:#fff;
  border:1px solid var(--soft-2);
  border-radius:var(--radius);
  padding:8px 10px;
}
#fertigung-qualitaet .stat{
  display:flex;
  align-items:baseline;
  gap:3px;
  font-weight:800;
  font-size:1.3rem;
}
#fertigung-qualitaet .stat .unit{
  font-size:.9rem;
}
#fertigung-qualitaet .stat-grid .label{
  display:block;
  margin-top:2px;
  font-size:.9rem;
  color:var(--muted);
}

/* =========================================
   Landingpage Laserzuschnitte
   ========================================== */

/* Hero Laser */
.hero-laser .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-laser .overlay .container{
  max-width:960px;
}
.hero-laser .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-laser .muted{
  max-width:520px;
}
.hero-laser .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Hero-Video etwas höher */
.hero-laser .media-16x9{
  height:min(72vh, 720px);
}

/* Intro / Stats */
#laser-intro h2{
  margin-bottom:.4rem;
}
#laser-intro .info-grid{
  margin-top:.4rem;
}
#laser-intro .stat-grid.laser-stats{
  margin-top:16px;
}

/* Galerie-Karten */
#laser-galerie .gallery-card{
  padding:0;
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
#laser-galerie .gallery-card .media-16x9{
  position:relative;
  overflow:hidden;
}
#laser-galerie .gallery-card img{
  transition:transform .35s ease;
}
#laser-galerie .gallery-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
#laser-galerie .gallery-card:hover img{
  transform:scale(1.05);
}

/* Downloads */
#downloads .download-body{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
#downloads .download-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft);
  font-size:1.4rem;
}
@media (max-width:640px){
  #downloads .download-body{
    flex-direction:column;
  }
}

/* Ansprechpartner */
#ansprechpartner .contact-body{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
#ansprechpartner .contact-photo{
  flex:0 0 80px;
  width:80px;
  height:80px;
  border-radius:999px;
  overflow:hidden;
}
#ansprechpartner .contact-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
#ansprechpartner .contact-copy p{
  margin:.15rem 0;
}
@media (max-width:640px){
  #ansprechpartner .contact-body{
    flex-direction:column;
  }
}

/* Anfrage-Block */
#anfrage .kontakt-body p{
  margin:.2rem 0;
}

/* Einblicke-Slider auf Laser-Seite */
#laser-galerie .laser-slider{
  position:relative;
  max-width:960px;
  margin:0 auto;
}

#laser-galerie .laser-slide{
  display:none;
}

#laser-galerie .laser-slide.is-active{
  display:block;
}

#laser-galerie .laser-slide figcaption{
  margin-top:.4rem;
  font-size:.95rem;
  color:var(--muted);
}

/* Pfeile */
#laser-galerie .laser-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:0;
  width:38px;
  height:38px;
  border-radius:var(--radius);
  background:rgba(0,0,0,.45);
  color:#fff;
  cursor:pointer;
}
#laser-galerie .laser-prev{ left:10px; }
#laser-galerie .laser-next{ right:10px; }

/* Dots */
#laser-galerie .laser-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  display:flex;
  gap:6px;
  justify-content:center;
}
#laser-galerie .laser-dots button{
  width:9px;
  height:9px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.6);
  cursor:pointer;
}
#laser-galerie .laser-dots button.is-active,
#laser-galerie .laser-dots button[aria-selected="true"]{
  background:#fff;
}

/* Klickbare Material-Karten */
#laser-materialien .material-card{
  display:block;
  height:100%;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#laser-materialien .material-card .body{
  padding:14px 16px 16px;
}
#laser-materialien .material-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--brand);
}

/* Materialien & Formate – Liste ohne Standard-Bullets */
#laser-materialien .card-grid{
  list-style:none;
  padding:0;
}
#laser-materialien .card-grid > li{
  list-style:none;
}

/* Tick-Liste in Material-Karten etwas ruhiger */
#laser-materialien .material-card .tick-list{
  list-style:none;
  padding-left:0;
  margin:.35rem 0 .6rem;
}
#laser-materialien .material-card .tick-list li{
  padding-left:0;
}

/* Kopf mit Icon + Titel */
#laser-materialien .material-head{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:.25rem;
}
#laser-materialien .material-icon{
  width:32px;
  height:32px;
  border-radius:999px;
  background:var(--soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:700;
}

/* Klickbare Karten nochmal zur Sicherheit */
#laser-materialien .material-card{
  display:block;
  height:100%;
  text-decoration:none;
  color:inherit;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#laser-materialien .material-card .body{
  padding:14px 16px 16px;
}
#laser-materialien .material-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--brand);
}

/* CTA + Pfeil-Button */
#laser-materialien .material-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:.6rem;
  font-size:.9rem;
  color:var(--muted);
}
#laser-materialien .material-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid var(--soft-2);
  font-size:1rem;
}
#laser-materialien .material-card:hover .material-arrow{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
#laser-materialien .material-card:hover .material-cta span:first-child{
  color:var(--ink);
}

/* Icons in Konturen & Möglichkeiten */
#laser-konturen .card .body{
  position:relative;
}

#laser-konturen .laser-icon{
  width:32px;
  height:32px;
  border-radius:999px;
  background:var(--soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  margin-bottom:.25rem;
}

#laser-konturen .card .body h3{
  margin-top:.1rem;
}


/* =========================================
   Laserzuschnitte – Zusatz: Einsatz, Ablauf, FAQ
   ========================================== */

/* Einsatzbereiche */
#laser-einsatz .feature-grid{
  margin-top:12px;
}
#laser-einsatz .feature{
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
#laser-einsatz .feature:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  background:#fff;
}

/* Ablauf Steps – etwas mehr Luft */
#laser-ablauf .steps{
  margin-top:16px;
}
#laser-ablauf .steps li h3{
  margin-top:0;
  margin-bottom:.1rem;
}
#laser-ablauf .steps li p{
  margin:.15rem 0 .3rem;
}

/* FAQ */
#laser-faq .faq-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#laser-faq details{
  border-radius:var(--radius);
  border:1px solid var(--soft-2);
  padding:8px 10px;
  background:#fff;
}
#laser-faq summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:20px;
}
#laser-faq summary::-webkit-details-marker{
  display:none;
}
#laser-faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
}
#laser-faq details[open] summary::after{
  content:"–";
}
#laser-faq details p{
  margin:.35rem 0 .1rem;
  font-size:.95rem;
}

/* =========================================
   Landingpage Stahl
   ========================================== */

/* Hero Stahl */
.hero-stahl .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-stahl .overlay .container{
  max-width:960px;
}
.hero-stahl .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-stahl .muted{
  max-width:520px;
}
.hero-stahl .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#stahl-intro h2{
  margin-bottom:.4rem;
}
#stahl-intro .info-grid{
  margin-top:.4rem;
}

/* Tabellen: Blechdicken & Formate */
#stahl-parameter .table-stahl{
  margin-top:.4rem;
}
#stahl-parameter .table-stahl th{
  white-space:nowrap;
}
#stahl-parameter .table-stahl td{
  vertical-align:top;
}

/* Stahlsorten */
#stahl-sortiment .info-grid{
  margin-top:.6rem;
}
#stahl-sortiment .card .body{
  padding:14px 16px 16px;
}

/* Beispielprojekt */
#stahl-projekt .info-grid{
  gap:14px;
}

/* SEO-Text */
#stahl-seo .info-grid{
  margin-top:.4rem;
}
#stahl-seo .tick-list{
  margin-top:.3rem;
}

/* =========================================
   Landingpage Edelstahl
   ========================================== */

/* Hero Edelstahl */
.hero-edelstahl .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-edelstahl .overlay .container{
  max-width:960px;
}
.hero-edelstahl .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-edelstahl .muted{
  max-width:520px;
}
.hero-edelstahl .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#edelstahl-intro h2{
  margin-bottom:.4rem;
}
#edelstahl-intro .info-grid{
  margin-top:.4rem;
}

/* Tabellen: Blechdicken & Formate */
#edelstahl-parameter .table-edelstahl{
  margin-top:.4rem;
}
#edelstahl-parameter .table-edelstahl th{
  white-space:nowrap;
}
#edelstahl-parameter .table-edelstahl td{
  vertical-align:top;
}

/* Edelstahlqualitäten */
#edelstahl-sortiment .info-grid{
  margin-top:.6rem;
}
#edelstahl-sortiment .card .body{
  padding:14px 16px 16px;
}

/* Beispielprojekt */
#edelstahl-projekt .info-grid{
  gap:14px;
}

/* SEO-Text */
#edelstahl-seo .info-grid{
  margin-top:.4rem;
}
#edelstahl-seo .tick-list{
  margin-top:.3rem;
}

/* =========================================
   Landingpage Aluminium
   ========================================== */

/* Hero Aluminium */
.hero-aluminium .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-aluminium .overlay .container{
  max-width:960px;
}
.hero-aluminium .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-aluminium .muted{
  max-width:520px;
}
.hero-aluminium .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#aluminium-intro h2{
  margin-bottom:.4rem;
}
#aluminium-intro .info-grid{
  margin-top:.4rem;
}

/* Tabellen: Blechdicken & Formate */
#aluminium-parameter .table-aluminium{
  margin-top:.4rem;
}
#aluminium-parameter .table-aluminium th{
  white-space:nowrap;
}
#aluminium-parameter .table-aluminium td{
  vertical-align:top;
}

/* Legierungen */
#aluminium-sortiment .info-grid{
  margin-top:.6rem;
}
#aluminium-sortiment .card .body{
  padding:14px 16px 16px;
}

/* Beispielprojekt */
#aluminium-projekt .info-grid{
  gap:14px;
}

/* SEO-Text */
#aluminium-seo .info-grid{
  margin-top:.4rem;
}
#aluminium-seo .tick-list{
  margin-top:.3rem;
}

/* =========================================
   Landingpage Messing
   ========================================== */

/* Hero Messing */
.hero-messing .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-messing .overlay .container{
  max-width:960px;
}
.hero-messing .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-messing .muted{
  max-width:520px;
}
.hero-messing .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#messing-intro h2{
  margin-bottom:.4rem;
}
#messing-intro .info-grid{
  margin-top:.4rem;
}
#messing-intro .back-link{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.9rem;
  margin-bottom:.2rem;
}
#messing-intro .back-link:hover{
  text-decoration:underline;
}

/* Tabellen: Blechdicken & Formate */
#messing-parameter .table-messing{
  margin-top:.4rem;
}
#messing-parameter .table-messing th{
  white-space:nowrap;
}
#messing-parameter .table-messing td{
  vertical-align:top;
}

/* Messingqualitäten */
#messing-sortiment .info-grid{
  margin-top:.6rem;
}
#messing-sortiment .card .body{
  padding:14px 16px 16px;
}

/* Beispielprojekt */
#messing-projekt .info-grid{
  gap:14px;
}

/* SEO-Text */
#messing-seo .info-grid{
  margin-top:.4rem;
}
#messing-seo .tick-list{
  margin-top:.3rem;
}

/* =========================================
   Landingpage Kupfer
   ========================================== */

/* Hero Kupfer */
.hero-kupfer .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-kupfer .overlay .container{
  max-width:960px;
}
.hero-kupfer .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-kupfer .muted{
  max-width:520px;
}
.hero-kupfer .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#kupfer-intro h2{
  margin-bottom:.4rem;
}
#kupfer-intro .info-grid{
  margin-top:.4rem;
}
#kupfer-intro .back-link{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.9rem;
  margin-bottom:.2rem;
}
#kupfer-intro .back-link:hover{
  text-decoration:underline;
}

/* Tabellen: Blechdicken & Formate */
#kupfer-parameter .table-kupfer{
  margin-top:.4rem;
}
#kupfer-parameter .table-kupfer th{
  white-space:nowrap;
}
#kupfer-parameter .table-kupfer td{
  vertical-align:top;
}

/* Kupferqualitäten */
#kupfer-sortiment .info-grid{
  margin-top:.6rem;
}
#kupfer-sortiment .card .body{
  padding:14px 16px 16px;
}

/* Beispielprojekt */
#kupfer-projekt .info-grid{
  gap:14px;
}

/* SEO-Text */
#kupfer-seo .info-grid{
  margin-top:.4rem;
}
#kupfer-seo .tick-list{
  margin-top:.3rem;
}

/* =========================================
   Landingpage Weitere Materialien
   ========================================== */

/* Hero Weitere Materialien */
.hero-weitere-materialien .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-weitere-materialien .overlay .container{
  max-width:960px;
}
.hero-weitere-materialien .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-weitere-materialien .muted{
  max-width:520px;
}
.hero-weitere-materialien .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#weitere-intro h2{
  margin-bottom:.4rem;
}
#weitere-intro .info-grid{
  margin-top:.4rem;
}
#weitere-intro .back-link{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.9rem;
  margin-bottom:.2rem;
}
#weitere-intro .back-link:hover{
  text-decoration:underline;
}

/* Maschinenblock */
#weitere-maschine .info-grid{
  margin-top:.4rem;
}
#weitere-maschine .stat-grid{
  margin-top:14px;
}

/* Materialgruppen */
#weitere-materialgruppen .card .body{
  padding:14px 16px 16px;
}

/* Beispielprojekt */
#weitere-projekt .info-grid{
  gap:14px;
}

/* Hinweise */
#weitere-hinweise .info-grid{
  margin-top:.4rem;
}
#weitere-hinweise .tick-list{
  margin-top:.3rem;
}

/* FAQ */
#weitere-faq .faq-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#weitere-faq details{
  border-radius:var(--radius);
  border:1px solid var(--soft-2);
  padding:8px 10px;
  background:#fff;
}
#weitere-faq summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:20px;
}
#weitere-faq summary::-webkit-details-marker{
  display:none;
}
#weitere-faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
}
#weitere-faq details[open] summary::after{
  content:"–";
}
#weitere-faq details p{
  margin:.35rem 0 .1rem;
  font-size:.95rem;
}

/* =========================================
   Landingpage Kanäle & Formteile
   ========================================== */

/* Hero */
.hero-kanaele .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-kanaele .overlay .container{
  max-width:960px;
}
.hero-kanaele .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-kanaele .muted{
  max-width:520px;
}
.hero-kanaele .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#kanaele-intro h2{
  margin-bottom:.4rem;
}
#kanaele-intro .info-grid{
  margin-top:.4rem;
}

/* Einsatzbereiche Hover */
#kanaele-einsatz .feature-grid{
  margin-top:12px;
}
#kanaele-einsatz .feature{
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
#kanaele-einsatz .feature:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  background:#fff;
}

/* Typische Abmessungen & Formteile */
#kanaele-daten .table-kanaele{
  margin-top:.4rem;
}
#kanaele-daten .table-kanaele th{
  white-space:nowrap;
}
#kanaele-daten .table-kanaele td{
  vertical-align:top;
}
#kanaele-daten .sub-links .btn-sm{
  padding-inline:10px;
  padding-block:4px;
  font-size:.85rem;
}

/* Dichtheit & Leistungen */
#kanaele-dichtheit .card .body,
#kanaele-services .card .body{
  padding:14px 16px 16px;
}

/* Slider Kanäle */
#kanaele-galerie .kanaele-slider{
  position:relative;
  max-width:960px;
  margin:0 auto;
}
#kanaele-galerie .kanaele-slide{
  display:none;
}
#kanaele-galerie .kanaele-slide.is-active{
  display:block;
}
#kanaele-galerie .kanaele-slide figcaption{
  margin-top:.4rem;
  font-size:.95rem;
  color:var(--muted);
}

/* Pfeile */
#kanaele-galerie .kanaele-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border:0;
  width:38px;
  height:38px;
  border-radius:var(--radius);
  background:rgba(0,0,0,.45);
  color:#fff;
  cursor:pointer;
}
#kanaele-galerie .kanaele-prev{ left:10px; }
#kanaele-galerie .kanaele-next{ right:10px; }

/* Dots */
#kanaele-galerie .kanaele-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  display:flex;
  gap:6px;
  justify-content:center;
}
#kanaele-galerie .kanaele-dots button{
  width:9px;
  height:9px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.6);
  cursor:pointer;
}
#kanaele-galerie .kanaele-dots button.is-active,
#kanaele-galerie .kanaele-dots button[aria-selected="true"]{
  background:#fff;
}

/* Ansprechpartner Layout wiederverwenden */
#kanaele-ansprechpartner .contact-body{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
#kanaele-ansprechpartner .contact-photo{
  flex:0 0 80px;
  width:80px;
  height:80px;
  border-radius:999px;
  overflow:hidden;
}
#kanaele-ansprechpartner .contact-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
#kanaele-ansprechpartner .contact-copy p{
  margin:.15rem 0;
}
@media (max-width:640px){
  #kanaele-ansprechpartner .contact-body{
    flex-direction:column;
  }
}

/* =========================================
   Landingpage Kanäle (Detail)
   ========================================== */

/* Hero */
.hero-kanaele-detail .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-kanaele-detail .overlay .container{
  max-width:960px;
}
.hero-kanaele-detail .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-kanaele-detail .muted{
  max-width:520px;
}
.hero-kanaele-detail .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#kanaele-page-intro h2{
  margin-bottom:.4rem;
}
#kanaele-page-intro .info-grid{
  margin-top:.4rem;
}
#kanaele-page-intro .back-link{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.9rem;
  margin-bottom:.2rem;
}
#kanaele-page-intro .back-link:hover{
  text-decoration:underline;
}

/* Standardabmessungen */
#kanaele-standard .table-kanaele-detail{
  margin-top:.4rem;
}
#kanaele-standard .table-kanaele-detail th{
  white-space:nowrap;
}
#kanaele-standard .table-kanaele-detail td{
  vertical-align:top;
}
#kanaele-standard .stat-grid{
  margin-top:14px;
}

/* Materialien */
#kanaele-materialien .table-kanaele-detail{
  margin-top:.4rem;
}
#kanaele-materialien .table-kanaele-detail th{
  white-space:nowrap;
}
#kanaele-materialien .table-kanaele-detail td{
  vertical-align:top;
}

/* Ausführung & Dichtheit */
#kanaele-ausfuehrung .card .body{
  padding:14px 16px 16px;
}

/* Beispielprojekt */
#kanaele-projekt .info-grid{
  gap:14px;
}

/* SEO-Block */
#kanaele-seo .info-grid{
  margin-top:.4rem;
}
#kanaele-seo .tick-list{
  margin-top:.3rem;
}

/* Downloads */
#kanaele-downloads .download-body{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
#kanaele-downloads .download-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft);
  font-size:1.4rem;
}
@media (max-width:640px){
  #kanaele-downloads .download-body{
    flex-direction:column;
  }
}

/* =========================================
   Landingpage Formteile (Detail)
   ========================================== */

/* Hero */
.hero-formteile-detail .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-formteile-detail .overlay .container{
  max-width:960px;
}
.hero-formteile-detail .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-formteile-detail .muted{
  max-width:520px;
}
.hero-formteile-detail .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#formteile-intro h2{
  margin-bottom:.4rem;
}
#formteile-intro .info-grid{
  margin-top:.4rem;
}
#formteile-intro .back-link{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.9rem;
  margin-bottom:.2rem;
}
#formteile-intro .back-link:hover{
  text-decoration:underline;
}

/* Formteil-Arten */
#formteile-arten .card .body{
  padding:14px 16px 16px;
}

/* Geometrie & Maße */
#formteile-geometrie .table-formteile{
  margin-top:.4rem;
}
#formteile-geometrie .table-formteile th{
  white-space:nowrap;
}
#formteile-geometrie .table-formteile td{
  vertical-align:top;
}

/* Materialien & Dichtheit */
#formteile-materialien .card .body{
  padding:14px 16px 16px;
}

/* Beispielprojekt */
#formteile-projekt .info-grid{
  gap:14px;
}

/* SEO-Block */
#formteile-seo .info-grid{
  margin-top:.4rem;
}
#formteile-seo .tick-list{
  margin-top:.3rem;
}

/* Downloads */
#formteile-downloads .download-body{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
#formteile-downloads .download-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft);
  font-size:1.4rem;
}
@media (max-width:640px){
  #formteile-downloads .download-body{
    flex-direction:column;
  }
}

/* =========================================
   Landingpage Sondermaße (Detail)
   ========================================== */

/* Hero */
.hero-sondermasse-detail .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-sondermasse-detail .overlay .container{
  max-width:960px;
}
.hero-sondermasse-detail .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-sondermasse-detail .muted{
  max-width:520px;
}
.hero-sondermasse-detail .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#sondermasse-intro h2{
  margin-bottom:.4rem;
}
#sondermasse-intro .info-grid{
  margin-top:.4rem;
}
#sondermasse-intro .back-link{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  font-size:.9rem;
  margin-bottom:.2rem;
}
#sondermasse-intro .back-link:hover{
  text-decoration:underline;
}

/* Bereiche */
#sondermasse-bereiche .card .body{
  padding:14px 16px 16px;
}

/* Technische Grenzen & Beispiele */
#sondermasse-technisch .table-sondermasse{
  margin-top:.4rem;
}
#sondermasse-technisch .table-sondermasse th{
  white-space:nowrap;
}
#sondermasse-technisch .table-sondermasse td{
  vertical-align:top;
}
#sondermasse-technisch .stat-grid{
  margin-top:14px;
}

/* Planung / Steps */
#sondermasse-planing .steps{ /* fallback falls vertippt, eigentl. id sondermasse-planung */
  margin-top:16px;
}
#sondermasse-planung .steps{
  margin-top:16px;
}
#sondermasse-planung .steps li h3{
  margin-top:0;
  margin-bottom:.1rem;
}
#sondermasse-planung .steps li p{
  margin:.15rem 0 .3rem;
}

/* Beispielprojekt */
#sondermasse-projekt .info-grid{
  gap:14px;
}

/* SEO-Block */
#sondermasse-seo .info-grid{
  margin-top:.4rem;
}
#sondermasse-seo .tick-list{
  margin-top:.3rem;
}

/* Downloads */
#sondermasse-downloads .download-body{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
#sondermasse-downloads .download-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--soft);
  font-size:1.4rem;
}
@media (max-width:640px){
  #sondermasse-downloads .download-body{
    flex-direction:column;
  }
}

/* =========================================
   Landingpage Planung & Projektleitung
   ========================================== */

/* Hero */
.hero-planung .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-planung .overlay .container{
  max-width:960px;
}
.hero-planung .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-planung .muted{
  max-width:520px;
}
.hero-planung .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#planung-intro h2{
  margin-bottom:.4rem;
}
#planung-intro .info-grid{
  margin-top:.4rem;
}

/* Leistungen */
#planung-leistungen .card .body{
  padding:14px 16px 16px;
}
#planung-leistungen .stat-grid{
  margin-top:14px;
}

/* Vorgehen / Steps */
#planung-vorgehen .steps{
  margin-top:16px;
}
#planung-vorgehen .steps li h3{
  margin-top:0;
  margin-bottom:.1rem;
}
#planung-vorgehen .steps li p{
  margin:.15rem 0 .3rem;
}

/* Projektleitung */
#planung-projektleitung .card .body{
  padding:14px 16px 16px;
}

/* Zeichnungen */
#planung-zeichnungen .info-grid{
  margin-top:.4rem;
}

/* Referenzen */
#planung-referenzen .card .body{
  padding:14px 16px 16px;
}

/* FAQ */
#planung-faq .faq-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#planung-faq details{
  border-radius:var(--radius);
  border:1px solid var(--soft-2);
  padding:8px 10px;
  background:#fff;
}
#planung-faq summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:20px;
}
#planung-faq summary::-webkit-details-marker{
  display:none;
}
#planung-faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
}
#planung-faq details[open] summary::after{
  content:"–";
}
#planung-faq details p{
  margin:.35rem 0 .1rem;
  font-size:.95rem;
}

/* =========================================
   Landingpage Wartung & Montage
   ========================================== */

/* Hero */
.hero-wartung .overlay{
  align-items:flex-end;
  padding-bottom:42px;
}
.hero-wartung .overlay .container{
  max-width:960px;
}
.hero-wartung .badge{
  margin-bottom:.4rem;
  background:rgba(12,110,120,.85);
  color:#fff;
  border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.hero-wartung .muted{
  max-width:520px;
}
.hero-wartung .meta{
  margin-top:.2rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}

/* Intro */
#wm-intro h2{
  margin-bottom:.4rem;
}
#wm-intro .info-grid{
  margin-top:.4rem;
}

/* Leistungsbereiche */
#wm-bereiche .card .body{
  padding:14px 16px 16px;
}
#wm-bereiche .stat-grid{
  margin-top:14px;
}

/* Wartung: Einmal / Vertrag */
#wm-wartung .info-grid{
  margin-top:.4rem;
}

/* Montage */
#wm-montage .info-grid{
  margin-top:.4rem;
}
#wm-montage .card .body{
  padding:14px 16px 16px;
}

/* Notdienst */
#wm-notdienst .info-grid{
  margin-top:.4rem;
}
#wm-notdienst .hotline-card .body{
  border-left:3px solid var(--accent);
}

/* Referenzen */
#wm-referenzen .card .body{
  padding:14px 16px 16px;
}

/* FAQ */
#wm-faq .faq-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#wm-faq details{
  border-radius:var(--radius);
  border:1px solid var(--soft-2);
  padding:8px 10px;
  background:#fff;
}
#wm-faq summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:20px;
}
#wm-faq summary::-webkit-details-marker{
  display:none;
}
#wm-faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
}
#wm-faq details[open] summary::after{
  content:"–";
}
#wm-faq details p{
  margin:.35rem 0 .1rem;
  font-size:.95rem;
}

/* =========================================
   FAQ auf Produkte & Services
   ========================================== */
#faq .faq-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#faq details{
  border-radius:var(--radius);
  border:1px solid var(--soft-2);
  padding:8px 10px;
  background:#fff;
}
#faq summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:20px;
}
#faq summary::-webkit-details-marker{
  display:none;
}
#faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
}
#faq details[open] summary::after{
  content:"–";
}
#faq details p{
  margin:.35rem 0 .1rem;
  font-size:.95rem;
}

/* Hover-Randfarbe der Karten auf Akzentgelb setzen */
.tile:hover,
.card:hover{
  border-color:var(--accent);
}

/* =========================================
   Globale Akzent-Hover für Badges & FAQs
   ========================================== */

/* Badges sanft animieren */
.badge,
.badge-team,
.badge-flag{
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
}

/* Badges: Rahmen im Akzentgelb aufleuchten */
.badge:hover,
.badge-team:hover,
.badge-flag:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(0,0,0,.03);
}

/* FAQ-/Accordion-Zeilen (alle <details>) */
details{
  transition:border-color .15s ease, background-color .15s ease;
}
details summary{
  transition:color .15s ease;
}

/* Hover & geöffnet: Text in Akzentfarbe, Rand leicht betont */
details:hover{
  border-color:var(--accent);
}
details:hover summary,
details[open] summary{
  color:var(--accent);
}

/* =========================================
   Globale Responsive-Tweaks
   ========================================== */

/* Allgemein etwas enger auf kleineren Screens */
@media (max-width: 900px){
  .container{
    padding-inline:16px;
  }
}

/* Standard-Layouts auf 1 Spalte reduzieren */
@media (max-width: 700px){
  /* Info-Layouts (Text + Bild nebeneinander) */
  .info-grid{
    grid-template-columns:1fr !important;
  }

  /* Medialist (Bild links, Text rechts) – z. B. Produkte-Seite */
  .medialist{
    grid-template-columns:1fr;
  }

  /* Generische Card-Grids (für viele neuen Landingpages) */
  .card-grid{
    grid-template-columns:1fr;
  }

  /* Schwerpunkte auf der Startseite: 1 Spalte, saubere Kacheln */
  #schwerpunkte .grid{
    grid-template-columns:1fr;
  }
  #schwerpunkte .tile .body{
    padding:12px 14px 14px;
  }
}

/* Stat-Grid für Kennzahlen (z. B. auf Laser-/Kanäle-/Wartungsseiten) */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.stat-grid .stat{
  font-weight:900;
  font-size:1.4rem;
  color:var(--brand);
  display:flex;
  align-items:baseline;
  gap:2px;
}
.stat-grid .unit{
  font-size:.9rem;
}
.stat-grid .label{
  display:block;
  margin-top:2px;
  font-size:.9rem;
  color:var(--muted);
}

@media (max-width:900px){
  .stat-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:640px){
  .stat-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================
   Startseite – Schwerpunkte auf Mobile
   ========================================== */

/* Kachel-Bilder bei Schwerpunkten auf kleineren Screens etwas flacher */
@media (max-width: 680px){
  #schwerpunkte .tile .media-16x10::before{
    padding-top:52%; /* vorher 62.5% → weniger Höhe */
  }

  /* Kachel-Inhalt etwas kompakter */
  #schwerpunkte .tile .body{
    padding:10px 12px 14px;
  }
}

html,
body{
  max-width:100%;
  overflow-x:hidden;
}

/* =========================================
   Tabellen – mobil scrollbar machen
   ========================================== */

.table-lite{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--soft-2);
  border-radius:var(--radius);
  background:#fff;

  /* Neu: eigener Scrollbereich */
  display:block;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

/* Zellen – Basisformatierung beibehalten */
.table-lite thead,
.table-lite tbody,
.table-lite tr{
  width:100%;
}

.table-lite th,
.table-lite td{
  padding:10px;
  border-bottom:1px solid var(--soft-2);
  text-align:left;
}

/* Auf sehr schmalen Screens dürfen Texte umbrechen,
   damit die Tabelle nicht endlos breit wird */
@media (max-width:600px){
  .table-lite th,
  .table-lite td{
    white-space:normal;
    word-break:break-word;
  }
}

/* =========================================
   Startseite – Schwerpunkte Mobile-Fix
   ========================================== */

@media (max-width: 680px){
  /* Kacheln nicht mehr als Flex-Container behandeln */
  #schwerpunkte .tile{
    display:block;
    height:auto;
  }
  #schwerpunkte .tile .body{
    margin-top:0;
  }
}

/* =========================================
   Cookie-Banner (aus main.js)
   ========================================== */

.cc-banner{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  background:rgba(12,17,28,.96); /* dunkler Hintergrund */
  color:#fff;
  font-size:.9rem;
}

.cc-inner{
  max-width:1100px;
  margin:8px auto;
  padding:10px 14px;
}

.cc-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:flex-start;
  justify-content:space-between;
}

.cc-title{
  font-weight:700;
  margin-bottom:4px;
}

.cc-text a{
  color:var(--accent);
  text-decoration:underline;
}

.cc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Buttons im Banner */
.cc-btn,
.cc-accept{
  border-radius:999px;
  padding:6px 14px;
  font-size:.9rem;
  border:1px solid rgba(255,255,255,.2);
  cursor:pointer;
  white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}

.cc-btn{
  background:transparent;
  color:#fff;
}

.cc-btn:hover{
  border-color:var(--accent);
}

.cc-accept{
  background:var(--accent);
  border-color:var(--accent);
  color:#000;
  font-weight:600;
}

.cc-accept:hover{
  filter:brightness(1.05);
}

/* Mobile: einspaltig, etwas mehr Abstand */
@media (max-width:600px){
  .cc-inner{
    padding:12px;
  }
  .cc-row{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================================
   Startseite – Schwerpunkte: Mobile komplett entstretchen
   ========================================== */

@media (max-width: 768px){
  /* Grid verhalten wir wie eine einfache Spalte */
  #schwerpunkte .grid{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  /* Jede Kachel nur so hoch wie ihr Inhalt */
  #schwerpunkte .tile{
    display:block !important;
    height:auto !important;
  }

  /* Text-Block direkt unter dem Bild, kein Auto-Push */
  #schwerpunkte .tile .body{
    margin-top:0 !important;
  }
}

/* FAQ / Accordion allgemein (#faq-Bereich) */
#faq .faq-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#faq details{
  border-radius:var(--radius);
  border:1px solid var(--soft-2);
  padding:8px 10px;
  background:#fff;
}
#faq summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:20px;
  transition:color .15s ease;
}
#faq summary::-webkit-details-marker{
  display:none;
}
#faq summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
}
#faq details[open] summary::after{
  content:"–";
}
#faq details p{
  margin:.35rem 0 .1rem;
  font-size:.95rem;
}

/* optional: Hover / Akzentfarbe */
#faq details:hover{
  border-color:var(--accent);
}
#faq details:hover summary,
#faq details[open] summary{
  color:var(--accent);
}

/* =========================================
   Kontaktformular
   ========================================== */

.contact-form{
  max-width:800px;
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Zwei-Spalten-Reihen */
.contact-form .f{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 16px;
}

/* Einspaltige Reihen (z. B. Nachricht) */
.contact-form .f-1{
  display:block;
}

/* Felder */
.contact-form .field{
  display:flex;
  flex-direction:column;
  gap:3px;
}

/* Label */
.contact-form .field label{
  font-size:.9rem;
  font-weight:600;
  color:var(--muted);
}

/* Inputs, Select, Textarea */
.contact-form .field input,
.contact-form .field select,
.contact-form .field textarea{
  font:inherit;
  border-radius:var(--radius);
  border:1px solid var(--soft-2);
  padding:8px 10px;
  background:#fff;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
  width:100%;
}

/* Placeholder etwas heller */
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder{
  color:#9ca3af;
}

/* Fokus-Zustand */
.contact-form .field input:focus,
.contact-form .field select:focus,
.contact-form .field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(231,170,27,.35);
}

/* Textarea */
.contact-form textarea{
  resize:vertical;
  min-height:120px;
}

/* Checkbox-Reihe */
.contact-form .checkbox{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.85rem;
  color:var(--muted);
}
.contact-form .checkbox input{
  margin-top:3px;
}

/* Aktionen unter dem Formular */
.contact-form .actions{
  margin-top:10px;
}

/* Mobile: alles einspaltig */
@media (max-width:700px){
  .contact-form .f{
    grid-template-columns:1fr;
  }
}

/* File-Inputs im Formular etwas hübscher */
.contact-form .field input[type="file"]{
  padding:6px 10px;
  background:#fff;
  cursor:pointer;
}

/* Hinweisboxen für Formulare (Kontakt / Bewerbung) */
.notice{
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 8px 0 12px;
  font-size: .9rem;
}

.notice-success{
  background: #ecfdf5;
  border: 1px solid var(--accent);
  color: #166534;
}

/* =========================================
   Startseite – Schwerpunkte prominent
   ========================================== */

.schwerpunkte-main{
  padding-top:32px;
  padding-bottom:32px;
}

.schwerpunkte-main > .container > .badge{
  margin-bottom:6px;
}

.schwerpunkte-main h2{
  margin-bottom:4px;
  font-size:1.8rem;
}

.schwerpunkte-main .grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

/* Kacheln etwas kräftiger darstellen */
.schwerpunkte-main .tile{
  border-radius:20px;
  box-shadow:var(--shadow-md);
}

/* Inhalt etwas großzügiger */
.schwerpunkte-main .tile .body{
  padding:12px 16px 16px;
}

.schwerpunkte-main .tile h3{
  font-size:1.2rem;
  margin-bottom:4px;
}

/* Mobile-Fix: untereinander, aber trotzdem präsent */
@media (max-width:900px){
  .schwerpunkte-main .grid{
    grid-template-columns:1fr;
  }
}

/* =========================================
   Laser – Kennzahlen-Block
   ========================================== */

.laser-stats-section{
  padding:8px 0 24px;
}

.laser-stats-section .stat-grid{
  margin-top:8px;
  gap:16px;
  list-style:none;      /* KEINE Aufzählungspunkte */
  padding-left:0;
}

.laser-stats-section .stat-grid li{
  background:#ffffff;   /* weiß statt gelb */
  border:1px solid var(--accent);
  border-radius:18px;
  padding:12px 14px;
  text-align:center;
}

.laser-stats-section .stat{
  font-size:1.4rem;
  font-weight:700;
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  color:#111827;        /* Zahlen dunkel */
}

.laser-stats-section .stat .unit{
  font-size:.95rem;
  color:#111827;
}

.laser-stats-section .label{
  display:block;
  margin-top:4px;
  font-size:.85rem;
  color:#4b5563;        /* neutrales Grau */
}

@media (max-width:700px){
  .laser-stats-section .stat-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================
   Laser – Materialkarten
   ========================================== */

.material-card{
  display:block;
  height:100%;
  border-radius:var(--radius-lg, 18px);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background-color .15s ease;
}

.material-card .body{
  padding:12px 14px 14px;
}

.material-head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}

/* Basis-Icon */
.material-icon{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.9rem;
  background:var(--soft-2);
  color:#111827;
}

/* Hover-Effekt für komplette Karte */
.material-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent);
  background:#fffdf5;
}

/* CTA-Zeile unten als „Button“ */
.material-cta{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
  font-size:.9rem;
  color:var(--accent);
}

.material-arrow{
  font-size:1.1rem;
  transition:transform .15s ease;
}

.material-card:hover .material-arrow{
  transform:translateX(4px);
}

/* Farblogik je Material */
.material-stahl .material-icon{
  background:#4b5563;   /* dunkelgrau-stahlig */
  color:#f9fafb;
}

.material-edelstahl .material-icon{
  background:#9ca3af;   /* Edelstahl-look */
  color:#111827;
}

.material-aluminium .material-icon{
  background:#e5e7eb;   /* helles Alu */
  color:#111827;
  border:1px solid #9ca3af;
}

.material-messing .material-icon{
  background:#eab308;   /* Messing / Goldton */
  color:#111827;
}

.material-kupfer .material-icon{
  background:#b45309;   /* Kupferbraun */
  color:#fefce8;
}

.material-weitere .material-icon{
  background:#0ea5e9;   /* „neutral“ Blau für Rest */
  color:#f9fafb;
}

/* =========================================
   Laser – Materialkarten
   ========================================== */

.material-card{
  display:block;
  height:100%;
  border-radius:18px;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background-color .15s ease;
}

.material-card .body{
  padding:12px 14px 14px;
}

.material-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
}

/* Basis-Icon – immer sichtbar */
.material-icon{
  width:40px;
  height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.85rem;
  background:#f9fafb;
  color:#111827;
  border:2px solid rgba(15,23,42,.08);
}

/* Hover-Effekt für komplette Karte */
.material-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--accent);
  background:#fffdf5;
}

/* CTA-Zeile unten */
.material-cta{
  margin-top:10px;
}

/* „Button“ im Kasten */
.material-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:#f3f4f6;
  border:1px solid transparent;
  font-weight:600;
  font-size:.9rem;
  color:#111827;
  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.material-arrow{
  font-size:1.1rem;
  transition:transform .15s ease;
}

/* Button-Highlight beim Hover der Karte */
.material-card:hover .material-btn{
  background:var(--accent);
  border-color:var(--accent);
  color:#111827;
}

.material-card:hover .material-btn .material-arrow{
  transform:translateX(4px);
}

/* Farblogik je Material */
.material-stahl .material-icon{
  background:#111827;
  color:#f9fafb;
  border-color:transparent;
}

.material-edelstahl .material-icon{
  background:#9ca3af;
  color:#111827;
  border-color:transparent;
}

.material-aluminium .material-icon{
  background:#e5e7eb;
  color:#111827;
  border-color:#d1d5db;
}

.material-messing .material-icon{
  background:#fbbf24;  /* Messing / Goldton */
  color:#111827;
  border-color:transparent;
}

.material-kupfer .material-icon{
  background:#f97316;  /* Kupfer / Orangebraun */
  color:#111827;
  border-color:transparent;
}

.material-weitere .material-icon{
  background:#0ea5e9;  /* Blau für „weitere“ */
  color:#f9fafb;
  border-color:transparent;
}

/* =========================================================
   Header: Hauptmenü nicht ganz rechts, sondern direkt neben dem Logo
   (nur Desktop / größere Screens)
   ========================================================= */
@media (min-width: 769px) {
  .site-header .header-inner{
    justify-content: flex-start !important;
    gap: 24px; /* Abstand zwischen Logo und Menü */
  }

  /* Falls die Nav per margin-left:auto / flex auf ganz rechts gedrückt wird */
  .site-header .nav{
    margin-left: 0 !important;
    flex: 0 0 auto !important;
  }

  /* Falls die UL intern auf "rechts" ausgerichtet ist */
  .site-header .nav > ul{
    justify-content: flex-start !important;
  }
}

/* =========================================================
   Footer: "Einstellungen" (Cookie) exakt wie die anderen Links stylen
   ========================================================= */
footer .links button[data-open-consent]{
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  display: inline;
  cursor: pointer;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
}

footer .links button[data-open-consent]:hover,
footer .links button[data-open-consent]:focus-visible{
  text-decoration: underline;
}

/* =========================================================
   DIT Vorteile-Komponente (einheitlich auf allen Seiten)
   Bitte ganz unten in assets/css/dit-styles-v2.css einfügen
   ========================================================= */

.page-hero{ position: relative; z-index: 1; }
.dit-benefits{
  position: relative;
  z-index: 2;                /* verhindert "Überlappen" durch den Hero */
  background: #f3f5f7;       /* einheitlicher Hintergrund */
  padding: 32px 0;
}
.dit-benefits .container > h2{
  margin: 0 0 16px;
}

/* Einheitliche Kartenbreite (egal ob 3 oder 4 Boxen) */
.dit-benefits-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.dit-benefits-grid > li{
  flex: 1 1 240px;
  max-width: 290px;  /* sorgt dafür, dass Boxen nicht "riesig" werden */
}

.dit-benefit-card{
  background: #fff;
  border-radius: 14px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 25px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  min-height: 170px;
}

.dit-benefit-kicker{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.60);
  margin: 0 0 8px;
}

.dit-benefit-title{
  margin: 0 0 10px;
  font-size: 16px;
}

.dit-benefit-stat{
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2px 0 10px;
  min-height: 36px; /* gleiche Höhe auch ohne Zahl */
}

.dit-benefit-number{ font: inherit; }
.dit-benefit-suffix{
  font-size: 22px;
  font-weight: 800;
  margin-left: 4px;
}

.dit-benefit-text{
  margin: 0;
  margin-top: auto; /* Text sitzt unten -> gleicher Aufbau */
}

/* Timeline-Linie links neben den Jahreszahlen */
.timeline .tl-acc{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 56px; /* Platz links für Linie + Punkt */
}

/* Vertikale Linie */
.timeline .tl-acc::before{
  content: "";
  position: absolute;
  left: 20px;           /* X-Position der Linie */
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--timeline-line, rgba(0,0,0,.12));
  border-radius: 2px;
}

/* Punkt je Eintrag */
.timeline .tl-item > details > summary{
  position: relative;
}

.timeline .tl-item > details > summary::before{
  content: "";
  position: absolute;
  left: -44px;          /* Punkt auf die Linie setzen */
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--timeline-dot, #fff);
  border: 2px solid var(--timeline-line, rgba(0,0,0,.25));
}

/* Optional: Jahr | Titel in zwei Spalten */
.timeline .tl-item > details > summary{
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  column-gap: 14px;
  align-items: center;
}

.timeline .tl-item time{
  font-variant-numeric: tabular-nums;
}

/* Timeline: Linie + Punkte (robust, wird nicht durch overflow:hidden abgeschnitten) */
.timeline{
  position: relative;
  overflow: visible;
}

.timeline .tl-acc{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 56px; /* Platz links für Linie + Punkt */
  overflow: visible;
}

/* Linie */
.timeline .tl-acc::before{
  content: "";
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0,0,0,.12);
  border-radius: 2px;
}

/* Punkt pro Eintrag (am LI, nicht am summary!) */
.timeline .tl-item{
  position: relative;
}

.timeline .tl-item::before{
  content: "";
  position: absolute;
  left: 14px;          /* auf die Linie setzen */
  top: 22px;           /* Höhe des summary-Bereichs */
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid rgba(0,0,0,.25);
  box-sizing: border-box;
  z-index: 2;
}

/* Timeline: Linie + Punkte exakt übereinander (grau) */
.timeline .tl-acc{
  --tl-gutter: 56px;   /* muss zu deinem padding-left passen */
  --tl-line-x: 20px;   /* X-Position der Linie innerhalb der UL */
  --tl-dot: 12px;      /* Punktgröße */
  --tl-dot-r: 6px;     /* halbe Punktgröße */

  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--tl-gutter);
  overflow: visible;
}

/* Linie */
.timeline .tl-acc::before{
  content: "";
  position: absolute;
  left: var(--tl-line-x);
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0,0,0,.12);
  border-radius: 2px;
  z-index: 1;
}

/* Punkte: auf die Linie setzen (wichtig: negative left!) */
.timeline .tl-item{
  position: relative;
}

.timeline .tl-item::before{
  content: "";
  position: absolute;
  left: calc(var(--tl-line-x) - var(--tl-gutter) - var(--tl-dot-r)); /* Punkt-Mitte = Linie */
  top: 22px;                       /* ggf. leicht anpassen */
  width: var(--tl-dot);
  height: var(--tl-dot);
  border-radius: 999px;
  background: transparent;         /* bleibt “grau/neutral” */
  border: 2px solid rgba(0,0,0,.25);
  box-sizing: border-box;
  z-index: 2;
}

/* Falls noch ein alter Punkt am summary hängt: deaktivieren */
.timeline .tl-item > details > summary::before{
  content: none !important;
}