/* makertools.info · Sortierkasten über der Werkbank
   Farben C „Werkbank am Abend“, Schriften selbst gehostet. Tokens zum Anpassen: tweaks.css */

@font-face{font-family:"Big Shoulders";src:url(../fonts/big-shoulders-display-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;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:"Big Shoulders";src:url(../fonts/big-shoulders-display-700-latin-ext.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Big Shoulders";src:url(../fonts/big-shoulders-display-800-latin.woff2) format("woff2");font-weight:800;font-display:swap;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:"Big Shoulders";src:url(../fonts/big-shoulders-display-800-latin-ext.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-400-latin.woff2) format("woff2");font-weight:400;font-display:swap;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:"Plex";src:url(../fonts/ibm-plex-sans-400-latin-ext.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-600-latin.woff2) format("woff2");font-weight:600;font-display:swap;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:"Plex";src:url(../fonts/ibm-plex-sans-600-latin-ext.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-700-latin.woff2) format("woff2");font-weight:700;font-display:swap;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:"Plex";src:url(../fonts/ibm-plex-sans-700-latin-ext.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-500-latin.woff2) format("woff2");font-weight:500;font-display:swap;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:"Plex Mono";src:url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --grund:#ebe5de; --grund-tief:#e3dcd3; --flaeche:#efe9e2; --flaeche-hell:#f6f2ed; --linie:#d5cbbf;
  --holz:#4a403a; --tinte:#3a312c; --leise:#6f6358;
  --akzent:#2b8578; --auf-akzent:#ffffff; --akzent-text:#1f7368; --akzent-glow:rgba(43,133,120,.30);
  --laser:#d9692a; --kloetz:#e3b33a; --auf-kloetz:#3a2c0b; --kloetz-text:#8a6410; --kloetz-glow:rgba(227,179,58,.38);
  --fehler:#b3412a;
  --schrift-titel:"Big Shoulders","Arial Narrow",sans-serif;
  --schrift-text:"Plex",system-ui,-apple-system,"Segoe UI",sans-serif;
  --schrift-mono:"Plex Mono",ui-monospace,Consolas,monospace;
  --breite:1200px; --rand:16px; --radius:12px; --r-karte:18px; --r-gross:24px;
  /* weiche Schatten: Licht von oben links */
  --soft-hoch:7px 7px 16px rgba(150,132,112,.32),-7px -7px 16px rgba(255,255,255,.85);
  --soft-schwebe:12px 14px 26px rgba(150,132,112,.38),-8px -8px 18px rgba(255,255,255,.9);
  --soft-tief:inset 3px 3px 6px rgba(150,132,112,.30),inset -3px -3px 6px rgba(255,255,255,.85);
  --soft-flach:3px 3px 8px rgba(150,132,112,.25),-3px -3px 8px rgba(255,255,255,.8);
}
@media (min-width:720px){:root{--rand:32px}}
@media (min-width:1100px){:root{--rand:48px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px;color-scheme:light;scrollbar-color:#cfc4b6 var(--grund)}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 1.0625rem/1.6 var(--schrift-text);caret-color:var(--akzent)}
::selection{background:var(--akzent);color:var(--auf-akzent)}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--akzent-text);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--akzent);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--schrift-titel);font-weight:800;line-height:1;margin:0;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,7.2vw,4.25rem)}
h2{font-size:clamp(2.1rem,5.2vw,3.25rem)}
h3{font-size:1.5rem;font-weight:700}
p{margin:0}
.innen{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:8px;top:-60px;z-index:20;background:var(--kloetz);color:var(--auf-kloetz);padding:10px 14px;font-weight:700;border-radius:var(--radius)}
.sprung:focus{top:8px}

