/* ============================================================
   GPE · Unterseiten: Subhero, Split-Sektionen, Kategorie-Index,
   Team, Karriere, Downloads, News, Formular, Prose, Rechtliches
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; font-size: .85rem; color: var(--text-3); }
.crumbs a:hover { color: var(--red); }
.crumbs .sep { opacity: .5; }
.crumbs .here { color: var(--text-2); }

/* ---------- Heller Subhero ---------- */
.subhero { position: relative; padding-top: calc(var(--nav-h) + clamp(3rem,2rem + 3vw,5rem)); padding-bottom: clamp(3rem,2rem + 3vw,5rem); background: var(--grad-page); overflow: clip; }
.subhero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,1rem + 4vw,5rem); align-items: center; }
.subhero h1 { font-size: clamp(2.1rem,1.4rem + 2.4vw,3.7rem); letter-spacing: var(--tr-tighter); margin-top: 1rem; }
.subhero__grid h1 { font-size: clamp(2rem,1.3rem + 2vw,3.3rem); }
.subhero .lead { margin-top: 1.4rem; }
.subhero .cta { display: flex; gap: .9rem; margin-top: 2.2rem; flex-wrap: wrap; }
.subhero__media { border-radius: var(--r-tile-lg); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4/3; background: var(--bg-soft); }
.subhero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Dunkler Media-Header ---------- */
.subhero--dark-media { position: relative; display: flex; align-items: flex-end; overflow: clip;
  min-height: clamp(440px, 56vh, 660px); background: #06070A;
  padding: calc(var(--nav-h) + 7vh) 0 clamp(3rem, 2rem + 3vw, 5rem); }
.subhero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.subhero__bg img { width: 100%; height: 100%; object-fit: cover; }
.subhero__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,7,10,.55) 0%, rgba(6,7,10,.18) 34%, rgba(6,7,10,.84) 100%),
              linear-gradient(90deg, rgba(6,7,10,.72) 0%, rgba(6,7,10,.18) 52%, rgba(6,7,10,0) 100%); }
