/* Nopebyte – Unternehmensseiten /unternehmen und /mail-check (Spec 2026-09-30 §6/§6a). Gemeinsames (Tokens, Nav, Abschnitte, Karten, Footer) in site.css. */

/* ===== /unternehmen: Hero wie /mail-check (Indigo, Check-Komponente), Sprungziel des Nav-Buttons unter der festen Nav ===== */
.mc-form{scroll-margin-top:96px}
.mc-hero.biz-hero h1{max-width:11em}

/* Status-Punkt (Angebote; mailcheck.js nutzt „status soon“ im Block „Wie geht es weiter?“) */
.status{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;font-size:13.5px;font-weight:500;color:var(--muted)}
.status i{width:8px;height:8px;border-radius:50%}
.status.ok i{background:var(--green)}.status.soon i{background:var(--amber)}

/* ===== Warum das wichtig ist: drei Alltagsszenarien ===== */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.why-card{padding:28px 28px 30px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.why-ic{display:grid;place-items:center;width:48px;height:48px;margin-bottom:20px;border:1.5px solid currentColor;border-radius:50%;color:var(--vl)}
.why-card h3{margin-bottom:10px;font-size:21px;line-height:1.2;letter-spacing:-.015em}
.why-card p{margin:0;font-size:15.5px;color:var(--muted)}
.why-fix{display:flex;align-items:flex-start;gap:14px;max-width:820px;margin-top:40px}
.why-fix svg{flex:none;margin-top:2px;color:var(--green)}
.why-fix p{margin:0;font-size:17px;color:var(--ink)}
.why-fix a{display:inline-block;padding:10px 0;color:var(--vl);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ===== Angebote: drei Karten; verfügbar = weiße Karte mit Indigo-Rand, bald = ruhige Fläche ohne Knopf ===== */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px;align-items:stretch}
.offer{display:flex;flex-direction:column;align-items:flex-start;padding:30px 30px 32px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card)}
.offer:not(.soon){border:2px solid var(--vl)}
.offer.soon{background:var(--bg2)}
.offer.soon .status{color:var(--amber);font-weight:600}
.offer h3{font-size:24px;letter-spacing:-.02em}
.of-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:14px 0 0}
.of-price b{font:700 30px/1.1 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.of-price span{font-size:15px;color:var(--muted)}
.of-p{margin:14px 0 0;font-size:15.5px;color:var(--muted)}
.of-list{display:grid;gap:10px;list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line);align-self:stretch}
.of-list li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--ink)}
.of-list svg{flex:none;margin-top:3px;color:var(--green)}
.offer.soon .of-list svg{color:var(--dim)}
.of-eg{display:block;margin-top:2px;font-size:13.5px;color:var(--muted)}
.offer .btn{margin-top:auto;align-self:stretch}
.offer .of-list+.btn{margin-top:28px}
.of-note{max-width:720px;margin:24px 0 0;font-size:15px;color:var(--muted)}

/* ===== Kontakt: ruhig, einfacher Mail-Link ===== */
.biz-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}
.biz-contact h2{font-size:clamp(28px,3.2vw,40px);line-height:1.12}
.biz-contact .sub{margin:0}
.biz-mail{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;color:var(--vl);font:500 17px/1 var(--f-mono);text-decoration:underline;text-underline-offset:4px}
.biz-who{max-width:560px;margin:14px 0 0;font-size:15px;color:var(--muted)}
.biz-who a{color:var(--vl);text-decoration:underline;text-underline-offset:3px}

@media (max-width:920px){
  .why-grid,.offers{grid-template-columns:1fr;margin-top:40px}
  .biz-contact{grid-template-columns:1fr;gap:24px}
}
@media (max-width:640px){
  .why-card{padding:24px 22px 26px}
  .offer{padding:26px 22px 28px}
  .why-fix p{font-size:16px}
}

