@font-face{font-family:"Baloo 2";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/baloo-2-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo 2";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/baloo-2-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Baloo 2";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/baloo-2-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo 2";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/baloo-2-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Baloo 2";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/baloo-2-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Baloo 2";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/baloo-2-latin-ext-800-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Klemmipedia im Design von klemmbausteine.store: bunt und verspielt in den Farben des Logos,
   Baloo 2, dicke dunkle Umrandungen wie bei den Attribut-Icons. Gilt nur für die öffentliche Seite. */
body.kb{--ink:#1B1B2F;--mute:#4D5266;--bg:#FFF8E8;--card:#fff;--line:#E9DFC6;--red:#E02410;--yel:#FFC400;--blue:#0A6CD6;--green:#1E9E3A;--navy:#16213E;--ok:#1E9E3A;
  --r:20px;--bd:3px solid var(--ink);--shadow:0 5px 0 var(--ink);--head:"Baloo 2","Nunito","Trebuchet MS",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
.kb h1,.kb h2,.kb h3,.kb .brand,.kb .btn,.kb nav a,.kb .tile b,.kb .stat b,.kb .badge,.kb .langs a,.kb .topics summary,.kb .pill{font-family:var(--head)}
.kb h1{font-weight:800;letter-spacing:0;line-height:1.05}.kb h2{font-weight:700}
.kb .hero h1{font-size:52px;letter-spacing:0}
.kb a{color:var(--blue)}

/* Farbstreifen oben */
.stripe{display:flex;height:10px}.stripe i{flex:1}.stripe i:nth-child(1){background:var(--red,#E02410)}.stripe i:nth-child(2){background:#FFC400}.stripe i:nth-child(3){background:#0A6CD6}.stripe i:nth-child(4){background:#1E9E3A}

/* Kopf */
.kb .top{background:#fff;border-bottom:var(--bd);position:sticky;top:0;z-index:20}
.kb .brand{font-size:28px;font-weight:800;color:var(--ink)}.kb .top .brand{font-size:27px}
.kb .brand img{height:52px;width:auto}
.kb nav a{font-weight:700;font-size:18px;padding:4px 12px;border-radius:999px;border-bottom:0;color:var(--ink);transition:background .12s}
.kb nav a:hover{background:var(--yel);border-bottom:0}
.kb nav a[aria-current=page]{background:var(--ink);color:#fff;border-bottom:0}
.kb .top nav{gap:4px 6px;font-size:18px}
.kb .badge{background:var(--red);border:2px solid var(--ink);color:#fff;font-weight:700}
.kb .langs{border:2px solid var(--ink);padding:2px}.kb .langs a{padding:0 9px;font-size:15px;border-radius:999px}.kb .langs a:hover{background:var(--yel)}
.kb .langs a[aria-current]{background:var(--ink);color:#fff}

/* Knöpfe */
.kb .btn{background:var(--red);color:#fff;border:var(--bd);border-radius:999px;box-shadow:0 4px 0 var(--ink);font-size:18px;font-weight:700;padding:8px 26px;min-height:46px;transition:transform .08s,box-shadow .08s}
.kb .btn:hover{transform:translateY(-1px);box-shadow:0 5px 0 var(--ink)}
.kb .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.kb .btn.ghost{background:#fff;color:var(--ink);border:var(--bd)}
.kb .btn.small{min-height:38px;padding:4px 16px;font-size:16px}
.kb .btn:disabled{box-shadow:none;transform:none}

/* Eingabefelder */
.kb input:not([type=checkbox]):not([type=radio]),.kb select,.kb textarea{border:3px solid var(--ink);border-radius:14px;background:#fff}
.kb input:focus,.kb select:focus,.kb textarea:focus,.kb button:focus-visible,.kb a:focus-visible{outline:4px solid var(--blue);outline-offset:2px}
.kb label{font-family:var(--head);font-weight:600;font-size:16px}

/* Karten */
.kb .card,.kb .setcard,.kb .partcard,.kb .tile,.kb .qa{background:#fff;border:var(--bd);border-radius:var(--r);box-shadow:var(--shadow)}
.kb .setcard{overflow:hidden;transition:transform .12s,box-shadow .12s}
.kb .setcard:hover,.kb .partcard:hover,.kb .tile:hover{transform:translateY(-3px);box-shadow:0 8px 0 var(--ink);border-color:var(--ink)}
.kb .thumb{background:#FFF1BF;border-bottom:var(--bd);height:160px}
.kb .meta b{font-family:var(--head);font-size:19px;font-weight:700;line-height:1.2}
.kb .cards{gap:24px}.kb .card{margin:22px 0}
.kb .pill{border:2px solid var(--ink);border-radius:999px;background:#fff;font-weight:600;padding:0 10px}
.kb .pill.st-aktiv{background:#BFEBCB}.kb .pill.st-angekuendigt{background:#FFE9A0}.kb .pill.st-eingestellt{background:#FFD0C9}
.kb .flash{border:var(--bd);border-radius:16px}.kb .flash.ok{background:#D9F5E0;border:var(--bd)}

/* Startseite */
.kb .hero{padding:42px 0 18px}
.kb .hero .lead{font-size:20px;color:var(--mute)}
.kb .mascot{height:210px;filter:drop-shadow(0 6px 0 rgba(27,27,47,.18))}
.kb .stats{gap:24px}
.kb .card.stat{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 18px}
.kb .card.stat:nth-child(1){background:#FFE9A0}.kb .card.stat:nth-child(2){background:#CFE5FF}.kb .card.stat:nth-child(3){background:#CDEFD6}
.kb .stat b{font-size:46px;font-weight:800;line-height:1}.kb .stat span{font-family:var(--head);font-size:19px;font-weight:600;color:var(--ink)}
.kb a.stat:hover,.kb a.stat:focus-visible{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 9px 0 var(--ink)}
.kb .tile{padding:18px}.kb .tile b{font-size:21px}

/* Attribut-Icons */
.ico{display:inline-block;width:32px;height:32px;vertical-align:middle;margin-right:8px;flex:none}
.ico.sm{width:24px;height:24px;margin-right:5px;vertical-align:-6px}
.ico.big{width:92px;height:92px;margin:0 0 6px}
.kb .facts{gap:10px 22px;align-items:center}.kb .facts dt{display:flex;align-items:center;font-family:var(--head);font-weight:600;font-size:18px;color:var(--ink)}
.kb .facts dd{font-size:18px}
.kb .dots i{border:2px solid var(--ink)}.kb .dots i.on{background:var(--yel)}

/* Überschriften der Abschnitte mit farbigem Balken */
.kb h2.sec{display:inline-block;font-size:28px;margin:36px 0 14px;padding:0 4px;background:linear-gradient(transparent 62%,var(--yel) 62%)}
.kb .foot h2.sec,.kb .foot h3.sec{background:none;font-size:18px;color:#fff}

/* Tabellen, Seitenwechsel, Brotkrumen */
.kb table{border-collapse:separate;border-spacing:0;width:100%}.kb th{font-family:var(--head);font-weight:700;text-align:left;border-bottom:var(--bd);padding:8px 10px}
.kb td{border-bottom:2px solid var(--line);padding:8px 10px}
.kb .pager{gap:18px;font-family:var(--head);font-weight:600}
.kb .crumb,.kb .crumb a{color:var(--mute)}
.kb .topics details{border:var(--bd);border-radius:16px;background:#fff;padding:12px 18px;margin:0 0 14px;box-shadow:0 4px 0 var(--ink)}
.kb .topics summary{font-size:21px;font-weight:700}
.kb .qa.good{background:#D9F5E0;border-color:var(--ink)}.kb .qa.bad{background:#FFD9D4;border-color:var(--ink)}
.kb .swatch{border:2px solid var(--ink);width:18px;height:18px}
.kb .thumb img.ph,.kb .imgbox img.ph{filter:none}
.kb .imgbox{background:#FFF1BF;border:var(--bd);border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}

/* Fußzeile: dunkel, mit Farbstreifen */
.kb .foot{max-width:none;margin:64px 0 0;padding:0;background:var(--navy);color:#E8EAF3;border-top:10px solid transparent;border-image:linear-gradient(90deg,#E02410 0 25%,#FFC400 0 50%,#0A6CD6 0 75%,#1E9E3A 0) 1}
.kb .foot>*{max-width:1100px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
.kb .foot>*:first-child{padding-top:30px}.kb .foot>*:last-child{padding-bottom:34px}
.kb .foot a,.kb .foot .footnav a{color:#FFD84D;font-weight:600}.kb .foot a:hover{color:#fff}
.kb .foot .muted,.kb .foot .footnav a{color:#FFD84D}.kb .foot p,.kb .foot .prose{color:#E8EAF3}
.kb .foot .linklist b{color:#fff;font-family:var(--head)}
.kb .foot h2,.kb .foot h3{color:#fff}

/* Handy */
@media(max-width:760px){
  .kb .hero h1{font-size:38px}.kb .mascot{height:130px}
  .kb .brand,.kb .top .brand{font-size:23px}.kb .brand img{height:44px}
  .kb .stat b{font-size:38px}.ico.big{width:72px;height:72px}
  .kb h2.sec{font-size:24px}
  .kb .btn{font-size:17px}
  .kb .top{position:static}
  .js .top nav a{border-radius:12px;font-size:19px;border-bottom:2px solid var(--line)}
  .js .top nav a[aria-current=page]{background:var(--ink);color:#fff;border-bottom:2px solid var(--ink)}
  .kb .navtoggle{border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
  .kb .navtoggle span{background:var(--ink)}
}
@media(prefers-reduced-motion:reduce){.kb *{transition:none!important}}

/* Feinschliff */
.kb nav a{font-size:16.5px;padding:3px 10px}.kb .top nav{font-size:16.5px;gap:2px 4px}
.kb .top .bar{flex-wrap:nowrap}
.kb a.stat,.kb a.stat b,.kb .setcard,.kb .setcard b,.kb .partcard,.kb .partcard b{color:var(--ink)}
.kb .tile b{color:var(--blue)}
.kb .facts dt .ico{width:40px;height:40px}
.kb h2.sec .muted{background:#fff0;font-weight:600;font-size:16px}
.kb h2.sec{background:none;padding:0;border-bottom:6px solid var(--yel);line-height:1.15}
.kb .foot h2.sec,.kb .foot h3.sec{border-bottom:0}
@media(max-width:760px){.kb .top .bar{flex-wrap:wrap}}

.orderbtn{display:inline-block;line-height:0}.orderbtn img{width:240px;max-width:100%;height:auto;transition:transform .15s}.orderbtn:hover img,.orderbtn:focus img{transform:scale(1.04)}