/* myGenogramm – Startseite. Keine Skripte, keine fremden Schriften oder Inhalte. */
:root{--accent:#2563eb;--accent-dark:#6ea8ff;--text:#1d1d1f;--sub:#62626a;--tile:#f5f5f7;--hair:rgba(0,0,0,.1);--dim:#a1a1a6}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);background:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",system-ui,sans-serif;font-size:1.0625rem;line-height:1.47;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:.4rem}
.skip{position:absolute;left:-999rem}.skip:focus{left:1rem;top:1rem;z-index:10;background:#fff;padding:.75rem 1rem;border-radius:.75rem}
.in{max-width:64rem;margin:0 auto;padding:0 1.5rem}
.col{max-width:46rem;margin:0 auto;padding:0 1.5rem}

/* Kopfleiste */
.top{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--hair)}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 1.5rem;min-height:2.9rem}
.brand{font-size:1.05rem;font-weight:600;letter-spacing:-.02em;text-decoration:none;padding:.6rem 0}
.links{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.75rem}
.links a{text-decoration:none;font-size:.8125rem;padding:.95rem .2rem;color:#3a3a3f}
.links a:hover{color:var(--text)}
@media (max-width:40rem){.links .opt{display:none}.links{gap:0 1.1rem}}

/* Module */
.mod{margin-bottom:.75rem;padding:3.5rem 0 0;text-align:center;overflow:hidden}
.mod.pad{padding-bottom:3.5rem}
.light{background:var(--tile)}
.dark{background:#000;color:#f5f5f7}
.eyebrow{margin-bottom:.3rem;font-size:1.2rem;font-weight:600;color:var(--accent)}
.h{font-size:clamp(2.3rem,5.4vw,3.5rem);font-weight:600;letter-spacing:-.035em;line-height:1.07}
.tg{margin:.45rem auto 0;font-size:clamp(1.2rem,2.5vw,1.75rem);line-height:1.2;max-width:38rem}
.dark .tg,.dark .muted{color:var(--dim)}
.btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.85rem;margin-top:1.4rem}
.b{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:0 1.35rem;border-radius:1.4rem;font-size:1.0625rem;text-decoration:none}
.b.p{background:var(--accent);color:#fff}
.b.p:hover{filter:brightness(1.08)}
.b.o{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.b.o:hover{background:rgba(37,99,235,.08)}
.b.soon{box-shadow:inset 0 0 0 1px #b4b4b9;color:var(--sub)}
.dark .b.o{box-shadow:inset 0 0 0 1px var(--accent-dark);color:var(--accent-dark)}
.hero-art{display:block;width:100%;max-width:75rem;height:auto;margin:1.5rem auto 0}
.art{display:block;width:100%;height:auto;margin:2.5rem auto 0}
.art.lines{max-width:56rem}
.art.net{max-width:27rem;margin-top:auto}

/* Raster und Karten */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2.5rem 2rem;margin-top:3rem;text-align:left}
.cols.tight{gap:.75rem;margin-top:2.5rem}
.cols h3{font-size:1.25rem;font-weight:600}
.cols p{margin-top:.35rem}
.card{background:var(--tile);border-radius:1.5rem;padding:1.75rem}
.card h3{font-size:1.4rem;letter-spacing:-.02em}
.card p{margin-top:.5rem;color:var(--sub)}
.dev{background:#1d1d1f;border-radius:1.5rem;padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center}
.dev h3{margin-top:.4rem;font-size:1.4rem}
.dev p{margin:0;color:var(--dim)}
.dev .more{color:var(--accent-dark)}
.ico{width:2.75rem;height:2.75rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.more{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--accent);text-decoration:none}
.more:hover{text-decoration:underline}
.more.soon{color:var(--dim)}
.grid2{display:grid;grid-template-columns:1fr;gap:.75rem;padding:0 .75rem;margin-bottom:.75rem}
@media (min-width:52rem){.grid2{grid-template-columns:1fr 1fr}}
.tile{background:var(--tile);padding:3rem 1.5rem 2.5rem;text-align:center;display:flex;flex-direction:column;align-items:center;min-height:25rem;overflow:hidden}
.th{font-size:clamp(1.8rem,3.6vw,2.5rem);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.tt{margin-top:.35rem;font-size:1.3rem;line-height:1.25;max-width:26rem}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:auto;padding-top:2rem;max-width:26rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:0 1rem;border-radius:1.25rem;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08);font-size:.95rem;font-weight:500}
.chip::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)}
.bigword{margin-top:auto;padding-top:2rem;font-size:clamp(2.2rem,5vw,3.5rem);font-weight:600;letter-spacing:-.04em;line-height:1.05}
.bigword .g1{color:#86868b}.bigword .g2{color:#a1a1a6}
.bignum{margin-top:auto;padding-top:2rem;font-size:clamp(5rem,11vw,8rem);font-weight:600;letter-spacing:-.05em;line-height:.9;color:var(--accent)}

/* Zitat und Fragen */
.quote{padding:5rem 1.5rem 5.5rem;text-align:center}
.quote figure{max-width:52rem;margin:0 auto}
.quote .lbl{font-size:1.2rem;font-weight:600;color:var(--sub)}
.quote blockquote{margin-top:1.1rem;font-size:clamp(1.4rem,3.2vw,2.25rem);font-weight:600;letter-spacing:-.03em;line-height:1.2}
.quote blockquote span{color:#86868b}
.quote figcaption{margin-top:1.25rem;color:var(--sub)}
.faq{padding-bottom:5rem}
.faq .h{text-align:center}
.faq .list{margin-top:2.25rem;border-bottom:1px solid var(--hair)}
.q{padding:1.4rem 0;border-top:1px solid var(--hair)}
.q h3{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}
.q p{margin-top:.35rem;color:var(--sub);max-width:46rem}

/* Fuß */
.foot{background:var(--tile);color:var(--sub);padding:2rem 0 1.5rem}
.foot .cols{margin-top:0;gap:1.5rem 2rem}
.foot h2{font-size:.8125rem;font-weight:600;color:var(--text);margin-bottom:.25rem}
.foot ul{margin:0;padding:0;list-style:none}
.foot li a,.foot li span{display:inline-flex;align-items:center;min-height:2.75rem;font-size:.8125rem;text-decoration:none;color:#3a3a3f}
.foot li a:hover{text-decoration:underline}
.foot .legal{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--hair);font-size:.8125rem}

/* Rechtsseiten */
.page{padding:4.5rem 1.5rem 5rem}
.page .kicker{font-size:1.1rem;font-weight:600;color:var(--accent)}
.page h1{margin-top:.3rem;font-size:clamp(2.4rem,6vw,4rem);font-weight:700;letter-spacing:-.04em;line-height:1.05}
.page .lead{margin:1rem 0 2.5rem;font-size:1.25rem;line-height:1.35;color:var(--sub)}
.page .pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem;margin-bottom:2.5rem}
.page .box{background:var(--tile);border-radius:1.5rem;padding:1.75rem}
.page .box .lbl{margin-bottom:.35rem;font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.page address,.page .big{font-style:normal;font-size:1.2rem;line-height:1.45}
.page section{padding:2rem 0;border-top:1px solid var(--hair)}
.page h2{margin-bottom:.6rem;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.page h3{margin:1.25rem 0 .3rem;font-size:1.1rem;font-weight:600}
.page section p,.page section li{color:#3a3a3f}
.page section p + p,.page section ul + p,.page section p + ul{margin-top:.75rem}
.page ul{margin:0;padding-left:1.25rem}
.page a{color:var(--accent);text-decoration:none}
.page a:hover{text-decoration:underline}
.page .stand{margin-top:2rem;font-size:.9rem;color:var(--sub)}
.wrapper{min-height:100vh;display:flex;flex-direction:column}
.wrapper main{flex:1}

/* Zeichnungen */
.sy{fill:#fff;stroke:#1d1d1f;stroke-width:2}
.l{fill:none;stroke:#1d1d1f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.l.thin{stroke-width:1.5}
.n{font-size:15px;font-weight:600;fill:#1d1d1f}
.n.sm{font-size:14px}
.a{font-size:15px;font-weight:600;fill:#1d1d1f;text-anchor:middle}
.s{font-size:13px;fill:#62626a}
.s.b{fill:#1d1d1f;font-weight:600}
.end{text-anchor:end}.mid{text-anchor:middle}
.shadow{filter:drop-shadow(0 8px 12px rgba(0,0,0,.09))}
.area{fill:var(--accent);fill-opacity:.06}
.ring{fill:#fff;stroke:var(--accent);stroke-width:2.5}
.pill{fill:#fff}
.dotA{fill:var(--accent)}.dotG{fill:#8e8e93}
.r{fill:none;stroke-linecap:round;stroke-linejoin:round}
.r.close{stroke:#15803d;stroke-width:7}
.r.closein{stroke:#f5f5f7;stroke-width:2.5}
.r.dist{stroke:#c2410c;stroke-width:2.5;stroke-dasharray:3 9}
.r.strong{stroke:var(--accent);stroke-width:5}
.r.plain{stroke:#8e8e93;stroke-width:2}
.r.good{stroke:#15803d;stroke-width:2.5}
.r.good3{stroke:#15803d;stroke-width:3.5}
.r.grey{stroke:#62626a;stroke-width:2.5;stroke-dasharray:3 9}
.r.grey2{stroke:#62626a;stroke-width:2;stroke-dasharray:3 8}
.r.bad{stroke:#b42c18;stroke-width:2.5}
.r.care{stroke:var(--accent);stroke-width:2.5}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.top,.btns,.foot{display:none}}