/* ===== E-Mail-Check (/mail-check; Komponente mailcheck.js, Spec 2026-09-30 §6/§6a) ===== */
/* Hero: Indigo, zentriert; Eingabefeld hell (.on-page am Feld selbst), Button Türkis auf Indigo */
.mc-hero{padding:136px 0 72px;text-align:center}
.mc-hero-in{max-width:928px}
.mc-hero h1{max-width:820px;margin:0 auto;font-size:clamp(34px,4.6vw,56px);line-height:1.05}
.mc-hero .lead{max-width:640px;margin:20px auto 36px;font-size:clamp(17px,1.5vw,19px);color:var(--muted)}
.mc-form{max-width:680px;margin:0 auto;text-align:left}
html:not(.js) .mc-form{display:none}
.mc-label{display:block;margin-bottom:10px;font-size:15px;font-weight:600}
.mc-in{display:flex;gap:10px}
.mc-in input{flex:1;min-width:0;height:56px;padding:0 16px;border:1px solid var(--line2);border-radius:var(--r-ctl);background:var(--card);color:var(--ink);font:400 17px/1.4 var(--f-mono);letter-spacing:0}
.mc-in input::placeholder{color:var(--dim)}
.mc-in input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mc-in .btn{min-height:56px;padding:0 24px}
.mc-in .btn[disabled]{opacity:.8;cursor:progress}
.mc-trust{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:14px;color:var(--muted)}
.mc-trust svg{flex:none}
.mc-ferr{display:flex;gap:10px;margin:14px 0 0;padding:12px 16px;border-radius:var(--r-ctl);background:var(--card);color:var(--ink);font-size:15px;animation:fade .3s ease}
.mc-ferr[hidden]{display:none}
.mc-ferr svg{flex:none;margin-top:2px;color:var(--amber)}
.mc-spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid transparent;border-top-color:currentColor;border-right-color:currentColor;animation:mc-spin .8s linear infinite}
@keyframes mc-spin{to{rotate:360deg}}