.subhero__inner { position: relative; z-index: 2; }
.subhero--dark-media h1 { color: #fff; font-size: clamp(2.3rem, 1.5rem + 2.8vw, 4rem); letter-spacing: var(--tr-tighter); margin-top: 1rem; max-width: 18ch; }
.subhero--dark-media .lead { color: var(--on-dark-2); margin-top: 1.3rem; max-width: 50ch; }
.subhero--dark-media .crumbs { color: var(--on-dark-3); }
.subhero--dark-media .crumbs a { color: var(--on-dark-2); }
.subhero--dark-media .crumbs a:hover { color: #fff; }
.subhero--dark-media .cta { display: flex; gap: .9rem; margin-top: 2rem; flex-wrap: wrap; }
@media (max-width: 720px) { .subhero--dark-media { min-height: 70vh; } }

/* ---------- Split (Bild/Text) ---------- */
.fsplit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; }
.fsplit h2 { font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); margin-top: .5rem; }
.fsplit .lead { margin-top: 1.2rem; }
.fsplit__media { border-radius: var(--r-tile-lg); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4/3; background: var(--bg-soft); }
.fsplit__media img { width: 100%; height: 100%; object-fit: cover; }
.fsplit__media--contain { aspect-ratio: auto; background: #fff; display: grid; place-items: center; padding: 1.5rem; }
.fsplit__media--contain img { object-fit: contain; max-height: 480px; }
.fsplit--rev > :first-child { order: 2; }
.checklist { list-style: none; padding: 0; display: grid; gap: .7rem; margin-top: 1.4rem; }
.checklist li { display: flex; gap: .7rem; color: var(--text-2); line-height: 1.45; }
.checklist li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--red-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 12l4 4 8-8' stroke='%23E30B16' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; margin-top: .15rem; }
.checklist li b { color: var(--text); }
.bg-dark .checklist li { color: var(--on-dark-2); }
.bg-dark .checklist li b { color: #fff; }

/* ---------- Kennzahlen (hell) ---------- */
.specstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem,1rem + 1.5vw,2.4rem); }
.specstat { position: relative; display: flex; flex-direction: column; gap: 1.2rem; padding: clamp(1.9rem,1.3rem + 1.6vw,2.8rem); background: #fff; border-radius: var(--r-tile); box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.specstat:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hov); }
.specstat__ico { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: var(--red-50); color: var(--red); flex: 0 0 auto; transition: background .4s var(--ease), color .4s var(--ease); }
.specstat:hover .specstat__ico { background: var(--red); color: #fff; }
.specstat__ico svg { width: 26px; height: 26px; }
.specstat__val { font-size: clamp(2.1rem,1.6rem + 1.5vw,3rem); font-weight: 700; letter-spacing: var(--tr-tighter); line-height: 1.02; color: var(--text); }
.specstat__val .u { font-size: .6em; color: var(--red); font-weight: 700; margin-left: .08em; }
.specstat__lbl { font-size: .95rem; color: var(--text-2); }
@media (max-width: 900px) { .specstats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .specstats { grid-template-columns: 1fr; } }

/* ---------- Zeitstrahl (Unternehmen) ---------- */
.timeline { display: grid; gap: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.tl { position: relative; padding: 0 0 2rem 2.4rem; }
.tl::before { content: ""; position: absolute; left: 0; top: .45rem; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px var(--red); }
.tl b { display: block; font-size: 1.1rem; letter-spacing: var(--tr-tight); }
.tl span { display: block; color: var(--text-2); font-size: .95rem; margin-top: .2rem; max-width: 50ch; }

/* ---------- Produkt-Index (Kategorien mit Shop-Crosslinks) ---------- */
.catindex { display: grid; gap: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
.cat { display: grid; grid-template-columns: 340px 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); background: #fff; border-radius: var(--r-tile); box-shadow: var(--shadow-card); overflow: hidden; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.cat__media { position: relative; background: var(--bg-soft); min-height: 240px; }
.cat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cat__body { padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem) clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem) clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem) 0; display: flex; flex-direction: column; gap: .8rem; }
.cat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cat__head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: var(--tr-tight); }
.cat__head .num { font-size: .78rem; font-weight: 700; color: var(--red); letter-spacing: .08em; }
.cat__desc { color: var(--text-2); font-size: .98rem; line-height: 1.5; max-width: 70ch; }
.cat__sub { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.cat__sub a { font-size: .84rem; font-weight: 500; color: var(--text-2); background: var(--bg-soft); padding: .42em .85em; border-radius: var(--r-pill); transition: background var(--dur), color var(--dur); display: inline-flex; align-items: center; gap: .35em; }
.cat__sub a:hover { background: var(--red-50); color: var(--red); }
.cat__sub a svg { width: 11px; height: 11px; opacity: .6; }
.cat__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: auto; padding-top: .8rem; }
.catnav { display: flex; flex-wrap: wrap; gap: .5rem; }
.catnav a { font-size: .86rem; font-weight: 600; color: var(--text-2); background: #fff; box-shadow: var(--shadow-tile); padding: .55em 1em; border-radius: var(--r-pill); transition: color var(--dur), transform var(--dur); }
.catnav a:hover { color: var(--red); transform: translateY(-2px); }
.shop-hint { display: flex; gap: 1rem; align-items: center; background: var(--red-50); border-radius: var(--r-lg); padding: 1.1rem 1.4rem; font-size: .92rem; color: var(--text-2); }
.shop-hint svg { width: 22px; height: 22px; color: var(--red); flex: none; }
.shop-hint b { color: var(--text); }
@media (max-width: 860px) { .cat { grid-template-columns: 1fr; } .cat__body { padding: 1.5rem; } .cat__media { aspect-ratio: 16/9; min-height: 0; } .cat__media img { position: static; } }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.2rem, .8rem + 1.2vw, 1.8rem); }
.member { background: #fff; border-radius: var(--r-tile); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: .3rem; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.member:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hov); }
.member__avatar { width: 56px; height: 56px; border-radius: 16px; background: var(--red-50); color: var(--red); display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: .8rem; }
.member b { font-size: 1.08rem; letter-spacing: var(--tr-tight); }
.member .role { font-size: .88rem; color: var(--text-2); min-height: 2.6em; }
.member a { font-size: .86rem; color: var(--text-2); margin-top: .15rem; display: inline-flex; gap: .4rem; align-items: center; }
.member a:hover { color: var(--red); }
.member a svg { width: 14px; height: 14px; opacity: .7; }
.member__links { margin-top: .6rem; display: grid; gap: .25rem; }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .team-grid { grid-template-columns: 1fr; } }

