/* Kopfbereich + Knoepfe der Startseite - Vorlage fuer alle Unterseiten.
   Wird NACH moes-subpages.css geladen und gewinnt deshalb.
   Erzeugt aus index.html am 30.07.2026. */

:root {--ink:#0d0f14; --ink-2:#141821; --carbon:#0a0c11;
    --copper:#c9673d; --copper-2:#e08a52; --copper-d:#a44d2e;
    --cyan:#4fd1c5; --amber:#f0b429;
    --bg:#f7f5f1; --surface:#ffffff; --text:#1a1c22; --muted:#63666f;
    --line:#e6e2da; --line-2:#f0ece4; --radius:16px;
    --shadow:0 18px 40px -18px rgba(20,18,14,.24); --shadow-lg:0 40px 90px -30px rgba(8,8,10,.55);
    --maxw:1200px; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.wrap {width:auto;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.btn {position:relative;display:inline-flex;align-items:center;gap:.55rem;font-weight:750;font-size:1rem;padding:.95rem 1.6rem;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .25s,background .2s;white-space:nowrap;touch-action:manipulation;overflow:hidden}
.btn:hover {transform:translateY(-2px)}
.btn:active {transform:translateY(0)}
.btn-primary {background:linear-gradient(180deg,#d1734a,#b0522f);color:#fff;box-shadow:0 14px 30px -10px rgba(201,103,61,.65),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary::after {content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.35) 50%,transparent 68%);transform:translateX(-130%);transition:transform .65s ease;pointer-events:none}
.btn-primary:hover::after {transform:translateX(130%)}
.btn-ghost {background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.26);backdrop-filter:blur(6px)}
.btn-ghost:hover {background:rgba(255,255,255,.13)}
.btn-dark {background:#16191f;color:#fff}
.btn-dark:hover {background:#20242c}
.btn-lg {padding:1.05rem 1.85rem;font-size:1.04rem}
.topbar {background:#06070a;color:#b9bcc4;font-size:.8rem}
.topbar .wrap {display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;align-items:center;padding:7px 22px}
.topbar a {color:#fff;font-weight:600}
.topbar .sep {margin-left:auto;display:flex;gap:.5rem;align-items:center;color:#8b8f98}
header.nav {position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);transition:box-shadow .2s}
header.nav.scrolled {box-shadow:0 10px 30px -18px rgba(20,18,14,.5)}
.nav .wrap {display:flex;align-items:center;gap:1.2rem;height:60px}
.brand {display:flex;align-items:center;gap:.65rem;font-weight:850;color:var(--ink)}
.brand .mark {height:26px;width:auto;display:block;flex:0 0 auto}
.brand small {display:block;font-size:.56rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:2px}
nav.links {margin-left:auto;display:flex;gap:1.35rem;align-items:center}
nav.links a {font-weight:650;color:#3b3f48;font-size:.95rem}
nav.links a:hover {color:var(--copper)}
.nav .cta {display:flex;gap:.6rem;align-items:center}
.nav .btn {padding:.55rem 1.15rem;font-size:.9rem}
.navtoggle {display:none;background:none;border:0;cursor:pointer;padding:8px}
.navtoggle span {display:block;width:24px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
.mailfab {position:fixed;right:18px;bottom:18px;z-index:60;display:inline-flex;align-items:center;gap:9px;height:54px;padding:0 20px 0 16px;border-radius:999px;background:linear-gradient(180deg,#d1734a,#b0522f);color:#fff;font-weight:750;box-shadow:0 16px 34px -10px rgba(201,103,61,.7);animation:bob 5s ease-in-out infinite;transition:transform .18s}
.mailfab:hover {transform:translateY(-2px)}
.skip {position:absolute;left:-999px;top:0;z-index:200;background:#fff;color:var(--ink);font-weight:700;padding:12px 18px;border-radius:0 0 10px 0;box-shadow:var(--shadow)}
.skip:focus {left:0}
@media(max-width:820px) {
.nav .wrap {justify-content:space-between}
nav.links {display:none}
nav.links.open {display:flex;position:absolute;top:60px;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:16px 22px;gap:.4rem;box-shadow:var(--shadow)}
nav.links.open a {padding:.6rem 0;border-bottom:1px solid var(--line-2)}
.navtoggle {display:block}
}
@media(max-width:560px) {
.topbar .wrap {justify-content:center;padding:7px 14px}
.topbar .wrap span:nth-child(2),.topbar .sep {display:none}
.brand>span:not(.mark) {display:none}
.nav .wrap {gap:.7rem;height:54px}
.nav .cta .btn-primary {display:none}
.mailfab {bottom:80px;padding:0;width:54px;height:54px;justify-content:center}
.mailfab .lbl {display:none}
}
@media(prefers-reduced-motion:reduce) {
.orb,.coin,.pcb,.badge3,.chip3d,.mailfab {animation:none!important}
.btn-primary::after {display:none}
}
.brand img {display:block;width:auto;height:30px;max-width:none}
@media(max-width:560px) {
.wrap {padding-left:18px;padding-right:18px}
nav.links.open {top:54px;max-height:calc(100vh - 90px);overflow-y:auto}
.navtoggle {min-width:44px;min-height:44px;padding:8px 10px}
.mailfab {display:none}
}
@media(max-width:360px) {
.topbar {font-size:.72rem}
.nav .cta .btn-primary {padding:.55rem .75rem;font-size:.8rem}
}
@media(max-width:560px) {
.callfab,.mailfab,.wa {display:none!important}
nav.links.open {top:54px!important;max-height:calc(100vh - 90px);overflow-y:auto}
.navtoggle {min-width:44px;min-height:44px;padding:8px 10px}
}