/* Baukasten - Ratgeber zu Konstruktionsspielzeug */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:ital,wght@0,400;0,600;1,400&family=Ubuntu+Mono:wght@400;500;600&display=swap');

:root{
  --paper:       #FFF5F5;
  --paper-2:     #FFE8E8;
  --paper-3:     #FFD6D6;
  --card:        #FFFAFA;
  --ink:         #1D3557;
  --ink-soft:    #457B9D;
  --ink-faint:   #A8DADC;
  --steel:       #457B9D;
  --steel-deep:  #1D3557;
  --steel-light: #A8DADC;
  --ochre:       #E63946;
  --ochre-deep:  #C1121F;
  --ochre-light: #F4A261;
  --brick:       #9B2226;
  --line:        rgba(29,53,87,.14);
  --line-strong: rgba(29,53,87,.30);
  --grid:        rgba(69,123,157,.07);
  --shadow:      0 1px 0 rgba(29,53,87,.04), 0 18px 44px -30px rgba(29,53,87,.55);
  --font-display:'Fredoka', sans-serif;
  --font-body:   'Nunito', sans-serif;
  --font-mono:   'Ubuntu Mono', monospace;
  --measure: 70ch;
  --gutter: clamp(20px, 5vw, 64px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-weight:400; font-size:clamp(17px,1.04rem + .15vw,19px); line-height:1.72; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:38px 38px; mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.5)); }
