/**
 * CLICKPRESS CSS-Grid
 * @author: Stefan Schulz-Lauterbach
 *
 * thanks to Dinko Skopljak for co-working
 */
.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-stretch {
  justify-items: stretch;
}

.content-start {
  align-content: start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: end;
}

.items-start {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

[class*=grid_] {
  display: grid;
  grid-gap: 1rem;
}
[class*=grid_] > .block {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .grid_mobile_100 {
    grid-template-columns: 1fr;
  }
  .grid_mobile_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_mobile_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_mobile_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_mobile_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_mobile_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_mobile_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_mobile_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_mobile_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_mobile_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_mobile_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_mobile_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_mobile_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_mobile_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_mobile_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_mobile_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .gap_mobile_0 {
    grid-gap: 0;
  }
  .gap_mobile_1 {
    grid-gap: 1rem;
  }
  .gap_mobile_2 {
    grid-gap: 2rem;
  }
  .gap_mobile_3 {
    grid-gap: 3rem;
  }
  .gap_mobile_4 {
    grid-gap: 4rem;
  }
  .gap_mobile_5 {
    grid-gap: 5rem;
  }
  .gap_mobile_6 {
    grid-gap: 6rem;
  }
  .gap_mobile_7 {
    grid-gap: 7rem;
  }
  .gap_mobile_8 {
    grid-gap: 8rem;
  }
  .gap_mobile_9 {
    grid-gap: 9rem;
  }
  .gap_mobile_10 {
    grid-gap: 10rem;
  }
  .gap_mobile_11 {
    grid-gap: 11rem;
  }
  .gap_mobile_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 768px) {
  .grid_tablet_100 {
    grid-template-columns: 1fr;
  }
  .grid_tablet_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_tablet_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_tablet_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_tablet_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_tablet_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_tablet_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_tablet_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_tablet_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_tablet_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_tablet_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_tablet_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_tablet_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_tablet_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_tablet_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_tablet_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_tablet_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_tablet_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_tablet_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .gap_tablet_0 {
    grid-gap: 0;
  }
  .gap_tablet_1 {
    grid-gap: 1rem;
  }
  .gap_tablet_2 {
    grid-gap: 2rem;
  }
  .gap_tablet_3 {
    grid-gap: 3rem;
  }
  .gap_tablet_4 {
    grid-gap: 4rem;
  }
  .gap_tablet_5 {
    grid-gap: 5rem;
  }
  .gap_tablet_6 {
    grid-gap: 6rem;
  }
  .gap_tablet_7 {
    grid-gap: 7rem;
  }
  .gap_tablet_8 {
    grid-gap: 8rem;
  }
  .gap_tablet_9 {
    grid-gap: 9rem;
  }
  .gap_tablet_10 {
    grid-gap: 10rem;
  }
  .gap_tablet_11 {
    grid-gap: 11rem;
  }
  .gap_tablet_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 992px) {
  .grid_desktop_100 {
    grid-template-columns: 1fr;
  }
  .grid_desktop_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_desktop_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_desktop_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_desktop_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_desktop_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_desktop_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_desktop_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_desktop_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_desktop_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_desktop_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_desktop_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_desktop_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .grid_desktop_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_desktop_40_20_20_20 {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .grid_desktop_20_40_20_20 {
    grid-template-columns: 1fr 2fr 1fr 1fr;
  }
  .grid_desktop_20_20_40_20 {
    grid-template-columns: 1fr 1fr 2fr 1fr;
  }
  .grid_desktop_20_20_20_40 {
    grid-template-columns: 1fr 1fr 1fr 2fr;
  }
  .grid_desktop_20_20_20_20_20 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gap_desktop_0 {
    grid-gap: 0;
  }
  .gap_desktop_1 {
    grid-gap: 1rem;
  }
  .gap_desktop_2 {
    grid-gap: 2rem;
  }
  .gap_desktop_3 {
    grid-gap: 3rem;
  }
  .gap_desktop_4 {
    grid-gap: 4rem;
  }
  .gap_desktop_5 {
    grid-gap: 5rem;
  }
  .gap_desktop_6 {
    grid-gap: 6rem;
  }
  .gap_desktop_7 {
    grid-gap: 7rem;
  }
  .gap_desktop_8 {
    grid-gap: 8rem;
  }
  .gap_desktop_9 {
    grid-gap: 9rem;
  }
  .gap_desktop_10 {
    grid-gap: 10rem;
  }
  .gap_desktop_11 {
    grid-gap: 11rem;
  }
  .gap_desktop_12 {
    grid-gap: 12rem;
  }
}

/*# sourceMappingURL=clickpress-grid.css.map */

/* basteln.net · Theme „Atelier" (Design C)
   Aufbau: Schriften, Farben, Grundlagen, Kopf, Fuß, Bausteine der Startseite,
   Inhaltsseiten (Anleitung, Lexikon, Blog), Style-Manager-Klassen, Breakpoints. */

@font-face{font-family:'Gloock';src:url(../../files/basteln/theme/fonts/gloock-latin.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Nunito';src:url(../../files/basteln/theme/fonts/nunito-latin.woff2) format('woff2');font-weight:200 1000;font-display:swap}
@font-face{font-family:'Homemade Apple';src:url(../../files/basteln/theme/fonts/homemade-apple-latin.woff2) format('woff2');font-weight:400;font-display:swap}

:root{
  --papier:#FBF6EE; --papier-2:#F5ECDF; --rose:#EED3CC; --rose-tief:#A65A5E; --rose-dunkel:#8C474B;
  --salbei:#C9D3BC; --salbei-tief:#6F7F62; --butter:#F4E3B5; --flieder:#DCD3E6; --tinte:#3B2E2A; --tinte-2:#6B5B55;
  --linie:#E6D9C8;
  --display:'Gloock',Georgia,serif; --body:'Nunito',system-ui,sans-serif; --hand:'Homemade Apple',cursive;
  --breit:1240px; --lese:760px; --rand:1.5rem;
}

/* Grundlagen */
*{box-sizing:border-box} figure{margin:0} img{display:block;max-width:100%;height:auto}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--body);font-size:clamp(1.0625rem,1rem + .25vw,1.15rem);line-height:1.7;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.1;margin:0 0 1rem;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,1.5rem + 3vw,4rem)} h2{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.8rem)} h3{font-size:clamp(1.3rem,1.15rem + .6vw,1.6rem)}
p{margin:0 0 1rem;text-wrap:pretty}
a{color:var(--rose-tief)} a:hover{color:var(--rose-dunkel)}
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hand{font-family:var(--hand);font-weight:400;color:var(--rose-tief);font-size:.95em;line-height:1.3}
.wrap{max-width:var(--breit);margin:0 auto;padding:0 var(--rand)}
#wrapper{overflow-x:clip}