/* Ergebnis: Karte mit Gesamtbalken, Zeilen je Prüfung, nächster Schritt */
.mc-result{padding:56px 0 96px}
.mc-result[hidden]{display:none}
.mc-wrap{max-width:928px}
.mc-busy{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;padding:40px 0;color:var(--muted)}
.mc-res{border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);overflow:hidden;scroll-margin-top:88px;animation:fade .35s ease}
.mc-ph,.mc-src{display:none}
.mc-v{padding:28px 32px 26px}
.mc-v.v-bad{background:var(--red-t)}.mc-v.v-warn{background:var(--amber-t)}.mc-v.v-ok{background:var(--green-t)}.mc-v.v-unknown{background:var(--tint)}
.mc-mark{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:14px;font-weight:600}
.v-bad .mc-mark{color:var(--red)}.v-warn .mc-mark{color:var(--amber)}.v-ok .mc-mark{color:var(--green)}.v-unknown .mc-mark{color:var(--vl)}
.mc-vic{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%}
.mc-vh{max-width:760px;font-size:clamp(23px,2.6vw,30px);line-height:1.15;letter-spacing:-.02em;outline:none}
.mc-vp{max-width:700px;margin:10px 0 0;font-size:16px;color:var(--muted)}
.mc-cause{max-width:700px;margin:12px 0 0;font-size:15.5px;font-weight:600;color:var(--ink)}
/* Nächster Schritt im Gesamtbalken: ein Satz und ein kompakter Teilen-Knopf */
.mc-vnext{max-width:700px;margin:16px 0 0}
.mc-vnext p{margin:0;font-size:15px;color:var(--ink)}
.mc-vnext .mc-acts{margin-top:10px}
.mc-print-empty{display:none}
.mc-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 0 0;font-size:14px;color:var(--muted)}
.mc-dom{font:500 14.5px/1.4 var(--f-mono);color:var(--ink);overflow-wrap:anywhere}
.mc-rows{list-style:none;margin:0;padding:0 32px}
.mc-row{display:grid;grid-template-columns:32px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.mc-row:first-child{border-top:0}
.mc-ic{display:grid;place-items:center;width:32px;height:32px;margin-top:1px;border:1.5px solid currentColor;border-radius:50%;color:var(--dim)}
.mc-s-ok .mc-ic,.mc-s-ok .mc-st{color:var(--green)}
.mc-s-warn .mc-ic,.mc-s-warn .mc-st{color:var(--amber)}
.mc-s-bad .mc-ic,.mc-s-bad .mc-st{color:var(--red)}
/* optionaler Zusatzschutz: neutral wie info (Standardfarbe --dim), bewusst ohne Amber */
.mc-s-opt .mc-st{font-weight:500}
.mc-rb{min-width:0}
.mc-row h3{font-size:18px;line-height:1.3;letter-spacing:-.01em}
.mc-tt{display:block}
.mc-sub{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;margin-top:3px;font:400 13px/1.4 var(--f-text);letter-spacing:0}
.mc-term{font-family:var(--f-mono);color:var(--dim)}
.mc-st{font-weight:600;color:var(--dim)}
.mc-say{margin:8px 0 0;font-size:15.5px;color:var(--muted)}
.mc-hint{margin:8px 0 0;padding-left:12px;border-left:2px solid var(--line2);font-size:14.5px;color:var(--muted)}
.mc-det{margin-top:6px}
.mc-det summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:600;color:var(--vl)}
.mc-det summary::-webkit-details-marker{display:none}
.mc-det summary::after{content:"+";font-size:18px;font-weight:500;line-height:1}
.mc-det[open] summary::after{content:"−"}
.mc-dbody{padding:2px 0 4px}
.mc-tech{margin:0 0 8px;font-size:14.5px;color:var(--muted)}
.mc-rl{margin:14px 0 6px;font-size:13px;font-weight:600;color:var(--ink)}
.mc-recs{display:grid;gap:6px;list-style:none;margin:0;padding:0}
.mc-recs li{padding:10px 12px;border-radius:var(--r-ctl);background:var(--bg2);color:var(--ink);font-family:var(--f-mono);font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.mc-rn{display:block;font-size:12px;color:var(--dim)}
.mc-none{margin:0;font-size:14px;color:var(--dim)}
.mc-next{margin:0 32px;padding:28px 0;border-top:1px solid var(--line)}
.mc-nh{margin-bottom:16px;font-size:20px}
.mc-ng{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px}
.mc-step{display:flex;flex-direction:column;align-items:flex-start;padding:20px 22px;border-radius:14px;background:var(--bg2)}
.mc-step h4{margin:0 0 6px;font:600 16px/1.3 var(--f-text)}
.mc-step p{margin:0;font-size:14.5px;color:var(--muted)}
.mc-step .status{margin:14px 0 0}
.mc-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.mc-copy{align-self:stretch}
.mc-copy[hidden]{display:none}
.mc-copy label{display:grid;gap:6px;margin-top:12px;font-size:13px;color:var(--muted)}
.mc-cin{width:100%;height:44px;padding:0 12px;border:1px solid var(--line2);border-radius:var(--r-ctl);background:var(--card);color:var(--ink);font:400 13px/1 var(--f-mono)}
.mc-live{margin:8px 0 0;font-size:13.5px;font-weight:600;color:var(--green)}
.mc-live:empty{margin:0}
/* Vertrauenszeile klein unter der Karte */
.mc-trustline{max-width:760px;margin:14px auto 0;padding:0 8px;font-size:13px;line-height:1.5;text-align:center;color:var(--muted)}
.mc-trustline a{display:inline-block;min-height:24px;color:var(--vl);text-decoration:underline;text-underline-offset:3px}
.mc-mail{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;color:var(--vl);font:500 14.5px/1 var(--f-mono);text-decoration:underline;text-underline-offset:3px}
.mc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0 32px;padding:20px 0 26px;border-top:1px solid var(--line)}
.mc-note{flex:1;min-width:240px;margin:0;font-size:13px;color:var(--muted)}