img,svg{ max-width:100%; display:block; }
a{ color:var(--steel-deep); text-decoration:none; }
a:hover{ color:var(--ochre-deep); }
::selection{ background:rgba(69,123,157,.18); }
:focus-visible{ outline:2.5px solid var(--steel); outline-offset:3px; border-radius:2px; }
h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:.96; color:var(--ink); margin:0; text-transform:uppercase; }
h1{ font-size:clamp(2.9rem,6vw + 1rem,6rem); letter-spacing:.005em; }
h2{ font-size:clamp(2rem,3vw + 1rem,3.4rem); letter-spacing:.008em; }
h3{ font-size:clamp(1.4rem,1.4vw + .9rem,2rem); letter-spacing:.01em; }
h4{ font-family:var(--font-mono); font-weight:600; font-size:.92rem; letter-spacing:.04em; margin:0; color:var(--ink); }
p{ margin:0 0 1.1em; }
strong{ font-weight:600; color:var(--ink); }
em{ color:var(--steel-deep); font-style:italic; }
.eyebrow{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; font-weight:500; color:var(--steel); margin:0 0 1.1rem; display:flex; align-items:center; gap:.7rem; }
.eyebrow::before{ content:"+"; color:var(--ochre); font-weight:600; }
.lead{ font-size:clamp(1.18rem,1vw + 1rem,1.45rem); line-height:1.6; color:var(--ink-soft); font-weight:400; font-family:var(--font-body); }
.wrap{ width:min(1180px,100% - 2*var(--gutter)); margin-inline:auto; }
.prose{ max-width:var(--measure); }
section{ padding-block:clamp(48px,7vw,104px); }
.site-head{ position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:saturate(130%) blur(10px); border-bottom:1px solid var(--line); }
.site-head .bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.8rem; }
.brand{ display:flex; align-items:center; gap:.7rem; color:var(--ink); }
.brand:hover{ color:var(--ink); }
.brand .mark{ width:36px; height:36px; flex:none; color:var(--steel); }
.brand .name{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; line-height:.9; letter-spacing:.02em; text-transform:uppercase; }
.brand .name small{ display:block; font-family:var(--font-mono); font-weight:400; font-size:.54rem; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); margin-top:.3rem; }
.nav{ display:flex; align-items:center; gap:.1rem; }
.nav a{ font-family:var(--font-mono); font-size:.78rem; font-weight:500; color:var(--ink-soft); padding:.5rem .6rem; border-radius:4px; letter-spacing:.02em; white-space:nowrap; text-transform:uppercase; }
.nav a:hover{ color:var(--ink); background:rgba(69,123,157,.08); }
.nav a[aria-current="page"]{ color:var(--steel); }
.nav a[aria-current="page"]::after{ content:""; display:block; height:2px; background:var(--ochre); margin-top:3px; border-radius:2px; }
.nav-toggle{ display:none; }
.burger{ display:none; border:1px solid var(--line-strong); background:transparent; width:44px; height:40px; border-radius:6px; cursor:pointer; color:var(--ink); align-items:center; justify-content:center; }
.burger svg{ width:22px; height:22px; }
@media (max-width:1000px){ .burger{ display:inline-flex; } .nav{ position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:.5rem var(--gutter) 1rem; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .28s ease, visibility .28s; } .nav a{ padding:.85rem .2rem; border-bottom:1px solid var(--line); font-size:.9rem; } .nav a[aria-current="page"]::after{ display:none; } .nav-toggle:checked ~ .nav{ max-height:80vh; visibility:visible; } }
.hero{ position:relative; overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,5rem); align-items:center; padding-block:clamp(52px,8vw,116px); }
.hero h1{ margin-bottom:.34em; }
.hero h1 .accent{ color:var(--ochre); }
.hero-art{ position:relative; }
.hero-art svg{ width:100%; height:auto; filter:drop-shadow(0 24px 44px rgba(29,53,87,.20)); }
@media (max-width:860px){ .hero .wrap{ grid-template-columns:1fr; } .hero-art{ order:-1; max-width:440px; margin-inline:auto; } }
.dimline{ color:var(--steel); opacity:.85; }
.dimline svg{ width:100%; height:30px; }
.dimline .lab{ font-family:var(--font-mono); font-size:11px; fill:var(--steel); letter-spacing:.12em; }
.btn{ font-family:var(--font-mono); font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.5rem; border-radius:3px; cursor:pointer; border:1px solid transparent; transition:transform .15s ease, background .2s ease; }
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--steel); color:var(--paper); }
.btn-primary:hover{ background:var(--steel-deep); color:var(--paper); }
.btn-ghost{ border-color:var(--line-strong); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--steel); color:var(--steel); }
.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.cards{ display:grid; gap:1.4rem; }
.cards.cols-3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .cards.cols-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cards.cols-3{ grid-template-columns:1fr; } }
.card{ background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.6rem 1.6rem 1.7rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.55rem; transition:transform .18s ease, border-color .2s ease; position:relative; }
a.card:hover{ transform:translateY(-4px); border-color:var(--steel); color:var(--ink); }
.card .sheet{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; color:var(--ochre-deep); text-transform:uppercase; }
.card h3{ font-size:1.5rem; }
.card p{ color:var(--ink-soft); font-size:.97rem; margin:0; }
.card .go{ margin-top:auto; font-family:var(--font-mono); font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--steel); display:inline-flex; gap:.4rem; align-items:center; }
.section-head{ max-width:62ch; margin-bottom:clamp(2rem,4vw,3.4rem); }
.section-head .lead{ margin-top:1rem; }
.article h2{ margin-top:2.6em; margin-bottom:.55em; }
.article h2:first-child{ margin-top:0; }
.article h3{ margin-top:1.9em; margin-bottom:.4em; color:var(--steel-deep); }
.article p, .article ul, .article ol{ max-width:var(--measure); }
.article ul, .article ol{ padding-left:1.3em; }
.article li{ margin-bottom:.5em; }
.article li::marker{ color:var(--ochre); }
.article > .opener::first-letter{ font-family:var(--font-display); font-weight:700; float:left; font-size:4.2rem; line-height:.72; padding:.08em .14em 0 0; color:var(--steel); }
figure{ margin:2.4em 0; }
figure svg, figure img{ width:100%; border-radius:8px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
figcaption{ font-family:var(--font-mono); font-size:.76rem; color:var(--ink-faint); margin-top:.8rem; letter-spacing:.01em; line-height:1.55; border-left:2px solid var(--ochre); padding-left:.8rem; max-width:58ch; }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; margin:2.6em 0; }
.split-art svg{ width:100%; border-radius:8px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
@media (max-width:780px){ .split{ grid-template-columns:1fr; } }
.note{ border-radius:8px; padding:1.3rem 1.5rem; margin:2em 0; border:1px solid var(--line); background:var(--paper-2); max-width:var(--measure); }
.note h4{ margin-bottom:.4rem; display:flex; align-items:center; gap:.6rem; }
.note h4 svg{ width:20px; height:20px; flex:none; }
.note p:last-child{ margin-bottom:0; }
.note.warn{ background:#F3E7E0; border-color:rgba(160,80,58,.38); }
.note.warn h4{ color:var(--brick); }
.note.tip{ background:#E4EBEE; border-color:rgba(69,123,157,.30); }
.note.tip h4{ color:var(--steel-deep); }
.specs{ width:100%; border-collapse:collapse; margin:1.8em 0; font-size:.95rem; }
.specs caption{ text-align:left; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ochre-deep); margin-bottom:.8rem; }
.specs th, .specs td{ text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.specs thead th{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid var(--line-strong); }
.specs tbody th{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; text-transform:uppercase; letter-spacing:.01em; color:var(--steel-deep); white-space:nowrap; }
.specs tr:hover td, .specs tr:hover th{ background:rgba(69,123,157,.05); }
.band{ background:var(--steel-deep); color:#DCE6EC; }
.band h2,.band h3{ color:#F2F6F8; }
.band .eyebrow{ color:var(--ochre-light); }
.band .eyebrow::before{ color:var(--ochre-light); }
.band p{ color:#C3D2DB; }
.band a{ color:var(--ochre-light); }
.band .lead{ color:#D5E1E8; }
.band .wrap.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:center; }
.tlist{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; margin-top:2rem; }
@media (max-width:780px){ .tlist{ grid-template-columns:1fr; } }
.tcard{ display:grid; grid-template-columns:150px 1fr; gap:1.4rem; align-items:start; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1.4rem; box-shadow:var(--shadow); }
.tcard .pic{ background:var(--paper-2); border-radius:6px; padding:.4rem; border:1px solid var(--line); }
.tcard .pic svg{ width:100%; height:auto; }
.tcard h3{ margin:0 0 .3rem; font-size:1.4rem; }
.tcard .meta{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ochre-deep); margin-bottom:.5rem; }
.tcard p{ margin:0; font-size:.94rem; color:var(--ink-soft); }
@media (max-width:500px){ .tcard{ grid-template-columns:1fr; } }
.gloss dt{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; text-transform:uppercase; letter-spacing:.01em; color:var(--steel-deep); margin-top:1.6em; }
.gloss dd{ margin:.3em 0 0; max-width:var(--measure); color:var(--ink-soft); }
.gloss dd + dt{ border-top:1px solid var(--line); padding-top:1.2em; }
.site-foot{ background:var(--ink); color:#B8C4CC; padding-block:clamp(40px,6vw,72px) 2.2rem; }
.site-foot a{ color:#CBD6DD; }
.site-foot a:hover{ color:var(--ochre-light); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.4rem; }
@media (max-width:700px){ .foot-grid{ grid-template-columns:1fr; gap:1.8rem; } }
.foot-grid h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ochre-light); margin-bottom:1rem; }
.foot-grid ul{ list-style:none; padding:0; margin:0; }
.foot-grid li{ margin-bottom:.55rem; font-size:.94rem; }
.foot-brand .name{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:var(--paper); }
.foot-brand p{ color:#8595A0; font-size:.9rem; max-width:36ch; margin-top:.6rem; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem; display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.78rem; color:#7C8A94; font-family:var(--font-mono); }
.foot-bottom .disc{ max-width:64ch; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--steel); color:#fff; padding:.7rem 1rem; z-index:100; }
.skip:focus{ left:1rem; top:1rem; }