/* Kopf: Insert-Artikel „kopf-insert" mit Leiste, Logo und Navigation */
#header{position:sticky;top:0;z-index:50}
#header .inside{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:2rem;
  background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px dashed var(--linie);
  padding:0 max(var(--rand),calc((100% - var(--breit))/2 + var(--rand)))}
#header .topbar{grid-column:1/-1;margin:0 calc(-1 * max(var(--rand),calc((100vw - var(--breit))/2 + var(--rand))));font-size:.85rem;text-align:center;padding:.45rem 1rem;background:var(--tinte);color:var(--papier);letter-spacing:.02em}
#header .topbar p{margin:0} #header .topbar a{color:var(--butter);font-weight:700;text-decoration:none}
.kopf-logo{height:84px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--tinte)}
.logo img{height:58px;width:auto;flex:none}
#footer .logo img{height:50px}
.logo .wort{font-family:var(--display);font-size:2rem;line-height:1;letter-spacing:-.02em;position:relative;padding-right:1.25em}
.logo .wort i{font-style:normal;font-family:var(--hand);font-size:.5em;color:var(--rose-tief);position:absolute;right:0;top:-.55em;transform:rotate(-8deg)}
.menu-schalter{position:absolute;opacity:0;pointer-events:none}
.burger{display:none;cursor:pointer;font-size:1.7rem;line-height:1;min-width:44px;min-height:44px;place-items:center;border-radius:10px;color:var(--tinte)}
.kopf-logo:has(.menu-schalter:focus-visible) .burger{outline:3px solid var(--rose-tief);outline-offset:2px}
.invisible:focus{position:fixed;top:.5rem;left:.5rem;width:auto;height:auto;clip:auto;padding:.6rem 1rem;background:var(--tinte);color:var(--papier);z-index:200}
:focus-visible{outline:3px solid var(--rose-tief);outline-offset:3px}
.kopf-nav ul{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;font-weight:700;font-size:.97rem}
.kopf-nav a,.kopf-nav strong{color:var(--tinte);text-decoration:none;position:relative;padding:.55rem 0;display:block;font-weight:700}
.kopf-nav a::after,.kopf-nav strong::after,.kopf-nav .trail::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:6px;opacity:0;transform:scaleX(.3);transition:.3s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6'%3E%3Cpath d='M1 4c8-3 14 2 22-1s14-2 22 0 10-2 14-1' fill='none' stroke='%23A65A5E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.kopf-nav a:hover::after,.kopf-nav strong::after,.kopf-nav a.trail::after{opacity:1;transform:none}

/* Brotkrümel */
.mod_breadcrumb{max-width:var(--breit);margin:0 auto;padding:1.6rem var(--rand) 0;font-size:.88rem;color:var(--tinte-2)}
.mod_breadcrumb ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem .5rem}
.mod_breadcrumb li+li::before{content:'/';margin-right:.5rem;opacity:.6}
.mod_breadcrumb a{color:var(--tinte-2)}
.startseite .mod_breadcrumb{display:none}
body:not(.startseite) .mod_breadcrumb{max-width:var(--lese)}

/* Abschnitte: jeder Artikel ist ein Abschnitt */
#main .mod_article{position:relative;padding:clamp(3rem,6vw,5.5rem) 0}
#main .mod_article>*{max-width:var(--breit);margin-left:auto;margin-right:auto;padding-left:var(--rand);padding-right:var(--rand)}

