/* CLUNIQ Startseite · dunkle Filmfläche, Original-Unterlogos, direkter Kontakt. */
.auftakt{position:relative;isolation:isolate;min-height:clamp(550px,40vw,620px);display:flex;align-items:center;overflow:hidden;background:var(--cream);color:#fff;padding:60px 0 80px}
.auftakt-film{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.auftakt-schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,10,6,.72),rgba(3,10,6,.34) 65%,rgba(3,10,6,.15)),linear-gradient(0deg,#080f0c 0%,rgba(8,15,12,.65) 13%,transparent 48%);pointer-events:none}
.auftakt-inhalt{padding-top:10px;padding-bottom:20px}
.auftakt h1{max-width:1100px;font-size:clamp(48px,5.8vw,84px);line-height:1.08;font-weight:700;letter-spacing:-.035em;text-wrap:initial;color:#fff}
.auftakt .lead{font-size:clamp(18px,1.55vw,23px);line-height:1.55;color:#f0f3ee;margin-top:28px;max-width:36em}
.auftakt .btn{margin-top:32px}
.auftakt :focus-visible{outline-color:#fff}
.ki-hinweis{position:absolute;left:var(--wrap-polster);bottom:22px;line-height:0}
.ki-hinweis img{display:block;width:auto;height:32px}
.film-halt{position:absolute;right:var(--wrap-polster);bottom:18px;min-width:44px;min-height:44px;padding:12px;font:inherit;border-radius:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;cursor:pointer;display:grid;place-items:center}
.film-halt:hover{background:rgba(255,255,255,.19)}
.film-halt[hidden],.film-play,.film-halt[aria-pressed=true] .film-pause{display:none}
.film-halt[aria-pressed=true] .film-play{display:block}
.auslage{background:var(--cream);padding:40px 0 72px;scroll-margin-top:90px}
.auslage-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:32px}
.auslage-kopf h2{font-size:clamp(40px,4.6vw,66px);line-height:1.06;letter-spacing:-.035em}
.auslage-kopf>p{font-size:20px;line-height:1.5;max-width:20em;color:var(--ink-soft);margin-bottom:4px}
.angebote{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.angebote li{display:flex;align-items:flex-start;flex-direction:column;min-width:0}
.angebote h3{width:100%;line-height:1}
.angebote h3 a{display:block;max-width:210px;padding:4px 0}
.angebote h3 img{display:block;width:100%;height:auto}
.angebote p{font-size:16px;line-height:1.6;color:var(--ink-soft);margin-top:20px}
.angebot-status{font-size:13px;color:var(--ink-soft);margin-top:14px}
.angebot-link{display:inline-flex;font-size:15px;font-weight:600;color:var(--ink);margin-top:auto;padding:24px 0 4px;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:6px;transition:text-decoration-color .25s}
.angebot-link:hover{text-decoration-color:#fff}
.start-abschluss{background:#0c1810;padding:88px 0 96px;border-top:1px solid var(--line)}
.start-abschluss>.wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:72px;align-items:center}
.start-abschluss h2{font-size:clamp(38px,4.5vw,62px);line-height:1.08}
.start-abschluss p{max-width:33em;margin-top:24px;font-size:19px;line-height:1.65;color:var(--ink-soft)}
.abschluss-wege{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.abschluss-wege>span{flex-basis:100%;font-size:13px;color:var(--ink-soft);margin-top:4px}
@media(max-width:1100px){
 .angebote{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 34px}
 .start-abschluss>.wrap{grid-template-columns:1fr;gap:36px}
}
@media(max-width:640px){
 .auftakt{min-height:590px;padding:74px 0 100px}
 .auftakt h1{font-size:clamp(28px,8.3vw,48px);line-height:1.18;letter-spacing:-.035em}
 .auftakt .lead{font-size:18px;line-height:1.65;margin-top:26px;max-width:25em}
 .auftakt-schleier{background:linear-gradient(90deg,rgba(3,10,6,.7),rgba(3,10,6,.3)),linear-gradient(0deg,#080f0c,rgba(8,15,12,.3) 35%,transparent 65%)}
 .auftakt-film{object-position:52% 45%}
 .auftakt .btn{font-size:16px;margin-top:28px}
 .auslage{padding:48px 0 64px;scroll-margin-top:135px}
 .auslage-kopf{display:block;margin-bottom:36px}
 .auslage-kopf h2{font-size:42px}
 .auslage-kopf>p{font-size:18px;margin-top:24px}
 .angebote{grid-template-columns:1fr;gap:0}
 .angebote li{padding:30px 0;border-top:1px solid var(--line)}
 .angebote h3 a{max-width:214px}
 .angebote p{font-size:17px;margin-top:22px;max-width:32em}
 .angebot-link{margin-top:0;padding-top:22px;font-size:16px}
 .angebot-status{margin-top:16px}
 .start-abschluss{padding:64px 0}
 .start-abschluss h2{font-size:40px}
 .start-abschluss p{font-size:18px}
 .abschluss-wege{gap:14px}
 .ki-hinweis img{height:26px}
 .film-halt{padding:12px;min-width:44px}
}

/* Startseite: Nutzen zuerst, Produktfamilie und ein gemeinsamer Kontaktweg.
   Bewusst auf diese Fläche begrenzt; die Produktseiten behalten ihr Layout. */
.marketing-start .auftakt{min-height:620px;padding:64px 0 82px}
.marketing-start .auftakt .lead{font-size:clamp(21px,2vw,28px);font-weight:500;margin-top:24px;max-width:30em}
.marketing-start .auftakt-erklaerung{font-size:18px;line-height:1.65;max-width:35em;margin-top:12px;color:#e0e7df}
.marketing-start .auftakt-wege{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px}
.marketing-start .auftakt-wege .btn{margin-top:0}
.marketing-start .auftakt-mehr,.marketing-start .abschluss-kontakt{font-size:15px;text-decoration:underline;text-underline-offset:5px;padding:10px 0}
.marketing-start .auftakt-wege .btn-primary,.marketing-start .abschluss-wege .btn-primary{background-color:rgba(255,255,255,.23);border-color:rgba(255,255,255,.6)}
.marketing-start .auftakt-wege .btn-primary:hover,.marketing-start .abschluss-wege .btn-primary:hover{background-color:rgba(255,255,255,.32);border-color:#fff}
.marketing-start .angebote p{font-size:16px}
.marketing-start .abschluss-wege{flex-direction:column;align-items:flex-start;gap:12px}
.marketing-start .abschluss-wege>span{flex-basis:auto;margin-top:0}
.marketing-start .abschluss-kontakt{margin-top:8px}
@media(min-width:641px) and (max-width:1100px){
 .marketing-start .auslage-kopf{display:block}
 .marketing-start .auslage-kopf>p{margin-top:20px;max-width:32em}
 .marketing-start .angebote{grid-template-columns:repeat(6,minmax(0,1fr));gap:36px 28px}
 .marketing-start .angebote>li{grid-column:span 2}
 .marketing-start .angebote>li:nth-child(-n+2){grid-column:span 3;padding-bottom:32px;border-bottom:1px solid var(--line)}
 .marketing-start .angebote>li:nth-child(-n+2) p{max-width:27em}
}
@media(max-width:640px){
 .marketing-start header.site .nav{gap:4px 8px;padding-top:10px}
 .marketing-start header.site .brand img{width:128px}
 .marketing-start header.site .nav-cta{gap:10px;margin-left:auto}
 .marketing-start header.site .nav-cta .login{font-size:12px}
 .marketing-start header.site .nav-cta .btn{padding:9px 10px;font-size:12px;min-height:40px}
 .marketing-start .auftakt{min-height:0;padding:60px 0 78px}
 .marketing-start .auftakt h1{font-size:clamp(27px,8.1vw,48px)}
 .marketing-start .auftakt .lead{font-size:23px;line-height:1.4;margin-top:24px}
 .marketing-start .auftakt-erklaerung{font-size:16px;line-height:1.6;margin-top:14px}
 .marketing-start .auftakt-wege{gap:6px;margin-top:24px;align-items:flex-start;flex-direction:column}
 .marketing-start .auftakt-wege .btn{font-size:16px}
 .marketing-start .auftakt-mehr{font-size:14px}
 .marketing-start .auslage{padding:40px 0 44px;scroll-margin-top:115px}
 .marketing-start .auslage-kopf{margin-bottom:24px}
 .marketing-start .auslage-kopf h2{font-size:clamp(34px,10.5vw,42px)}
 .marketing-start .auslage-kopf>p{font-size:17px;margin-top:18px}
 .marketing-start .angebote li{padding:24px 0}
 .marketing-start .angebote p{margin-top:14px;font-size:16px}
 .marketing-start .angebot-status{margin-top:10px}
 .marketing-start .angebot-link{padding-top:16px;min-height:44px}
 .marketing-start .start-abschluss{padding:48px 0}
 .marketing-start .start-abschluss>.wrap{gap:26px}
 .marketing-start .start-abschluss h2{font-size:clamp(34px,10.5vw,40px)}
 .marketing-start .start-abschluss p{margin-top:18px;font-size:17px}
}
@media(max-width:360px){
 .marketing-start header.site .brand img{width:108px}
 .marketing-start header.site .nav-cta{gap:8px}
 .marketing-start header.site .nav-cta .btn{padding:9px 8px}
}

/* Der Testzugang gehört zum Manager, die Dachmarke führt zu allen Angeboten. */
.marketing-start .angebot-wege{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start}
.marketing-start .angebot-wege .angebot-link{margin-top:0}
.marketing-start .angebot-test{font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:5px;padding:10px 0;min-height:44px}
.marketing-start .angebot-testhinweis{font-size:12px;color:var(--ink-soft)}

/* Mobil öffnet dieselbe Angebotsnavigation vollständig, ohne horizontales Suchen.
   Ohne JavaScript bleiben alle Links sichtbar und umbrechend erreichbar. */
.marketing-start header.site .start-nav-toggle{display:none}
@media(max-width:640px){
 .marketing-start header.site .nav-links{width:100%;flex-basis:100%;margin:2px 0 0;padding:0;overflow:visible;flex-wrap:wrap}
 .marketing-start header.site .nav-links a.top{padding:10px;min-height:44px}
 .marketing-start header.site .start-nav-toggle{order:3;width:100%;min-height:44px;align-items:center;justify-content:space-between;gap:16px;padding:8px 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
 .marketing-start header.site .start-nav-zustand{font-size:12px;color:var(--ink-soft)}
 .marketing-start header.site.start-nav-bereit .start-nav-toggle{display:flex}
 .marketing-start header.site.start-nav-bereit .nav-links{display:none}
 .marketing-start header.site.start-nav-bereit .nav-links.start-nav-offen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;padding:12px var(--wrap-polster);position:absolute;top:100%;left:0;width:100%;max-height:calc(100dvh - 104px);overflow-y:auto;background:#0c1a0e;border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(0,0,0,.3)}
 .marketing-start header.site .nav-links a.top:hover{background:rgba(255,255,255,.06)}
}

/* Leistungsbegriffe ergänzen die Originalmarken als lesbare Überschriften. */
.marketing-start .angebot-kategorie{display:block;margin-top:16px;font-size:16px;line-height:1.4;font-weight:600;letter-spacing:0;color:var(--ink)}
.marketing-start .angebote h3+p{margin-top:12px}