/* ─────────────────────────────────────────────────────────────────────────
   MAHA Innovationen
   Design-Tokens 1:1 aus www.maha.de uebernommen (Roboto 300, #2457A0,
   #3B3B3B, #EFEFEF, Container 1240px, keine Radien, Versalien in Headlines).
   maha.de hat keinen Dunkelmodus — diese Seite deshalb bewusst auch nicht.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --blue:#2457A0;          /* Primaerblau, maha.de */
  --blue-dark:#1C4480;     /* Hover */
  --red:#E3000F;           /* CI-Rot, sparsam */
  --green:#006A4E;         /* nur funktional (Status) */
  --ink:#3B3B3B;           /* Grundtext + Fussbereich */
  --ink-soft:#6B6B6B;      /* Sekundaertext */
  --grey:#EFEFEF;          /* Flaechen */
  --grey-2:#E4E4E4;
  --line:#CCCCCC;          /* Linien */
  --paper:#FFFFFF;
  --on-dark:#FFFFFF;
  --on-dark-soft:rgba(255,255,255,.82);
  --sans:Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  --wrap:1240px;
  --gut:15px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:300 16px/1.5 var(--sans);
}
img{max-width:100%; display:block}
[hidden]{display:none!important}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
h1,h2,h3{margin:0; font-weight:300; text-transform:uppercase; text-wrap:balance}
h1{font-size:40px; line-height:48px}
h2{font-size:28px; line-height:33.6px; color:var(--blue)}
h3{font-size:28px; line-height:33.6px; color:var(--blue)}
p{margin:0}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}

/* ── Testbanner ──────────────────────────────────────────────────────── */
.testbar{background:var(--red); color:#fff; font-size:14px; line-height:1.4}
.testbar .wrap{display:flex; flex-wrap:wrap; gap:4px 14px; padding-block:10px; align-items:baseline}
.testbar b{font-weight:700; text-transform:uppercase; font-size:12px;
  background:rgba(0,0,0,.3); padding:3px 8px; flex:none}

/* ── Kopf / Navigation ───────────────────────────────────────────────── */
.head{background:var(--paper); border-bottom:1px solid var(--line);
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:20}
.head .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding-block:24px}
.head nav{display:flex; flex-wrap:wrap; align-items:center}
.head nav a{color:var(--blue); text-decoration:none; font-size:19.2px;
  font-weight:300; text-transform:uppercase; padding:8px 24px; line-height:1.25}
.head nav a + a{border-left:1px solid var(--line)}
.head nav a:hover{color:var(--blue-dark); text-decoration:underline}
.head nav a.on{font-weight:700}
/* Logo: oben gross, nach dem Scrollen kompakt — wie maha.de.
   Die Innenabstaende bleiben bei 24px, nur das Logo schrumpft; dadurch
   geht die Leiste von ~116px auf 82px zurueck. */
a.logo{flex:none; width:100px; display:block; transition:width .4s ease}
a.logo img{width:100%; height:auto; display:block}
.head.compact a.logo{width:50px}

/* ── Seitenkopf: Bild + blauer Textkasten (maha.de-Muster) ───────────── */
.pagehead{position:relative; background:var(--blue); color:var(--on-dark); overflow:hidden}
.pagehead .shot{position:absolute; left:0; top:0; bottom:0; width:43%;
  clip-path:polygon(0 0, 100% 0, calc(100% - 105px) 100%, 0 100%)}
.pagehead .shot img{width:100%; height:100%; object-fit:cover}
.pagehead .inner{
  position:relative; width:100%; max-width:var(--wrap); margin-inline:auto;
  padding-inline:var(--gut); min-height:422px;
  display:grid; grid-template-columns:repeat(12,1fr); align-items:center;
}
.pagehead .box{grid-column:6 / 13; grid-row:1; position:relative; z-index:1;
  padding-block:40px}