/* Style-Manager-Klassen: Hintergründe und Zackenschere-Kanten */
.bg-rose .hand,.bg-salbei .hand,.bg-butter .hand,.bg-flieder .hand{color:var(--rose-dunkel)}
.bg-rose{background:var(--rose)} .bg-salbei{background:var(--salbei)} .bg-papier2{background:var(--papier-2)} .bg-butter{background:var(--butter)} .bg-flieder{background:var(--flieder)}
.zacken-oben::before,.zacken-unten::after{content:'';position:absolute;left:0;right:0;height:14px;background:inherit;
  -webkit-mask:radial-gradient(circle at 14px 14px,#000 13.5px,transparent 14px) 0 0/28px 14px repeat-x;mask:radial-gradient(circle at 14px 14px,#000 13.5px,transparent 14px) 0 0/28px 14px repeat-x}
.zacken-oben::before{top:-13px} .zacken-unten::after{bottom:-13px;transform:scaleY(-1)}

/* Knöpfe und Sticker */
.btn,a.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--rose-tief);color:#fff;border:0;border-radius:999px;padding:.85rem 1.6rem;font-weight:800;font-size:1rem;text-decoration:none;min-height:48px;transition:.25s}
.btn:hover{background:var(--rose-dunkel);color:#fff;transform:translateY(-2px) rotate(-1deg)}
.btn.zweit{background:transparent;color:var(--tinte);border:2px solid var(--tinte)} .btn.zweit:hover{background:var(--tinte);color:var(--papier)}
.sticker{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.sticker a{display:inline-flex;padding:.45rem 1rem;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none;color:var(--tinte);transition:.25s}
.sticker a:nth-child(4n+1){background:var(--rose);transform:rotate(-2deg)} .sticker a:nth-child(4n+2){background:var(--salbei);transform:rotate(1.5deg)}
.sticker a:nth-child(4n+3){background:var(--butter);transform:rotate(-1deg)} .sticker a:nth-child(4n+4){background:var(--flieder);transform:rotate(2deg)}
.sticker a:hover{transform:rotate(0) scale(1.06)}

/* Hero */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero .gruss{font-size:clamp(1.2rem,1rem + .8vw,1.6rem);display:inline-block;transform:rotate(-3deg);margin-bottom:1rem}
.hero h1 em{font-style:italic;color:var(--rose-tief);position:relative;white-space:nowrap;z-index:0}
.hero h1 em::after{content:'';position:absolute;left:-4%;right:-4%;bottom:.02em;height:.32em;background:var(--butter);z-index:-1;border-radius:4px;transform:rotate(-1.5deg)}
.lead{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);color:var(--tinte-2);max-width:36ch}
.hero .knoepfe{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* Polaroid-Collage */
.collage{position:relative;aspect-ratio:1/1.02;max-width:560px;justify-self:center;width:100%}
.polaroid{position:absolute;background:#fff;padding:12px 12px 46px;box-shadow:0 18px 40px -18px rgb(59 46 42/.45),0 2px 6px rgb(59 46 42/.08);border-radius:3px;animation:fallen .9s cubic-bezier(.2,.9,.3,1.2) both}
.polaroid img{width:100%;aspect-ratio:1;object-fit:cover}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--hand);font-size:.95rem;color:var(--tinte-2)}
.tape{position:absolute;width:110px;height:30px;top:-14px;left:50%;margin-left:-55px;background:color-mix(in srgb,var(--rose) 75%,transparent);opacity:.9;z-index:1;
  -webkit-mask:linear-gradient(90deg,transparent 0 3px,#000 3px calc(100% - 3px),transparent 0),repeating-linear-gradient(180deg,#000 0 4px,transparent 4px 6px);box-shadow:0 1px 2px rgb(0 0 0/.08)}
.tape.salbei{background:color-mix(in srgb,var(--salbei) 85%,transparent)} .tape.butter{background:color-mix(in srgb,var(--butter) 90%,transparent)}
.p1{width:56%;left:2%;top:6%;transform:rotate(-7deg);animation-delay:.1s}
.p2{width:50%;right:0;top:0;transform:rotate(6deg);animation-delay:.3s}
.p3{width:52%;left:24%;bottom:0;transform:rotate(-2deg);animation-delay:.5s;z-index:2}
.notiz-zettel{position:absolute;right:-2%;bottom:16%;z-index:3;background:var(--butter);padding:1rem 1.1rem;width:44%;transform:rotate(4deg);font-family:var(--hand);font-size:.95rem;line-height:1.5;box-shadow:0 12px 24px -14px rgb(59 46 42/.5);animation:fallen .9s .7s both}
.kringel{position:absolute;left:-4%;bottom:6%;width:120px;color:var(--salbei-tief);opacity:.8}
@keyframes fallen{from{opacity:0;translate:0 -40px}}

/* Abschnittskopf */
.kopf{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.5rem;flex-wrap:wrap}
.kopf h2{margin:0} .kopf p{max-width:46ch;color:var(--tinte-2);margin:0}

/* Themen als runde Kacheln */
.themen{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.thema{text-decoration:none;color:var(--tinte);text-align:center}
.thema .kreis{aspect-ratio:1;border-radius:50%;overflow:hidden;border:8px solid #fff;box-shadow:0 14px 30px -18px rgb(59 46 42/.5);position:relative;transition:.35s}
.thema .kreis::after{content:'';position:absolute;inset:6px;border-radius:50%;border:2px dashed rgb(255 255 255/.85)}
.thema img{width:100%;height:100%;object-fit:cover;transition:.5s}
.thema:hover{color:var(--tinte)} .thema:hover .kreis{transform:rotate(-4deg) translateY(-4px)} .thema:hover img{transform:scale(1.07)}
.thema h3{margin:1rem 0 .1rem;font-size:1.35rem} .thema span{font-size:.9rem;color:var(--tinte-2)}

/* Karten (Startseite, von Hand gepflegt) */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 1.8rem}
.karte{position:relative;display:block;background:#fff;padding:12px 12px 1.4rem;border-radius:4px;box-shadow:0 18px 36px -22px rgb(59 46 42/.5);text-decoration:none;color:var(--tinte);transition:.35s;transform:rotate(var(--r,0))}
.karte:nth-child(3n+1){--r:-1.2deg} .karte:nth-child(3n+2){--r:.8deg} .karte:nth-child(3n){--r:-.4deg}
.karte:hover{color:var(--tinte);transform:rotate(0) translateY(-6px);box-shadow:0 26px 40px -22px rgb(59 46 42/.55)}
.karte img{width:100%;aspect-ratio:4/3;object-fit:cover}
.karte .inhalt{padding:1.1rem .5rem 0}
.karte h3{font-size:1.35rem;margin-bottom:.4rem}
.karte p{font-size:.97rem;color:var(--tinte-2);margin:0}
.knopf{position:absolute;top:22px;right:22px;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:.72rem;font-weight:800;line-height:1.1;color:var(--tinte);background:var(--butter);transform:rotate(12deg);box-shadow:0 4px 10px -4px rgb(0 0 0/.25);z-index:1}
.knopf::before{content:'';position:absolute;inset:4px;border-radius:50%;border:1.5px dashed rgb(59 46 42/.35)}

/* Unterseiten-Karten (Modul Seitenvorschau, automatisch aus Seitenbild und Teaser) */
.mod_pagepreview .header{display:none}
.mod_pagepreview .body>ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem 1.8rem}
.mod_pagepreview .body>ul>li>a{display:block;height:100%;background:#fff;padding:12px 12px 1.4rem;border-radius:4px;box-shadow:0 18px 36px -22px rgb(59 46 42/.5);text-decoration:none;color:var(--tinte);transition:.35s;transform:rotate(var(--r,0))}
.mod_pagepreview li:nth-child(3n+1)>a{--r:-1deg} .mod_pagepreview li:nth-child(3n+2)>a{--r:.7deg} .mod_pagepreview li:nth-child(3n)>a{--r:-.4deg}
.mod_pagepreview li>a:hover{transform:rotate(0) translateY(-6px)}
.mod_pagepreview .page_image img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--papier-2)}
.mod_pagepreview li>a h2{font-size:1.3rem;margin:1rem .5rem .4rem}
.mod_pagepreview .page_teaser{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 .5rem;font-size:.95rem;color:var(--tinte-2)}

/* Freebie-Block */
.freebie{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
.blatt{position:relative;background:#fff;aspect-ratio:1/1.414;max-width:360px;justify-self:center;width:100%;box-shadow:0 28px 50px -26px rgb(59 46 42/.55);transform:rotate(-3deg)}
.blatt::before{content:'';position:absolute;inset:0;background:#fff;transform:rotate(6deg);z-index:-1;box-shadow:0 20px 40px -26px rgb(59 46 42/.5)}
.blatt img{width:100%;height:100%;object-fit:contain}
.blatt .schnitt{position:absolute;left:-6%;right:-6%;top:62%;border-top:2px dashed var(--tinte-2);opacity:.5}
.blatt .schere{position:absolute;left:-10%;top:calc(62% - 16px);font-size:1.4rem;transform:rotate(-90deg)}
.punkte{list-style:none;padding:0;margin:1.5rem 0 2rem}
.punkte li{padding-left:2rem;position:relative;margin-bottom:.5rem}
.punkte li::before{content:'';position:absolute;left:0;top:.3em;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--rose-tief);
  -webkit-mask:radial-gradient(circle,#000 35%,transparent 36%);mask:radial-gradient(circle,#000 35%,transparent 36%)}

/* Vorlagen-Galerie (Malvorlagen, Schablonen) */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:2rem 1.5rem;margin-top:1rem}
.vorlage{display:block;text-decoration:none;color:var(--tinte);background:#fff;padding:10px 10px 1rem;border-radius:4px;box-shadow:0 16px 30px -20px rgb(59 46 42/.5);transition:.3s;transform:rotate(var(--r,0))}
.vorlage:nth-child(4n+1){--r:-1deg} .vorlage:nth-child(4n+2){--r:.8deg} .vorlage:nth-child(4n+3){--r:-.5deg} .vorlage:nth-child(4n){--r:1.1deg}
.vorlage:hover{transform:rotate(0) translateY(-5px);color:var(--tinte)}
.vorlage img{width:100%;aspect-ratio:1/1.414;object-fit:cover;border:1px solid var(--linie)}
.vorlage b{display:block;overflow-wrap:anywhere;hyphens:auto;font-family:var(--display);font-weight:400;font-size:1.1rem;margin:.7rem .2rem .1rem;line-height:1.2}
.vorlage span{font-size:.82rem;font-weight:700;color:#5C6B50;margin:0 .2rem}

/* Inhaltsseiten: Anleitungen, Lexikon, Blog (importierte Texte) */
body:not(.startseite) #main .mod_article{padding-top:1.5rem}
body:not(.startseite) #main .mod_article>.content-text,
body:not(.startseite) #main .mod_article>.content-image{max-width:var(--lese)}
.content-text h1{margin-top:.5rem}
.content-text h1+.rte>p:first-child,.content-text>.rte>p:first-child{font-size:1.15em;color:var(--tinte-2)}
.content-text h2{margin-top:2.5rem} .content-text h3{margin-top:2rem} .content-text h3,.content-text h4{margin-bottom:.5rem}
.content-text .rte>p:empty{display:none}
.rte img,.content-text figure img{background:#fff;padding:10px;box-shadow:0 16px 30px -20px rgb(59 46 42/.5);border-radius:3px;margin:1.5rem 0}
.rte img:nth-of-type(odd){transform:rotate(-1deg)} .rte img:nth-of-type(even){transform:rotate(1deg)}
.rte figcaption,.wp-caption-text{font-family:var(--hand);font-size:.9rem;color:var(--tinte-2);margin:-.6rem 0 1.2rem}
.content-text .rte>figure:first-child,.content-text .rte>p:first-child>img:only-child{max-width:420px}
.rte ul,.rte ol{padding-left:1.4rem} .rte li{margin-bottom:.35rem}
.rte ul li::marker{color:var(--rose-tief)}
.rte table{border-collapse:collapse;width:100%;font-size:.95rem} .rte td,.rte th{border-bottom:1px solid var(--linie);padding:.5rem}
.hinweis{position:relative;background:var(--butter);padding:1.4rem 1.6rem;margin:2rem 0;transform:rotate(.6deg);box-shadow:0 16px 30px -20px rgb(59 46 42/.5)}
.notiz{background:var(--butter);padding:1.4rem 1.6rem;transform:rotate(1deg);box-shadow:0 16px 30px -20px rgb(59 46 42/.5)}
.tipp{background:var(--butter);padding:1.5rem 1.6rem 1.4rem;transform:rotate(1deg);box-shadow:0 16px 30px -20px rgb(59 46 42/.5)}
.material{background:#fff;padding:2.2rem 2rem 1.8rem;border-radius:4px;box-shadow:0 18px 36px -22px rgb(59 46 42/.45);transform:rotate(-.6deg)}
.content-image.polaroid,.polaroid-bild{position:relative;background:#fff;padding:12px 12px 40px;box-shadow:0 18px 40px -18px rgb(59 46 42/.45);transform:rotate(1.5deg);animation:none}

/* Fuß: Insert-Artikel „fuss-insert" */
#footer{background:var(--tinte);color:var(--papier);margin-top:3rem}
#footer .fuss-raster{max-width:var(--breit);margin:0 auto;padding:4.5rem var(--rand) 2rem;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
#footer .fuss-titel{font-family:var(--display);font-weight:400;font-size:1.25rem;margin:0 0 .8rem}
#footer a{display:block;color:var(--papier);opacity:.75;text-decoration:none;padding:.35rem 0} #footer a:hover{opacity:1}
#footer a.logo{display:flex;color:var(--papier);opacity:1} #footer .logo .wort i{color:var(--rose)}
#footer .claim{opacity:.75;margin-top:1rem;max-width:30ch}
#footer .fuss-zeile{grid-column:1/-1;border-top:1px dashed rgb(251 246 238/.25);padding-top:1.5rem;font-size:.85rem;opacity:.7}

/* Breakpoints */
@media (max-width:1280px){
  .burger{display:grid}
  .kopf-nav{max-height:calc(100dvh - 130px);overflow-y:auto}
  #header .inside{grid-template-columns:1fr}
  .kopf-nav{display:none;grid-column:1/-1;padding:0 0 1.2rem}
  .kopf-nav ul{flex-direction:column;gap:0;font-size:1.1rem}
  .kopf-nav a,.kopf-nav strong{padding:.7rem 0}
  #header .topbar a{display:inline-block;padding:.5rem 0}
  .kopf-logo:has(.menu-schalter:checked) .burger{background:var(--rose)}
  .kopf-logo:has(.menu-schalter:checked)~.kopf-nav{display:block}
}
@media (max-width:900px){
  .hero,.freebie{grid-template-columns:1fr}
  .themen,.mod_pagepreview .body>ul{grid-template-columns:repeat(2,1fr)} .karten{gap:1.2rem}
  #footer .fuss-raster{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .karten,.mod_pagepreview .body>ul{grid-template-columns:1fr}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}
  .notiz-zettel{display:none} #footer .fuss-raster{grid-template-columns:1fr}
  .kopf-logo{height:70px} .logo img{height:44px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;transition-duration:.01s!important}}
.mod_pagepreview li>a:not(:has(img))::before{content:'';display:block;aspect-ratio:4/3;background:var(--papier-2) url(../../files/basteln/theme/basteln-net-zeichen.svg) center/28% no-repeat}

/* Suche im Kopf und Ergebnisseite (durchsucht www und Blog) */
#header .inside{grid-template-columns:auto 1fr auto auto}
.kopf-suche .formbody{display:flex;align-items:center;border:2px dashed var(--linie);border-radius:999px;background:#fff8;padding:.15rem .2rem .15rem 1rem}
.kopf-suche .formbody:focus-within{border-color:var(--rose-tief)}
.kopf-suche input[type=search],.mod_search input[type=search]{border:0;background:transparent;font:inherit;font-size:.95rem;color:var(--tinte);width:11rem;outline:0;min-height:40px}
.kopf-suche button,.mod_search button{border:0;cursor:pointer;background:var(--rose-tief);color:#fff;border-radius:999px;font:inherit;font-weight:800;font-size:.85rem;padding:.5rem 1rem;min-height:40px}
.kopf-suche label,.mod_search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.suche-ergebnis .formbody{display:flex;gap:.6rem;max-width:520px;background:#fff;border:2px solid var(--tinte);border-radius:999px;padding:.3rem .3rem .3rem 1.2rem;margin:1rem 0 2rem}
.suche-ergebnis input[type=search]{width:100%}
.mod_search .header{color:var(--tinte-2);font-size:.95rem;margin-bottom:1.5rem}
.mod_search .search_default{background:#fff;padding:1.2rem 1.4rem;border-radius:4px;box-shadow:0 14px 28px -22px rgb(59 46 42/.5);margin-bottom:1.2rem}
.mod_search .search_default h3{font-size:1.3rem;margin:0 0 .3rem} .mod_search .search_default h3 a{color:var(--tinte);text-decoration:none}
.mod_search .search_default .url{font-size:.82rem;color:var(--salbei-tief)} .mod_search .highlight{background:var(--butter);padding:0 .15em}
@media (max-width:1280px){
  #header .inside{grid-template-columns:1fr}
  .kopf-suche{display:none;padding-bottom:1.2rem}
  .kopf-logo:has(.menu-schalter:checked)~.kopf-suche{display:block}
  .kopf-suche input[type=search]{width:100%}
}

/* Blog: gleiche Navigation, Menüpunkt Blog aktiv */
.blog .kopf-nav li.nav-blog>a::after{opacity:1;transform:none}
body.nav-blog .mod_breadcrumb{display:none}

/* Kopf: Logo nie stauchen, Menüpunkte einzeilig, Suche als Lupe, die beim Fokus aufklappt */
.kopf-logo{flex:none;min-width:max-content}
.kopf-nav a,.kopf-nav strong{white-space:nowrap}
.kopf-nav ul{gap:1.15rem}
@media (min-width:1281px){
  .kopf-suche .formbody{padding:.15rem;border-style:solid;border-color:transparent;background:transparent}
  .kopf-suche input[type=search]{width:0;min-width:0;padding:0;transition:width .3s}
  .kopf-suche .formbody:focus-within{border-color:var(--rose-tief);background:#fff;padding-left:1rem}
  .kopf-suche .formbody:focus-within input[type=search]{width:10rem}
}
.kopf-suche button{font-size:0;width:42px;height:42px;padding:0;flex:none;
  background:var(--rose-tief) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/svg%3E") center/19px no-repeat}

/* Vorlagen-Seiten: Kopf mit Bild und Download, Hub-Kopf, FAQ, passende Motive */
.vorlage-kopf{display:grid;grid-template-columns:1fr minmax(240px,340px);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin:0 0 2.5rem}
.vorlage-kopf h1{font-size:clamp(2rem,1.4rem + 2.2vw,3.2rem)}
.vorlage-kopf .knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.infos{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 0;padding:0;list-style:none}
.infos li{background:#fff;border:2px dashed var(--linie);border-radius:14px;padding:.5rem .9rem;font-size:.9rem;line-height:1.3}
.infos b{display:block;font-family:var(--hand);font-weight:400;color:var(--rose-dunkel);font-size:.8rem}
.vorlage-bild{position:relative;background:#fff;padding:12px 12px 44px;box-shadow:0 18px 40px -18px rgb(59 46 42/.45);transform:rotate(2deg)}
.vorlage-bild img{width:100%;height:auto;border:1px solid var(--linie)}
.vorlage-bild figcaption{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-family:var(--hand);font-size:.9rem;color:var(--tinte-2)}
body:not(.startseite) #main .vorlage-artikel>*{max-width:var(--lese)}
body:not(.startseite) #main .vorlage-artikel>.vorlage-kopf,body:not(.startseite) #main .vorlage-artikel>.passt,body:not(.startseite) #main .vorlage-artikel>.mod_pagepreview{max-width:var(--breit)}
.vorlage-artikel>.vorlage-kopf,.vorlage-artikel>.passt{padding-left:var(--rand);padding-right:var(--rand)}
.vorlage-hub-kopf{max-width:var(--lese);margin-bottom:2rem}
.vorlagen-karten .page_image img{aspect-ratio:1;object-fit:cover}
.vorlagen-karten .body>ul{grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr))}
.passt{margin:3rem auto} .passt .galerie{grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr))}
.faq{margin:3rem auto} .faq details{background:#fff;border-radius:12px;padding:1rem 1.2rem;margin-bottom:.7rem;box-shadow:0 10px 24px -20px rgb(59 46 42/.5)}
.faq summary{cursor:pointer;font-weight:800;list-style:none;position:relative;padding-right:2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:0;top:-.1rem;font-family:var(--hand);color:var(--rose-tief);font-size:1.3rem}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:.7rem 0 0}
@media (max-width:760px){.vorlage-kopf{grid-template-columns:1fr} .vorlage-bild{max-width:300px;justify-self:center}}
body:has(.vorlage-kopf) .mod_breadcrumb{max-width:var(--breit)}

/* Blog-Startseite: Beiträge als Notizzettel ohne Bild */
.blog-kopf{max-width:var(--lese);margin-bottom:2.5rem}
body.nav-blog #main .mod_article>*{max-width:var(--breit)}
body.nav-blog #main .mod_article>.blog-kopf{max-width:var(--breit)}
.blog-liste li[rel="index"],.blog-liste li[rel="vorlagen"],.blog-liste li[rel="basteln-nach-themen"],.blog-liste li[rel="saisonale-top-elemente"],.blog-liste li[rel="fragenbox"]{display:none}
.blog-liste .page_image,.blog-liste li>a::before{display:none}
.blog-liste .body>ul{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:1.6rem}
.blog-liste .body>ul>li>a{padding:1.4rem 1.4rem 1.6rem;border-radius:3px;box-shadow:0 14px 26px -18px rgb(59 46 42/.5);position:relative}
.blog-liste .body>ul>li:nth-child(4n+1)>a{background:var(--butter)} .blog-liste .body>ul>li:nth-child(4n+2)>a{background:var(--rose)}
.blog-liste .body>ul>li:nth-child(4n+3)>a{background:var(--salbei)} .blog-liste .body>ul>li:nth-child(4n)>a{background:var(--flieder)}
.blog-liste .body>ul>li>a::after{content:'';position:absolute;top:-10px;left:50%;width:70px;height:20px;margin-left:-35px;background:rgb(255 255 255/.55);transform:rotate(-3deg)}
.blog-liste li>a h2{margin:.2rem 0 .6rem;font-size:1.3rem}
.blog-liste .page_teaser{margin:0;color:var(--tinte);opacity:.85}

/* Bilder in importierten Texten: so setzen, wie sie in WordPress gedacht waren.
   Kleine Bilder (alignleft/alignright, meist 150 px) werden vom Text umflossen, große stehen in voller Spaltenbreite. */
.rte img{transform:none;margin:0;padding:6px;border-radius:2px;box-shadow:0 10px 22px -14px rgb(59 46 42/.5);background:#fff}
.rte img:nth-of-type(n){transform:none}
.rte img.alignright,.rte figure:has(img.alignright){float:right;clear:right;margin:.35rem 0 1rem 1.6rem;max-width:min(46%,260px);height:auto;transform:rotate(1.2deg)}
.rte img.alignleft,.rte figure:has(img.alignleft){float:left;clear:left;margin:.35rem 1.6rem 1rem 0;max-width:min(46%,260px);height:auto;transform:rotate(-1.2deg)}
.rte figure:has(img.alignright) img,.rte figure:has(img.alignleft) img{float:none;margin:0;max-width:100%;transform:none;box-shadow:none;padding:0}
.rte img.size-full,.rte img.size-medium,.rte img.aligncenter,.rte img.alignnone{display:block;margin:1.8rem auto;padding:10px;max-width:100%}
.rte img.size-full.alignright,.rte img.size-full.alignleft,.rte img.size-medium.alignright,.rte img.size-medium.alignleft{display:inline;margin-top:.35rem;padding:6px}
.rte figure{margin:1.8rem 0;background:#fff;padding:8px 8px 10px;box-shadow:0 12px 26px -16px rgb(59 46 42/.5);border-radius:2px;width:fit-content;max-width:100%}
.rte figure figcaption{margin:.5rem .2rem 0;font-family:var(--hand);font-size:.85rem;line-height:1.35;color:var(--tinte-2);text-align:center}
.rte figure img{box-shadow:none;padding:0}
.rte table,.rte hr{clear:both}
.rte::after{content:'';display:table;clear:both}
.content-text .rte>figure:first-child,.content-text .rte>p:first-child>img:only-child{max-width:420px}
/* Schritt-Tabellen aus WordPress (Nummer, Bild, Text) als Schrittkarten */
.rte table{border-collapse:separate;border-spacing:0 .9rem;width:100%;font-size:1rem}
.rte table br{display:none}
.rte td{border:0;padding:.9rem 1rem;vertical-align:top;background:#fff}
.rte tr td:first-child{border-radius:12px 0 0 12px} .rte tr td:last-child{border-radius:0 12px 12px 0}
.rte td[align="right"]{width:3rem;text-align:center;font-family:var(--hand);color:var(--rose-tief);font-size:1.25rem;background:var(--papier-2)}
.rte td img.alignright,.rte td img.alignleft{max-width:min(40%,150px);margin-top:0}
@media (max-width:600px){
  .rte img.alignright,.rte img.alignleft,.rte figure:has(img.alignright),.rte figure:has(img.alignleft){max-width:44%}
  .rte td img.alignright,.rte td img.alignleft{float:none;display:block;max-width:100%;margin:0 0 .7rem}
}
/* Große Bilder (size-full) nie umfließen: zentriert als Polaroid; mittlere bis 300 px umfließen */
.rte img.size-full,.rte img.size-full.alignleft,.rte img.size-full.alignright{float:none;display:block;margin:2rem auto;max-width:min(100%,460px);padding:12px 12px 14px;transform:rotate(-1deg);box-shadow:0 18px 36px -20px rgb(59 46 42/.5)}
.rte img.size-medium.alignleft,.rte img.size-medium.alignright{max-width:min(46%,300px)}
.content-text .rte>p:first-child>img:only-child:not(.size-full){max-width:min(46%,300px)}
.mod_pagepreview.blog-liste li>a::before,.mod_pagepreview.blog-liste .page_image{display:none}
/* Schritt-Tabellen ohne align-Attribut: erste, kurze Zelle als Nummer */
.rte tr>td:first-child:not(:only-child):not(:has(img)){width:3rem;text-align:center;font-family:var(--hand);color:var(--rose-tief);font-size:1.25rem;background:var(--papier-2)}
.rte img.alignleft:not(.size-full),.rte figure:has(img.alignleft){margin-right:2.1rem}
.rte img.alignright:not(.size-full),.rte figure:has(img.alignright){margin-left:2.1rem}

/* Beitragsbild oben im Blogbeitrag und Bild auf den Blog-Karten */
.beitragsbild{max-width:var(--lese);margin:0 auto 2rem;padding:0 var(--rand)}
.beitragsbild img{width:100%;aspect-ratio:3/2;object-fit:cover;background:#fff;padding:10px;box-shadow:0 18px 36px -22px rgb(59 46 42/.55);transform:rotate(-.6deg)}
.mod_pagepreview.blog-liste .page_image{display:block;margin:-.4rem -.4rem 1rem}
.mod_pagepreview.blog-liste .page_image img{width:100%;aspect-ratio:4/3;object-fit:cover;padding:6px;background:#fff;box-shadow:0 8px 16px -12px rgb(59 46 42/.5)}
#main .mod_article>.beitragsbild{max-width:calc(var(--lese) + 2 * var(--rand))}

/* Themenseiten: passende Inhalte als Karten */
body:not(.startseite) #main .mod_article>.themen-karten{max-width:var(--breit)}
.themen-karten{margin:1rem auto 3rem}
.karten-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:2rem 1.6rem}
.karten-raster .karte img,.karten-raster .ohne-bild{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.karten-raster .ohne-bild{background:var(--papier-2) url(../../files/basteln/theme/basteln-net-zeichen.svg) center/28% no-repeat}
.karten-raster .karte h3{font-size:1.2rem}

/* Anleitungsseiten (app:import-anleitungen): Ergebnisbild quer, Materialzettel, Schritte, Tipp */
.anleitung .vorlage-kopf{grid-template-columns:1fr minmax(260px,420px)}
.anleitung .vorlage-bild.ergebnis img{aspect-ratio:4/3;border:0}
.material-zettel{position:relative;background:#fff;margin:2.5rem auto;padding:1.6rem 1.8rem 1.4rem;border-radius:4px;box-shadow:0 18px 36px -24px rgb(59 46 42/.55);transform:rotate(-.6deg);
  background-image:repeating-linear-gradient(transparent 0 1.9rem,var(--linie) 1.9rem calc(1.9rem + 1px));background-position:0 3.6rem}
.material-zettel::before{content:'';position:absolute;top:-12px;left:50%;width:110px;height:26px;margin-left:-55px;background:rgb(244 227 181/.85);transform:rotate(-2deg)}
.material-zettel h2{margin:0 0 .8rem;font-size:1.5rem}
.material-zettel ul{margin:0;padding-left:1.2rem;line-height:1.9rem}
.material-zettel li::marker{content:'✓  ';color:var(--salbei-tief);font-weight:800}
.material-zettel .werkzeug{margin:.6rem 0 0;line-height:1.9rem}
.schritte{margin:3rem auto;counter-reset:schritt}
.schritt{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:1.6rem;align-items:center;margin:0 0 2rem}
.schritt-bild{margin:0;background:#fff;padding:8px;border-radius:6px;box-shadow:0 14px 28px -22px rgb(59 46 42/.6)}
.schritt-bild img{display:block;width:100%;height:auto}
.schritt h3{counter-increment:schritt;margin:0 0 .4rem;font-size:1.3rem}
.schritt h3::before{content:counter(schritt);display:inline-grid;place-items:center;width:2rem;height:2rem;margin-right:.6rem;border-radius:50%;background:var(--rose);color:var(--rose-dunkel);font-family:var(--body);font-weight:800;font-size:1rem;vertical-align:.15em}
.schritt p{margin:0}
.tipp-zettel{margin:2.5rem auto;padding:1.2rem 1.5rem;background:var(--butter);border-radius:4px 18px 4px 18px;transform:rotate(.5deg)}
.tipp-zettel strong{font-family:var(--hand);font-weight:400;color:var(--rose-tief);font-size:1.05rem}
.tipp-zettel p{margin:.4rem 0 0}
@media (max-width:760px){.schritt{grid-template-columns:1fr;gap:.8rem} .schritt-bild{max-width:420px} .anleitung .vorlage-kopf{grid-template-columns:1fr}}
.passt a.vorlage.quer img{aspect-ratio:4/3;object-fit:contain;background:var(--papier)}
#main .mod_article>.material-zettel{padding:1.6rem 1.8rem 1.4rem} #main .mod_article>.tipp-zettel{padding:1.2rem 1.5rem}
@media (max-width:820px){#main .mod_article>.material-zettel,#main .mod_article>.tipp-zettel{margin-left:var(--rand);margin-right:var(--rand);padding-left:1.2rem;padding-right:1.2rem}}

/* Hauptmenü mit Untermenüs (Mega-Menü, app:hauptmenue) */
.sub-schalter{position:absolute;opacity:0;pointer-events:none}
.sub-pfeil{display:none}
.mega-titel{font-family:var(--hand);color:var(--rose-tief);font-size:1.15rem;margin:0 0 .5rem;font-weight:400}
.mega ul{list-style:none;margin:0;padding:0;display:block;font-size:.95rem}
.mega li a{white-space:normal}
.mega a.mit-bild{display:flex;align-items:center;gap:.7rem}
.mega-bild{display:flex;flex:none} .mega a.mit-bild img{width:44px;height:44px;border-radius:12px;border:2px solid var(--linie);background:#fff;object-fit:cover;flex:none;transition:transform .25s,border-color .25s}
.mega a.mit-bild:hover img{transform:rotate(-4deg) scale(1.06);border-color:var(--rose)}
.mega-alle{font-weight:800;color:var(--rose-tief)!important}
.mega a.mega-karte{display:grid;gap:.3rem;align-content:start;background:var(--papier-2);border-radius:18px;padding:1rem;text-decoration:none;color:var(--tinte)}
.mega-karte img{width:100%;height:auto;border-radius:12px;background:#fff}
.mega-karte .hand{font-size:1.1rem} .mega-karte b{font-size:1rem;line-height:1.3}
@media (min-width:1281px){
  #header .inside{position:relative}
  .mega-nav li.hat-sub>a{padding-right:1.1rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%233B2E2A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 4.5 4.5 4.5-4.5'/%3E%3C/svg%3E") right center/10px no-repeat}
  .mega{position:absolute;left:max(var(--rand),calc((100% - 1040px)/2));right:max(var(--rand),calc((100% - 1040px)/2));top:calc(100% - 4px);z-index:60;padding:1.8rem 2rem 1.4rem;background:#fff;border-radius:24px;
    box-shadow:0 24px 60px -24px rgb(59 46 42/.35),0 0 0 1px var(--linie);opacity:0;visibility:hidden;transform:translateY(10px);
    transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
  .mega::before{content:'';position:absolute;left:0;right:0;top:-18px;height:18px}
  .mega::after{content:'';position:absolute;top:-10px;left:50%;width:90px;height:22px;margin-left:-45px;background:var(--rose);opacity:.75;transform:rotate(-2deg);border-radius:3px}
  .mega-nav li.hat-sub:hover>.mega,.mega-nav li.hat-sub:focus-within>.mega{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .mega-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.5rem 2.5rem}
  .mega-ideen .mega-spalten{grid-template-columns:repeat(3,minmax(150px,1fr)) minmax(200px,240px)}
  .mega-vorlagen{left:calc(50% - 170px);right:auto;width:340px}
  .mega-mal .mega-spalten{grid-template-columns:2fr 1fr 1fr}
  .mega-mal .mega-spalten>div:first-child ul{columns:2;column-gap:2rem}
  .mega-mal li{break-inside:avoid}
  .mega li a{padding:.35rem 0}
  .mega a.mit-bild{padding:.3rem 0}
  .mega-alle{display:inline-block;margin-top:1.1rem;padding-top:.9rem!important;border-top:1px dashed var(--linie)}
  .mega-nav .mega a::after{display:none}
  .mega-nav .mega li a:hover span{color:var(--rose-tief)}
}
@media (max-width:1280px){
  .mega-nav li.hat-sub{display:grid;grid-template-columns:1fr 48px;align-items:center}
  .sub-pfeil{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;border-radius:10px}
  .sub-pfeil::before{content:'';width:10px;height:10px;border-right:2px solid var(--tinte);border-bottom:2px solid var(--tinte);transform:rotate(45deg) translateY(-3px);transition:transform .25s}
  .sub-schalter:checked+.sub-pfeil::before{transform:rotate(-135deg) translateY(-3px)}
  .sub-schalter:focus-visible+.sub-pfeil{outline:3px solid var(--rose-tief)}
  .mega{grid-column:1/-1;display:none;padding:.2rem 0 1rem .9rem;border-left:2px dashed var(--linie);margin-left:.2rem}
  .sub-schalter:checked~.mega{display:block}
  .mega-spalten{display:grid;gap:1rem}
  .mega ul{font-size:1rem}
  .mega li a{padding:.45rem 0;font-weight:600}
  .mega-karte{display:none}
  .mega-alle{display:block;padding:.6rem 0 0!important}
}

/* Hauptseiten (app:hauptseiten): Aufbau wie die Startseite, je Abschnitt ein Artikel */
body:has(.hub-hero) .mod_breadcrumb{max-width:var(--breit)}
body:not(.startseite) #main .hub-abschnitt:not(:first-child){padding-top:clamp(3rem,6vw,5.5rem)}
body:not(.startseite) #main .hub-abschnitt>.hub-text,body:not(.startseite) #main .hub-abschnitt>.faq{max-width:calc(var(--lese) + 2 * var(--rand))}
.hub-hero h1{font-size:clamp(2.4rem,1.6rem + 3vw,4rem)}
.hub-karten .kopf{margin-bottom:2rem}
.karten-raster .knopf{top:18px;right:18px}
.karten-raster.kompakt{grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr));gap:1.6rem 1.2rem}
.karten-raster.kompakt .karte{padding:8px 8px 1rem}
.karten-raster.kompakt .karte .inhalt{padding:.8rem .3rem 0}
.karten-raster.kompakt .karte h3{font-size:1.02rem;margin:0}
.karten-raster.kompakt .karte p{display:none}
.hub-text{margin-bottom:3rem}

/* Bastellexikon: A-Z-Übersicht */
.lexikon-az{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:1.2rem;margin-top:2rem}
.lexikon-az section{background:#fff;border-radius:6px;padding:1rem 1.2rem 1.1rem;box-shadow:0 14px 28px -22px rgb(59 46 42/.5)}
.lexikon-az section:nth-child(4n+1){border-top:6px solid var(--rose)} .lexikon-az section:nth-child(4n+2){border-top:6px solid var(--salbei)}
.lexikon-az section:nth-child(4n+3){border-top:6px solid var(--butter)} .lexikon-az section:nth-child(4n+4){border-top:6px solid var(--flieder)}
.lexikon-az h2{font-size:2rem;margin:0 0 .4rem;color:var(--rose-tief)}
.lexikon-az ul{list-style:none;margin:0;padding:0} .lexikon-az li{padding:.2rem 0}

/* Gezeichnete Ergebnisbilder auf Altseiten (ergaenzungsbilder_einbinden.py) */
.beitragsbild.zeichnung img{aspect-ratio:4/3;object-fit:contain;background:#FBF6EE}
#main .mod_article>.beitragsbild.zeichnung{max-width:var(--lese)} .beitragsbild.zeichnung img{max-width:560px}

/* Altanleitungen: Kopf mit Kurzantwort und Steckbrief (Welle 0, 31.10.2026) */
#main .mod_article>.altanleitung-kopf{max-width:var(--lese);margin:0 auto 2rem}
.altanleitung-kopf h1{font-size:clamp(2rem,4.2vw,2.9rem);line-height:1.1;margin-bottom:.8rem;text-wrap:balance}
.altanleitung-kopf .lead{margin:0;max-width:none}
/* 404-Seite (02.11.2026) */
.fehler-suche{display:flex;gap:.6rem;flex-wrap:wrap;max-width:var(--lese);margin:0 0 1.5rem}
.fehler-suche input{flex:1 1 14rem;min-height:48px;padding:.7rem 1.1rem;border:2px solid var(--tinte);border-radius:999px;font:inherit;background:#fff}
.fehler-wege{display:flex;gap:.6rem;flex-wrap:wrap}