/* Was wir prüfen: ruhige Liste, Fachbegriff links in Plex Mono */
.mc-what{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;list-style:none;margin:48px 0 0;padding:0}
.mc-what li{display:grid;grid-template-columns:92px 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.mc-what .mono{padding-top:3px;font-size:13.5px;color:var(--vl)}
.mc-what h3{margin-bottom:6px;font-size:18px;letter-spacing:-.01em}
.mc-what p{margin:0;font-size:15.5px;color:var(--muted)}

/* FAQ wie auf der Startseite */
.mc-faq-grid{display:grid;grid-template-columns:.75fr 1.6fr;gap:48px;align-items:start}
.mc-faq{display:grid;gap:10px}
.mc-faq details{padding:0 24px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.mc-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;cursor:pointer;list-style:none;font-size:17px;font-weight:600}
.mc-faq summary::-webkit-details-marker{display:none}
.mc-faq summary::after{content:"+";flex:none;color:var(--vl);font-size:22px;font-weight:500;line-height:1}
.mc-faq details[open] summary::after{content:"−"}
.mc-faq details p{margin:0;padding:0 0 20px;color:var(--muted);animation:fade .35s ease}
.mc-faq a{color:var(--vl);text-decoration:underline;text-underline-offset:3px}

@media (max-width:920px){
  .mc-hero{padding:112px 0 52px}
  .mc-result{padding:32px 0 72px}
  .mc-ng{grid-template-columns:1fr}
  .mc-what{grid-template-columns:1fr}
  .mc-faq-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:640px){
  .mc-hero h1{text-align:left}
  .mc-hero .lead{margin:16px 0 28px;text-align:left}
  .mc-in{flex-direction:column}
  .mc-in input{flex:none;width:100%}
  .mc-in .btn{width:100%}
  .mc-v{padding:22px 20px}
  .mc-rows{padding:0 20px}
  .mc-row{grid-template-columns:28px 1fr;gap:12px;padding:20px 0}
  .mc-ic{width:28px;height:28px}
  .mc-next,.mc-foot{margin:0 20px}
  .mc-what li{grid-template-columns:1fr;gap:4px}
  .mc-faq details{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  .mc-res,.mc-ferr,.mc-faq details p{animation:none}
  .mc-spin{animation-duration:2.4s}
}

/* Druckansicht: nur das Ergebnis, hell, alle Details offen (mailcheck.js klappt sie bei beforeprint auf) */
@media print{
  [data-theme="dark"],[data-theme="dark"] .on-page{
    --bg:#FFFFFF;--bg2:#F1F3FF;--card:#FFFFFF;--line:#DDE1F3;--line2:#C9CEEA;--ink:#101437;--muted:#535978;--dim:#646A8A;
    --vl:#2B2FD9;--tint:#E9EAFF;--red:#C42538;--amber:#8A5200;--green:#147A4E;--red-t:#FDECEE;--amber-t:#FFF4E0;--green-t:#E7F5EE;color-scheme:light}
  body{background:#FFFFFF;color:#101437;font-size:12pt}
  .nav,.ft,.mc-hero,#pruefungen,#faq,.mc-next,.mc-foot .btn,.mc-copy,.mc-live,.mc-vnext{display:none}
  [data-page="biz"] main>section{display:none}
  .mc-result{padding:0}
  .mc-result[hidden]+.mc-print-empty{display:block;margin:0;padding:24px 0;font-size:16px}
  .mc-wrap{max-width:none;padding:0}
  .mc-res{border:0;border-radius:0;animation:none}
  .mc-ph{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin:0 0 14px;font-size:13px;color:var(--muted)}
  .mc-ph b{font:700 20px/1.2 var(--f-display);color:var(--ink)}
  .mc-src{display:block;margin:6px 0 0;font-size:12px;color:var(--dim)}
  .mc-v{border-radius:12px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mc-rows,.mc-foot{margin:0;padding-left:0;padding-right:0}
  .mc-row h3,.mc-say{break-after:avoid}
  .mc-recs li,.mc-v{break-inside:avoid}
  .mc-det summary{min-height:0;color:var(--ink)}
  .mc-det summary::after{display:none}
  .mc-recs li{border:1px solid var(--line);background:none}
}