.pagehead .crumb{font-size:16px; color:var(--on-dark-soft); margin-bottom:20px}
.pagehead .crumb a{color:var(--on-dark-soft); text-decoration:none}
.pagehead .crumb a:hover{color:#fff; text-decoration:underline}
.pagehead .crumb span{opacity:.6; padding-inline:6px}
.pagehead .eyebrow{font-size:14.4px; text-transform:uppercase; font-weight:700;
  color:var(--on-dark-soft); margin-bottom:10px}
.pagehead h1{color:var(--on-dark)}
.pagehead .claim{margin-top:14px; font-size:19.2px; font-weight:300;
  color:var(--on-dark); max-width:34ch}

/* ── Intro / Lead ────────────────────────────────────────────────────── */
.intro{padding-block:40px 8px}
.intro p{max-width:66ch; font-size:19.2px; line-height:1.55; color:var(--ink)}

/* ── Status-Kennzeichnung ────────────────────────────────────────────── */
.chip{display:inline-flex; align-items:center; gap:8px; font-size:14.4px;
  font-weight:700; text-transform:uppercase; padding:6px 12px;
  background:var(--grey); color:var(--ink); border-left:3px solid var(--green)}
.chip::before{content:""; width:8px; height:8px; background:var(--green); flex:none}
.intro .chip{margin-top:20px}

/* ── Abschnitte ──────────────────────────────────────────────────────── */
.sec{padding-block:40px; border-top:1px solid var(--line)}
.sec > h2{margin-bottom:24px}

/* ── Technologiefelder (Hub) ─────────────────────────────────────────── */
.feld{padding-block:40px; border-top:1px solid var(--line)}
.feld:first-of-type{border-top:0}
.feld-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-bottom:24px}
.feld-head h2{margin:0}
.feld-head .n{font-size:14.4px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.feld-head p{color:var(--ink-soft); font-size:16px; max-width:56ch}

/* ── Kacheln ─────────────────────────────────────────────────────────── */
.grid{display:grid; gap:30px; grid-template-columns:repeat(auto-fill,minmax(265px,1fr))}
.card{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--paper)}
.card .shot{aspect-ratio:1/1; background:var(--grey); overflow:hidden}
.card .shot img{width:100%; height:100%; object-fit:cover; transition:transform .25s}
.card:hover .shot img{transform:scale(1.03)}
.card .txt{padding:16px 0 0; display:flex; flex-direction:column; gap:8px; flex:1}
.card h3{font-size:16px; line-height:1.4; font-weight:300; text-transform:none; color:var(--blue)}
.card:hover h3{text-decoration:underline}
.card p{font-size:16px; line-height:1.45; color:var(--ink); flex:1}
.card .foot{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:4px}
.card .more{font-size:16px; font-weight:700; text-transform:uppercase; color:var(--blue); margin-left:auto}
.card .chip{font-size:12px; padding:4px 9px}

/* ── Zweispalter: Text + Datenschiene ────────────────────────────────── */
.cols{display:grid; grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  gap:60px; padding-block:40px; align-items:start}
.prose{max-width:66ch; min-width:0}
.prose .blk + .blk{margin-top:32px}
.prose h2{margin-bottom:12px}
.prose p{margin-bottom:14px}
.prose p:last-child{margin-bottom:0}

.rail{display:flex; flex-direction:column; gap:24px;
  position:sticky; top:calc(env(safe-area-inset-top, 0px) + 90px)}
.panel{background:var(--grey)}
.panel > h2{padding:16px 20px; margin:0; border-bottom:1px solid var(--line);
  font-size:16px; line-height:1.4}
.panel dl{margin:0; padding:4px 20px 14px}
.panel dl > div{display:grid; grid-template-columns:1fr auto; gap:6px 16px;
  padding:10px 0; border-bottom:1px solid var(--line); align-items:baseline}