/* ---------- Karriere ---------- */
.jobs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.job { background: #fff; border-radius: var(--r-tile); padding: 1.7rem 1.8rem; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: .5rem; }
.job__tag { font-size: .76rem; font-weight: 700; color: var(--red); letter-spacing: .06em; text-transform: uppercase; }
.job h3 { font-size: 1.25rem; letter-spacing: var(--tr-tight); }
.job p { font-size: .92rem; color: var(--text-2); }
.job__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.value { padding: 1.8rem; border-radius: var(--r-tile); background: #fff; box-shadow: var(--shadow-card); }
.value__ico { width: 46px; height: 46px; border-radius: 13px; background: var(--red-50); color: var(--red); display: grid; place-items: center; margin-bottom: 1rem; }
.value__ico svg { width: 24px; height: 24px; }
.value h3 { font-size: 1.2rem; }
.value p { color: var(--text-2); font-size: .94rem; margin-top: .4rem; }
@media (max-width: 800px) { .jobs, .values { grid-template-columns: 1fr; } }

/* ---------- Downloads ---------- */
.dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); }
.dl { background: #fff; border-radius: var(--r-tile); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.dl:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hov); }
.dl__media { background: var(--bg-soft); padding: 2rem; display: grid; place-items: center; aspect-ratio: 4/3; }
.dl__media img { max-height: 100%; width: auto; max-width: 70%; border-radius: 8px; box-shadow: var(--shadow-pop); }
.dl__body { padding: 1.4rem 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.dl__body .eyebrow { font-size: .8rem; }
.dl__body h3 { font-size: 1.2rem; }
.dl__meta { font-size: .82rem; color: var(--text-3); }
.dl__body .btn { margin-top: auto; align-self: flex-start; margin-top: 1rem; }
@media (max-width: 860px) { .dl-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .dl-grid { grid-template-columns: 1fr; } }

/* ---------- News-Filter ---------- */
.nfilter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.nchip { font-size: .9rem; font-weight: 600; color: var(--text-2); background: var(--bg-soft); padding: .56em 1.05em; border-radius: var(--r-pill); transition: background var(--dur), color var(--dur), box-shadow var(--dur); }
.nchip:hover { background: var(--bg-soft-2); color: var(--text); }
.nchip[aria-pressed="true"] { background: var(--red); color: #fff; box-shadow: var(--shadow-btn); }
.ncard.is-hidden { display: none; }

/* ---------- Prose ---------- */
.prose { max-width: 72ch; color: var(--text-2); font-size: var(--fs-body); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { color: var(--text); margin-top: 1.8em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); }
.prose h3 { color: var(--text); margin-top: 1.4em; font-size: 1.2rem; }
.prose h4 { color: var(--text); margin-top: 1.2em; font-size: 1.05rem; }
.prose strong { color: var(--text); }
.prose ul { padding-left: 1.2em; display: grid; gap: .45em; }
.prose a { color: var(--red); font-weight: 500; }
.prose address { font-style: normal; }
.prose .box { background: var(--bg-soft); border-radius: var(--r-lg); padding: 1.3rem 1.5rem; }

/* ---------- Kontakt / Formular ---------- */
.form-wrap { display: grid; grid-template-columns: 1.45fr .8fr; gap: clamp(2rem,1rem + 4vw,4rem); align-items: start; }
.form { display: grid; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label { font-size: .88rem; font-weight: 600; }
.field label .req { color: var(--red); }
.field input, .field select, .field textarea { width: 100%; padding: .9rem 1.05rem; font-size: 1rem; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: var(--r); transition: border-color var(--dur), box-shadow var(--dur); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-50); }
.checkbox { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--text-2); }
.checkbox input { width: 18px; height: 18px; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--red); }
.checkbox a { color: var(--red); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .82rem; color: var(--text-3); }
.form-status { padding: 1rem 1.2rem; border-radius: var(--r); font-size: .92rem; display: none; }
.form-status.is-ok { display: block; background: rgba(46,160,90,.1); border: 1px solid rgba(46,160,90,.35); color: #1f7a45; }
.form-status.is-err { display: block; background: rgba(227,11,22,.08); border: 1px solid rgba(227,11,22,.3); color: var(--red-700); }
.contact-aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); display: grid; gap: 1.2rem; }
.card { padding: 1.6rem; border-radius: var(--r-tile); background: #fff; box-shadow: var(--shadow-card); }
.card--red { background: var(--red-50); }
.card .row { display: flex; flex-direction: column; gap: .1rem; padding: .6rem 0; }
.card .row + .row { box-shadow: inset 0 1px 0 var(--line); }
.card .row b { font-size: .96rem; }
.card .row span, .card .row a { font-size: .92rem; color: var(--text-2); }
.card .row a:hover { color: var(--red); }
.map { border-radius: var(--r-tile); overflow: hidden; box-shadow: var(--shadow-card); background: var(--bg-soft); aspect-ratio: 16/7; display: grid; place-items: center; text-align: center; padding: 2rem; }
.map p { color: var(--text-2); max-width: 44ch; }
@media (max-width: 900px) { .subhero__grid, .fsplit { grid-template-columns: 1fr; } .fsplit--rev > :first-child { order: 0; } .subhero__media { order: -1; } .form-wrap { grid-template-columns: 1fr; } .contact-aside { position: static; } }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Galerie (Weich-PVC) ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.gallery figure { background: #fff; border-radius: var(--r-tile); overflow: hidden; box-shadow: var(--shadow-card); display: grid; grid-template-rows: 1fr auto; }
.gallery figure > div { aspect-ratio: 1; display: grid; place-items: center; padding: 1.2rem; background: radial-gradient(125% 125% at 50% 14%, #fff 0%, #eef0f3 100%); }
.gallery img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery figcaption { padding: .9rem 1.2rem 1.1rem; font-size: .88rem; font-weight: 600; color: var(--text-2); }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Feature-Liste mit Icons ---------- */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.feature { background: #fff; border-radius: var(--r-tile); padding: 1.6rem; box-shadow: var(--shadow-card); }
.feature__ico { width: 44px; height: 44px; border-radius: 12px; background: var(--red-50); color: var(--red); display: grid; place-items: center; margin-bottom: .9rem; }
.feature__ico svg { width: 22px; height: 22px; }
.feature b { display: block; font-size: 1.05rem; letter-spacing: var(--tr-tight); }
.feature p { font-size: .9rem; color: var(--text-2); margin-top: .3rem; line-height: 1.45; }
@media (max-width: 1000px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .features { grid-template-columns: 1fr; } }

/* ---------- Akkordeon ---------- */
.acc { background: var(--bg-soft); border-radius: var(--r-lg); overflow: hidden; }
.acc + .acc { margin-top: .8rem; }
.acc > summary { cursor: pointer; list-style: none; padding: 1.1rem 1.4rem; font-weight: 600; font-size: 1.02rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "+"; font-size: 1.4rem; color: var(--red); font-weight: 400; line-height: 1; }
.acc[open] > summary::after { content: "\2013"; }
.acc__body { padding: 0 1.4rem 1.3rem; color: var(--text-2); font-size: .95rem; }
.acc__body ul { padding-left: 1.1em; display: grid; gap: .4em; margin-top: .5em; }