/* Kopf */
.kopf{position:relative;z-index:10}
.kopf .innen{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.marke{display:block;flex:none}
.marke img{height:32px;width:auto}
.menue-knopf{display:inline-flex;align-items:center;gap:8px;background:var(--flaeche);border:0;box-shadow:var(--soft-flach);color:var(--tinte);font:600 .95rem var(--schrift-text);padding:9px 14px;border-radius:var(--radius);cursor:pointer}
.menue-knopf span{display:block;width:16px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
.nav{display:none}
.nav.offen{display:block;position:absolute;left:0;right:0;top:100%;background:var(--flaeche-hell);box-shadow:0 18px 30px rgba(120,100,80,.18);border-radius:0 0 var(--r-gross) var(--r-gross);padding:8px var(--rand) 20px}
.nav ul{list-style:none;margin:0;padding:0}
.nav li a{display:block;padding:12px 0;color:var(--tinte);text-decoration:none;font-weight:600;border-bottom:1px dashed var(--linie)}
.nav a[aria-current="page"]{color:var(--akzent-text)}
.nav .kl a{color:var(--kloetz-text)}
.nav .kontakt-knopf{display:inline-block;margin-top:14px}
.knopf-rahmen{display:inline-block;border:0;background:var(--flaeche);box-shadow:var(--soft-flach);color:var(--tinte);padding:9px 18px;border-radius:var(--radius);font-weight:600;font-size:.95rem;text-decoration:none}
.knopf-rahmen:hover{box-shadow:var(--soft-hoch)}
@media (min-width:960px){
  .menue-knopf{display:none}
  .nav,.nav.offen{display:flex;align-items:center;gap:28px;position:static;background:none;border:0;box-shadow:none;border-radius:0;padding:0}
  .nav ul{display:flex;gap:26px}
  .nav li a{padding:6px 0;border:0;font-size:.97rem}
  .nav li a:hover{color:var(--akzent-text)}
  .nav .kl a:hover{color:var(--holz)}
  .nav .kontakt-knopf{margin:0}
}

/* Einstieg */
.einstieg{padding:28px 0 8px}
@media (min-width:720px){.einstieg{padding-top:40px}}
.einstieg h1{max-width:22ch}
.einstieg .unter{margin-top:16px;font-size:1.15rem;color:var(--leise);max-width:40rem}
.einstieg .unter strong{color:var(--kloetz-text);font-weight:600}
.wege{display:grid;gap:24px;margin-top:32px}
@media (min-width:880px){.wege{grid-template-columns:1fr 1fr;gap:28px}}
.hinweis{margin-top:18px;font:500 .82rem/1.5 var(--schrift-mono);color:var(--leise)}

/* Schublade: große, weich erhabene Karte */
.lade{display:flex;background:var(--flaeche);border-radius:var(--r-gross);box-shadow:var(--soft-hoch);color:var(--tinte);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.lade .front{flex:1;position:relative;padding:26px 24px 28px;display:flex;flex-direction:column}
@media (min-width:720px){.lade .front{padding:30px 32px 34px}}
.lade:hover,.lade:focus-visible{transform:translateY(-3px);box-shadow:var(--soft-schwebe)}
.lade:focus-visible{outline-offset:4px}
.frage{font:700 clamp(1.55rem,3.6vw,1.95rem)/1.05 var(--schrift-titel)}
.zack{display:block;font:800 clamp(3.2rem,9vw,4.6rem)/.9 var(--schrift-titel);margin:8px 0 12px;color:var(--akzent-text)}
.lade.kl .zack{color:#b8880f}
.lade p{color:var(--leise);max-width:30rem}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:auto;padding-top:20px}
.mini span{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--grund)}
.mini img{width:100%;height:100%;object-fit:cover}

/* Schildchen: kleine, eingedrückte Marke über Karten */
.etikett{display:inline-flex;align-self:flex-start;margin-bottom:14px}
.etikett span{display:block;background:var(--flaeche);box-shadow:var(--soft-tief);color:var(--leise);font:600 .8rem/1 var(--schrift-text);letter-spacing:.02em;padding:8px 13px;border-radius:999px}
.etikett.tuerkis span{color:var(--akzent-text)}
.etikett.gelb span{color:var(--kloetz-text)}

/* Abschnitte */
.abschnitt{padding:72px 0 0}
@media (min-width:720px){.abschnitt{padding-top:96px}}
.abschnitt .unter{margin-top:12px;font-size:1.1rem;color:var(--leise);max-width:44rem}
.kasten-kopf{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.kasten-kopf h2 em{font-style:normal;color:var(--akzent-text)}
.kloetzchen-kasten .kasten-kopf h2 em{color:var(--kloetz-text)}

/* Kasten mit Fächern */
.kasten{margin-top:28px;padding:0;display:grid;gap:24px}
@media (min-width:640px){.kasten.sechs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.kasten.sechs{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.kasten.kl{grid-template-columns:1.45fr 1fr 1fr}}
.fach{position:relative;background:var(--flaeche);border-radius:var(--r-karte);box-shadow:var(--soft-hoch);padding:18px 18px 20px;display:flex;flex-direction:column}
a.fach{color:var(--tinte);text-decoration:none;padding-bottom:54px;transition:transform .25s ease,box-shadow .25s ease}
a.fach:hover,a.fach:focus-visible{transform:translateY(-3px);box-shadow:var(--soft-schwebe)}
.fach .bild{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--grund);margin-bottom:14px}
.fach .bild img{width:100%;height:100%;object-fit:cover}
.fach h3{font-size:1.45rem}
.fach p{color:var(--leise);font-size:.98rem;line-height:1.45;margin-top:4px}
.fach .formate{position:absolute;left:18px;bottom:18px;font:500 .78rem var(--schrift-mono);color:var(--akzent-text);letter-spacing:.04em}
.fach .preis{position:absolute;right:18px;bottom:18px;font:500 .78rem var(--schrift-mono);color:var(--tinte)}
.kasten-fuss{margin-top:14px;font-size:.95rem;color:var(--leise)}

/* Klötzchen-Fächer */
.helfer{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;list-style:none;margin:0;padding:0}
.helfer a{display:grid;gap:6px;color:var(--tinte);text-decoration:none}
.helfer a:hover b,.helfer a:focus-visible b{color:var(--kloetz-text)}
.helfer .foto{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--grund)}
.helfer .foto img{width:100%;height:100%;object-fit:cover}
.helfer b{font:700 1.08rem/1.1 var(--schrift-titel);letter-spacing:.01em}
.ohne-foto{display:grid;place-items:center;background:repeating-linear-gradient(90deg,#e4dbd0 0 18px,#ded4c8 18px 20px)}
.ohne-foto svg{width:46%;opacity:.9}
.liste{list-style:none;margin:0;padding:0;display:grid}
.liste li{border-bottom:1px dashed var(--linie)}
.liste a{display:block;padding:10px 0;color:var(--tinte);text-decoration:none;font-weight:600;line-height:1.35}
.liste a:hover,.liste a:focus-visible{color:var(--kloetz-text)}
.fach .gross{font-size:1.08rem;color:var(--tinte)}
.fach .knopf{align-self:flex-start;margin-top:auto}
.fach .knopf-platz{margin-top:18px;padding-top:0}

/* Knöpfe */
.knopf{display:inline-block;background:var(--akzent);color:var(--auf-akzent);font-weight:700;padding:12px 20px;border-radius:var(--radius);text-decoration:none;line-height:1.25;border:0;font-size:1rem;box-shadow:0 6px 16px var(--akzent-glow),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.knopf:hover{background:#2f9284;transform:translateY(-1px);box-shadow:0 10px 22px var(--akzent-glow),inset 0 1px 0 rgba(255,255,255,.25)}
.knopf.gelb{background:var(--kloetz);color:var(--auf-kloetz);box-shadow:0 6px 16px var(--kloetz-glow),inset 0 1px 0 rgba(255,255,255,.4)}
.knopf.gelb:hover{background:#ebbe4a}
.knopf:active{transform:none;box-shadow:inset 2px 2px 6px rgba(0,0,0,.25)}
.weiter{display:inline-block;margin-top:18px;font-weight:600}
.weiter.gelb{color:var(--kloetz-text)}

/* So geht's: drei Schritte als Werkstück-Ablauf */
.schritte{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:18px;counter-reset:s}
@media (min-width:860px){.schritte{grid-template-columns:repeat(3,1fr);gap:24px}}
.schritte li{position:relative;padding:22px 20px 22px 80px;background:var(--flaeche);border-radius:var(--r-karte);box-shadow:var(--soft-hoch);counter-increment:s}
@media (min-width:860px){.schritte li{padding:88px 26px 26px}}
.schritte li::before{content:counter(s);position:absolute;left:18px;top:20px;width:42px;height:42px;display:grid;place-items:center;background:var(--flaeche);color:var(--akzent-text);font:800 1.6rem var(--schrift-titel);border-radius:12px;box-shadow:var(--soft-tief)}
@media (min-width:860px){.schritte li::before{left:26px;top:26px}}
.schritte b{display:block;font:700 1.45rem/1.1 var(--schrift-titel);margin-bottom:6px}
.schritte p{color:var(--leise)}
.schritte .format{color:var(--akzent-text);font:500 .9em var(--schrift-mono)}
.danach{margin-top:16px;color:var(--leise);font-size:.98rem}

/* Haltung: Werkbank-Notiz */
.haltung{display:grid;gap:28px;align-items:center}
@media (min-width:880px){.haltung{grid-template-columns:auto 1fr;gap:48px}}
.haltung .zeichen{width:150px;padding:22px;background:var(--flaeche);border-radius:var(--r-gross);box-shadow:var(--soft-hoch)}
.haltung p{margin-top:14px;font-size:1.1rem;max-width:44rem;color:var(--holz)}

/* Hilfe-Felder */
.felder{display:grid;gap:20px;margin-top:28px}
@media (min-width:760px){.felder{grid-template-columns:repeat(3,1fr)}}
.feld{--farbe:var(--akzent);display:block;padding:20px 22px;border-radius:var(--r-karte);background:var(--flaeche);box-shadow:var(--soft-hoch);color:var(--tinte);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.feld b::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.4em;background:var(--farbe);border-radius:3px;vertical-align:.1em}
.feld.laser{--farbe:var(--laser)}
.feld.kl{--farbe:var(--kloetz)}
.feld b{display:block;font:700 1.6rem/1 var(--schrift-titel)}
.feld span{display:block;margin-top:6px;color:var(--leise);font-size:.97rem}
.feld:hover,.feld:focus-visible{transform:translateY(-3px);box-shadow:var(--soft-schwebe)}
.neueste{margin-top:20px;list-style:none;padding:0;display:grid;gap:0;max-width:44rem}
.neueste li{border-bottom:1px dashed var(--linie)}
.neueste a{display:flex;gap:12px;justify-content:space-between;padding:12px 0;color:var(--tinte);text-decoration:none;font-weight:600}
.neueste a:hover{color:var(--akzent-text)}
.neueste small{font:500 .78rem var(--schrift-mono);color:var(--leise);white-space:nowrap;padding-top:4px}

/* Blog-Karten */
.karten{display:grid;gap:22px;margin-top:28px}
@media (min-width:760px){.karten{grid-template-columns:repeat(3,1fr)}}
.karte{display:flex;flex-direction:column;background:var(--flaeche);border-radius:var(--r-karte);box-shadow:var(--soft-hoch);overflow:hidden;color:var(--tinte);text-decoration:none}
.karte .bild{aspect-ratio:16/10;background:var(--grund)}
.karte .bild img{width:100%;height:100%;object-fit:cover}
.karte div.text{padding:16px 18px 20px}
.karte b{display:block;font:700 1.4rem/1.1 var(--schrift-titel)}
.karte small{display:block;margin-top:8px;font:500 .78rem var(--schrift-mono);color:var(--leise)}
.karte p{margin-top:8px;color:var(--leise);font-size:.97rem}
.karte:hover b{color:var(--akzent-text)}
.leer-hinweis{margin-top:20px;padding:20px;box-shadow:var(--soft-tief);border-radius:var(--r-karte);color:var(--leise);max-width:44rem}

/* KreativBüro-Tafel */
.tafel{margin-top:4px;display:grid;gap:24px;padding:28px 22px;background:var(--flaeche-hell);color:var(--tinte);border-radius:var(--r-gross);box-shadow:var(--soft-hoch)}
@media (min-width:880px){.tafel{grid-template-columns:1.4fr 1fr;padding:44px 48px;gap:48px;align-items:center}}
.tafel h2{color:var(--tinte)}
.tafel p{margin-top:14px;font-size:1.06rem}
.tafel ul{list-style:none;margin:0;padding:0;font:500 .9rem/1.5 var(--schrift-mono)}
.tafel li{padding:9px 0;border-bottom:1px dashed var(--linie)}
.tafel .knopf{background:var(--tinte);color:#fff;box-shadow:0 6px 16px rgba(58,49,44,.28);margin-top:20px}
.tafel .knopf:hover{background:#4a403a}
.tafel a.nebenbei{display:inline-block;margin-top:14px;color:var(--akzent-text);font-weight:600}

/* Fragen */
.fragen{margin-top:24px;max-width:50rem;border-top:1px dashed var(--linie)}
.fragen details{border-bottom:1px dashed var(--linie)}
.fragen summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;position:relative;font-weight:600;font-size:1.08rem}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:6px;top:10px;font:800 1.7rem var(--schrift-titel);color:var(--akzent-text)}
.fragen details[open] summary::after{content:"−"}
.fragen details p{padding:0 0 18px;color:var(--leise);max-width:46rem}

/* Fuß */
.fuss{margin-top:110px;background:var(--grund-tief);border-radius:var(--r-gross) var(--r-gross) 0 0;box-shadow:inset 0 8px 16px rgba(150,132,112,.18);padding:48px 0 28px;font-size:.95rem}
.fuss .spalten{display:grid;gap:28px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.fuss .spalten{grid-template-columns:1.2fr repeat(4,1fr)}}
.fuss .marke img{height:30px}
.fuss h2{font:700 1.15rem var(--schrift-titel);letter-spacing:.05em;text-transform:uppercase;color:var(--tinte);margin-bottom:10px}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fuss a{color:var(--leise);text-decoration:none}
.fuss a:hover{color:var(--tinte);text-decoration:underline}
.fuss .kl a{color:var(--kloetz-text)}
.fuss .recht{margin-top:40px;padding-top:20px;border-top:1px dashed var(--linie);display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;color:var(--leise)}
.fuss .recht ul{display:flex;flex-wrap:wrap;gap:6px 18px}
.fuss .satz{grid-column:1/-1}
@media (min-width:900px){.fuss .satz{grid-column:auto}}
.fuss .satz p{margin-top:12px;color:var(--leise);max-width:22rem}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .lade:hover,.lade:focus-visible{transform:none}
}

/* Nachträge */
ul.kasten{list-style:none;margin-left:0;margin-right:0;margin-bottom:0}
ul.kasten>li{display:flex}
ul.kasten>li>.fach{flex:1}
.band{margin-top:96px;padding:72px 0 80px;background:var(--grund-tief);box-shadow:inset 0 8px 16px rgba(150,132,112,.16),inset 0 -8px 16px rgba(255,255,255,.5)}
.band+.abschnitt{padding-top:80px}

/* ---------- Unterseiten ---------- */
.seitenkopf{padding:24px 0 8px}
@media (min-width:720px){.seitenkopf{padding-top:36px}}
.seitenkopf h1{max-width:24ch;font-size:clamp(2.4rem,6vw,3.75rem)}
.seitenkopf .unter{margin-top:14px;font-size:1.12rem;color:var(--leise);max-width:44rem}
.krumen{font:500 .8rem/1.4 var(--schrift-mono);color:var(--leise);margin-bottom:18px}
.krumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 0}
.krumen li+li::before{content:"/";margin:0 8px;color:var(--linie)}
.krumen a{color:var(--leise);text-decoration:none}
.krumen a:hover{color:var(--tinte);text-decoration:underline}
.marken{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;list-style:none;padding:0}
.marken a{display:inline-block;padding:8px 14px;border-radius:999px;border:0;background:var(--flaeche);box-shadow:var(--soft-flach);color:var(--tinte);text-decoration:none;font-weight:600;font-size:.95rem}
.marken a:hover,.marken a[aria-current="page"]{box-shadow:var(--soft-tief);color:var(--akzent-text)}
.kl-seite .marken a:hover,.kl-seite .marken a[aria-current="page"]{color:var(--kloetz-text)}
.metazeile{margin-top:14px;font:500 .82rem/1.5 var(--schrift-mono);color:var(--leise);display:flex;flex-wrap:wrap;gap:4px 14px}

/* Lesetext */
.lesen{display:grid;gap:40px;margin-top:28px}
@media (min-width:1000px){.lesen{grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}}
.prosa{max-width:44rem;font-size:1.08rem;line-height:1.7;color:var(--holz)}
.prosa>*+*{margin-top:1em}
.prosa h2{font-size:2rem;margin-top:1.6em;color:var(--tinte)}
.prosa h3{font-size:1.6rem;margin-top:1.5em;color:var(--tinte)}
.prosa ul,.prosa ol{padding-left:1.3em}
.prosa li+li{margin-top:.4em}
.prosa li::marker{color:var(--akzent-text)}
.prosa strong{color:var(--tinte)}
.prosa blockquote{margin-left:0;padding:4px 0 4px 18px;border-left:4px solid var(--linie);color:var(--leise)}
.prosa figure{margin-left:0;margin-right:0}
.prosa img{border-radius:var(--radius)}
.kurz{--farbe:var(--akzent);padding:20px 22px;background:var(--flaeche);border-radius:var(--r-karte);box-shadow:var(--soft-hoch);max-width:44rem;margin-top:28px}
.kurz.kl{--farbe:var(--kloetz)}
.kurz.laser{--farbe:var(--laser)}
.kurz b::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.5em;background:var(--farbe);border-radius:1px;vertical-align:.08em}
.kurz b{display:block;font:700 1.2rem var(--schrift-titel);letter-spacing:.04em;text-transform:uppercase;color:var(--leise);margin-bottom:6px}
.kurz p{font-size:1.08rem;color:var(--tinte)}
.seitenleiste{display:grid;gap:16px}
@media (min-width:1000px){.seitenleiste{position:sticky;top:20px}}
.tafelchen{background:var(--flaeche);border-radius:var(--r-karte);padding:20px 22px;box-shadow:var(--soft-hoch)}
.tafelchen h2{font-size:1.5rem;margin-bottom:10px}
.tafelchen p{color:var(--leise);font-size:.97rem}
.tafelchen .knopf{margin-top:14px}
.tafelchen .liste a{font-weight:600}
.ende-satz{margin-top:36px;padding-top:18px;border-top:1px dashed var(--linie);color:var(--leise);max-width:44rem}

/* Listen in Übersichten */
.artikelliste{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:20px}
@media (min-width:860px){.artikelliste{grid-template-columns:repeat(2,1fr)}}
.artikelliste a{display:block;height:100%;padding:18px 20px;background:var(--flaeche);border-radius:var(--r-karte);box-shadow:var(--soft-hoch);color:var(--tinte);text-decoration:none;--farbe:var(--akzent);transition:transform .25s ease,box-shadow .25s ease}
.artikelliste a.kl{--farbe:var(--kloetz)}
.artikelliste a.laser{--farbe:var(--laser)}
.artikelliste b::before{content:"";display:inline-block;width:.5em;height:.5em;margin-right:.4em;background:var(--farbe);border-radius:1px;vertical-align:.1em}
.artikelliste a:hover,.artikelliste a:focus-visible{transform:translateY(-3px);box-shadow:var(--soft-schwebe)}
.artikelliste b{display:block;font:700 1.45rem/1.1 var(--schrift-titel)}
.artikelliste p{margin-top:8px;color:var(--leise);font-size:.97rem}
.artikelliste small{display:block;margin-top:10px;font:500 .76rem var(--schrift-mono);color:var(--leise)}
.gruppe{margin-top:56px}
.gruppe h2{font-size:clamp(1.9rem,4vw,2.6rem)}
.gruppe .unter{margin-top:8px;color:var(--leise)}

/* Suche */
.suche{margin-top:24px;display:flex;flex-wrap:wrap;gap:10px;max-width:40rem}
.suche label{flex-basis:100%;font-weight:600}
.suche input{flex:1;min-width:0}
.eingabe,.suche input,.formular input,.formular select,.formular textarea{font:inherit;color:var(--tinte);background:var(--flaeche);border:0;box-shadow:var(--soft-tief);border-radius:var(--radius);padding:12px 14px;width:100%}
.suche input:focus,.formular input:focus,.formular select:focus,.formular textarea:focus{outline:2px solid var(--akzent);outline-offset:2px;box-shadow:var(--soft-tief),0 0 0 6px var(--akzent-glow)}
.suche button,.formular button{cursor:pointer}

/* Helfer-Karten auf der Klötzchen-Seite */
.helfer-raster{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:22px}
@media (min-width:600px){.helfer-raster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.helfer-raster{grid-template-columns:repeat(3,1fr)}}
.helfer-karte{display:flex;flex-direction:column;height:100%;background:var(--flaeche);border-radius:var(--r-karte);box-shadow:var(--soft-hoch);overflow:hidden;color:var(--tinte);text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.helfer-karte:hover,.helfer-karte:focus-visible{transform:translateY(-3px);box-shadow:var(--soft-schwebe)}
.helfer-karte .foto{aspect-ratio:4/3;background:var(--grund)}
.helfer-karte .foto img{width:100%;height:100%;object-fit:cover}
.helfer-karte .text{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1}
.helfer-karte b{font:700 1.4rem/1.1 var(--schrift-titel)}
.helfer-karte p{margin-top:8px;color:var(--leise);font-size:.97rem}
.helfer-karte .im-shop{margin-top:auto;padding-top:14px;font-weight:700;color:var(--kloetz-text)}
.helfer-karte:hover b,.helfer-karte:focus-visible b{color:var(--kloetz-text)}
.untertitel{margin-top:40px;font:700 1.6rem var(--schrift-titel)}
.anlaesse{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:24px 0 0;padding:0}
.anlaesse a{display:block;padding:12px 18px;background:var(--flaeche);color:var(--tinte);border-radius:var(--radius);font:700 1.25rem var(--schrift-titel);text-decoration:none;box-shadow:var(--soft-flach)}
.anlaesse a:hover{box-shadow:var(--soft-tief);color:var(--akzent-text)}
.zweispaltig{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.zweispaltig{grid-template-columns:1fr 1fr;gap:56px}}
.zweispaltig img{border-radius:var(--r-gross);box-shadow:var(--soft-hoch)}

/* Formular */
.formular{display:grid;gap:20px;max-width:40rem;margin-top:28px}
.formular .feld-gr{display:grid;gap:6px}
.formular label,.formular legend{font-weight:600}
.formular .hinweis-text{font-size:.9rem;color:var(--leise)}
.formular textarea{min-height:170px;resize:vertical}
.formular .haken{display:flex;gap:10px;align-items:flex-start}
.formular .haken input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--akzent)}
.formular .fehler{color:var(--fehler);font-size:.92rem;font-weight:600}
.formular [aria-invalid="true"]{box-shadow:var(--soft-tief),0 0 0 2px var(--fehler)}
.formular .topf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung{padding:16px 18px;border-radius:var(--radius);margin-top:24px;max-width:40rem;font-weight:600}
.meldung.gut{background:#dcefe9;border:1px solid var(--akzent)}
.meldung.schlecht{background:#f6ddd5;border:1px solid var(--fehler)}
.pflicht{color:var(--leise);font-weight:400}

/* Liste mit Häkchen (KreativBüro) */
.punkte{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:20px;max-width:52rem}
@media (min-width:860px){.punkte{grid-template-columns:repeat(2,1fr)}}
.punkte li{padding:18px 20px;background:var(--flaeche);border-radius:var(--r-karte);box-shadow:var(--soft-hoch)}
.punkte b{display:block;font:700 1.35rem/1.1 var(--schrift-titel);margin-bottom:6px}
.punkte span{color:var(--leise);font-size:.98rem}
.schlicht{margin-top:16px;padding-left:1.2em;color:var(--holz);max-width:44rem}
.schlicht li+li{margin-top:6px}
.foto-frank{width:min(100%,360px);border-radius:var(--r-gross);box-shadow:var(--soft-hoch)}
.links-reihe{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-weight:600}
.knopf-reihe{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ohne-unterstrich{color:inherit;text-decoration:none}
.ohne-unterstrich:hover{color:var(--akzent-text)}
.tafelchen .liste a:hover,.tafelchen .liste a:focus-visible{color:var(--akzent-text)}
.fach-mini{display:grid;gap:6px;color:var(--tinte);text-decoration:none}
.fach-mini img{border-radius:12px;aspect-ratio:4/3;object-fit:cover}
.fach-mini b{font:700 1.3rem/1.1 var(--schrift-titel);margin-top:6px}
.fach-mini span{color:var(--leise);font-size:.95rem}
.fach-mini small{font:500 .76rem var(--schrift-mono);color:var(--akzent-text)}
.fach-mini:hover b{color:var(--akzent-text)}
h2.gruppe{margin-top:48px;font-size:2rem}
.titelbild img{width:100%;border-radius:var(--radius)}
.prosa>:first-child{margin-top:0}
.metazeile span+span::before{content:"·";margin-right:14px;color:var(--linie)}
.nw{white-space:nowrap}

/* Rechtstexte und Lizenzen */
.recht{padding-top:16px;padding-bottom:24px}
.recht .prosa h2{font-size:1.7rem}
.recht .prosa h3{font-size:1.3rem}
.recht .stand{margin-top:2em;font:500 .85rem var(--schrift-mono);color:var(--leise)}
.lizenzliste{list-style:none;padding-left:0 !important}
.lizenzliste li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:8px 0;border-bottom:1px dashed var(--linie)}
.lizenzliste li+li{margin-top:0}
.lizenzliste a{flex:none;font:500 .85rem var(--schrift-mono)}