.panel dl > div:last-child{border-bottom:0}
.panel dt{font-size:16px; color:var(--ink-soft)}
.panel dd{margin:0; font-size:16px; font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.dl-list{padding:14px 20px 18px; display:flex; flex-direction:column; gap:12px}
.dl-list a{display:flex; align-items:flex-start; gap:10px; font-size:16px;
  font-weight:700; text-transform:uppercase; text-decoration:none; color:var(--blue)}
.dl-list a:hover{text-decoration:underline}
.dl-list a::before{content:"PDF"; font-size:11px; font-weight:700; background:var(--red);
  color:#fff; padding:3px 6px; flex:none; margin-top:1px}
.dl-list small{display:block; font-size:14.4px; font-weight:300; text-transform:none;
  color:var(--ink-soft); margin-top:3px}

/* ── Merkmale ────────────────────────────────────────────────────────── */
.merk{columns:2 260px; column-gap:60px; list-style:none; margin:0; padding:0}
.merk li{padding:10px 0 10px 22px; position:relative; break-inside:avoid;
  border-bottom:1px solid var(--line)}
.merk li::before{content:""; position:absolute; left:0; top:18px;
  width:8px; height:8px; background:var(--blue)}

/* ── Varianten ──────────────────────────────────────────────────────── */
.vars{display:grid; gap:30px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.var{border-top:3px solid var(--blue); padding-top:16px}
.var h3{font-size:19.2px; line-height:1.25; margin-bottom:10px}
.var p{color:var(--ink)}

/* ── Redaktionshinweis ──────────────────────────────────────────────── */
.note{background:var(--grey); border-left:3px solid var(--red); padding:18px 20px; margin-bottom:24px}
.note h3{font-size:16px; line-height:1.4; color:var(--red); margin-bottom:8px}


/* ── Auszeichnungen ─────────────────────────────────────────────────── */
.awardband{background:var(--grey)}
.awardband .sec{border-top:0}
.awardlead{margin:-8px 0 26px; font-size:19.2px; color:var(--ink)}
.awardlead a{font-weight:700}
.awards{display:flex; flex-wrap:wrap; gap:32px 48px; align-items:flex-start}
.award{margin:0; display:flex; gap:20px; align-items:center;
  max-width:520px; flex:1 1 380px}
.award img{width:150px; height:100px; object-fit:contain; flex:none;
  background:var(--paper); padding:6px}
.award figcaption strong{display:block; font-size:19.2px; font-weight:700;
  color:var(--blue); line-height:1.25; margin-bottom:6px}
.award figcaption span{display:block; font-size:16px; color:var(--ink)}
@media (max-width:560px){
  .award{flex-direction:column; align-items:flex-start; gap:14px}
  .award img{width:130px; height:86px}
  .awardlead{font-size:16px}
}
/* ── Handlungsaufforderung ──────────────────────────────────────────── */
.cta{background:var(--blue); color:#fff}
.cta .wrap{padding-block:48px; display:flex; flex-wrap:wrap; gap:24px 40px;
  align-items:center; justify-content:space-between}
.cta h2{color:#fff; max-width:32ch}
.cta p{margin-top:10px; color:var(--on-dark-soft); font-size:16px; max-width:56ch}
.btn{display:inline-block; background:var(--blue); color:#fff; border:1px solid var(--blue);
  padding:8px 24px; font-size:16px; font-weight:700; text-transform:uppercase;
  text-decoration:none; line-height:1.5; flex:none}
.btn:hover{background:var(--blue-dark); border-color:var(--blue-dark)}
.cta .btn{background:#fff; color:var(--blue); border-color:#fff}
.cta .btn:hover{background:transparent; color:#fff}

/* ── Zurueck ─────────────────────────────────────────────────────────── */
.back{padding-block:28px; border-top:1px solid var(--line)}
.back a{font-size:16px; font-weight:700; text-transform:uppercase;
  text-decoration:none; color:var(--blue)}
.back a:hover{text-decoration:underline}

/* ── Fussbereich ─────────────────────────────────────────────────────── */
footer{background:var(--ink); color:#fff}
footer .wrap{padding-block:48px 24px; display:flex; flex-wrap:wrap; gap:24px 60px}
footer div{min-width:220px}
footer strong{display:block; font-size:16px; font-weight:700; text-transform:uppercase;
  margin-bottom:10px}
footer p{font-size:14.4px; font-weight:300; color:var(--on-dark-soft); max-width:42ch}
footer a{color:#fff; font-size:14.4px; text-decoration:none}
footer a:hover{text-decoration:underline}

/* ── Schmale Ansicht ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .pagehead .shot{position:static; width:100%; clip-path:none}
  .pagehead .shot img{height:auto; aspect-ratio:3/2}
  .pagehead .inner{grid-template-columns:1fr; min-height:0}
  .pagehead .box{grid-column:1; grid-row:1; padding-block:32px}
  h1{font-size:32px; line-height:1.15}
  h2,h3{font-size:22px; line-height:1.2}
  .cols{grid-template-columns:1fr; gap:36px}
  .rail{position:static}
  .merk{columns:1}
}
@media (max-width:560px){
  .head .wrap{align-items:flex-start; gap:14px; padding-block:12px}
  .head nav a{font-size:16px; padding:6px 10px}
  a.logo{width:84px}
  h1{font-size:28px; line-height:1.15}
  h2,h3{font-size:20px}
  .pagehead .claim{font-size:16px}
  .intro p{font-size:16px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }