/* Zwirnpiraten — Design nach Handoff (Tokens final). Selbst gehostete Fonts (DSGVO). */

/* ---------- Fonts ---------- */
@font-face { font-family: "Bricolage Grotesque"; src: url("/assets/fonts/bricolage-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/karla-var.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/karla-italic-var.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/assets/fonts/caveat.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --leinen:#FBF3E4; --papier:#FFFBF2; --imgph:#EFE2CB;
  --ink:#16323C; --ink80:#243D45; --ink60:#38525C; --muted:#59696E; --muted-l:#5F7076;
  --koralle:#C6503A; --senf:#E8B23A; --seegruen:#6FA89B; --rose:#D9A6C4; --sand:#F0C9A8; --nebel:#B9CFE0;
  --dot:#C9B79A;
  --bri:"Bricolage Grotesque", system-ui, sans-serif;
  --kar:"Karla", system-ui, sans-serif;
  --cav:"Caveat", cursive;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--leinen); color:var(--ink); font-family:var(--kar); font-size:19px; line-height:1.6; }
::selection { background:var(--senf); color:var(--ink); }
img { max-width:100%; display:block; }
a { color:var(--koralle); text-decoration:none; }
a:hover { color:var(--ink); text-decoration:underline; text-decoration-style:wavy; text-decoration-thickness:1.5px; text-underline-offset:4px; }
:focus-visible { outline:3px solid var(--koralle); outline-offset:2px; }
h1,h2,h3 { font-family:var(--bri); text-wrap:balance; }

.wrap { max-width:1180px; margin:0 auto; padding:0 28px; }
.eyebrow-hand { font-family:var(--cav); color:var(--koralle); font-size:22px; }
.hand { font-family:var(--cav); }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:50; background:var(--leinen); border-bottom:2px solid var(--ink); }
.site-header .inner { display:flex; align-items:center; gap:28px; padding:14px 28px; max-width:1180px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .z { width:38px; height:38px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--bri); font-weight:800; font-size:19px; display:grid; place-items:center; }
.brand .wm { font-family:var(--bri); font-weight:800; font-size:21px; letter-spacing:-0.5px; line-height:1; }
.brand .claim { font-family:var(--cav); font-size:15px; color:var(--koralle); display:block; }
.brand:hover { text-decoration:none; }
nav.main { margin-left:auto; display:flex; align-items:center; gap:8px; }
nav.main a { font-family:var(--kar); font-weight:600; font-size:15px; color:var(--ink); padding:9px 16px; border-radius:999px; border:2px solid transparent; }
nav.main a:hover { border-color:var(--ink); text-decoration:none; }
nav.main a[aria-current="page"] { background:var(--ink); color:var(--leinen); }
.cta { background:var(--senf); color:var(--ink)!important; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:9px 18px; border-radius:999px; font-family:var(--bri); font-weight:600; margin-left:10px; transition:transform .12s ease, box-shadow .12s ease; }
.cta:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); text-decoration:none; }

/* ---------- Buttons ---------- */
.btn { display:inline-block; font-family:var(--bri); font-weight:600; font-size:16px; border:2px solid var(--ink); border-radius:999px; padding:13px 26px; box-shadow:4px 4px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease; cursor:pointer; }
.btn:hover { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); text-decoration:none; }
.btn-primary { background:var(--koralle); color:#fff!important; }
.btn-outline { background:transparent; color:var(--ink)!important; }
.btn-outline:hover { background:var(--ink); color:var(--leinen)!important; }
.btn-senf { background:var(--senf); color:var(--ink)!important; }

/* ---------- Hero ---------- */
.hero { display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; padding:56px 28px 20px; }
.hero .pill { display:inline-block; font-family:var(--cav); font-size:22px; color:var(--koralle); border:2px dashed var(--koralle); border-radius:999px; padding:2px 16px; transform:rotate(-2deg); margin-bottom:18px; }
.hero h1 { font-size:66px; font-weight:800; line-height:.98; letter-spacing:-2.5px; margin-bottom:18px; }
.hero h1 mark { background:var(--senf); color:var(--ink); padding:0 8px; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.hero .lead { font-size:19px; line-height:1.6; max-width:46ch; color:var(--ink60); text-wrap:pretty; margin-bottom:26px; }
.hero .actions { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px; }
.stats { display:flex; gap:38px; border-top:2px dotted var(--dot); padding-top:22px; }
.stats .n { font-family:var(--bri); font-weight:800; font-size:30px; line-height:1; }
.stats .l { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-l); margin-top:4px; }
.hero-media { position:relative; }
.hero-media img { position:relative; z-index:1; width:100%; height:520px; object-fit:cover; border:2px solid var(--ink); border-radius:26px; box-shadow:6px 6px 0 var(--ink); }
.hero-media::after { content:""; position:absolute; inset:14px -14px -14px 14px; background:var(--seegruen); border:2px solid var(--ink); border-radius:26px; z-index:0; }
.hero-media .sticker { position:absolute; left:-10px; bottom:-18px; z-index:2; background:var(--papier); border:2px solid var(--ink); border-radius:16px; padding:10px 16px; box-shadow:4px 4px 0 var(--ink); transform:rotate(-3deg); font-family:var(--cav); font-size:18px; }

/* ---------- Ticker ---------- */
.ticker { background:var(--ink); color:var(--leinen); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); padding:16px 0; overflow:hidden; }
.ticker .row { display:flex; justify-content:center; gap:44px; font-family:var(--bri); font-weight:600; font-size:17px; opacity:.9; white-space:nowrap; flex-wrap:wrap; }

/* ---------- Sections ---------- */
.section { padding-top:64px; }
.section-head { display:flex; align-items:baseline; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.section-head h2 { font-size:38px; font-weight:800; letter-spacing:-1px; }
.section-head .sub { color:var(--muted); font-size:17px; }
.section-head .more { margin-left:auto; font-family:var(--kar); font-weight:600; }

/* ---------- Post-Cards ---------- */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.pcard { background:var(--papier); border:2px solid var(--ink); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; box-shadow:5px 5px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease; }
.pcard:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.pcard .thumb { height:190px; border-bottom:2px solid var(--ink); background:var(--imgph); object-fit:cover; width:100%; }
.pcard .body { padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pcard h3 { font-size:22px; font-weight:600; line-height:1.15; letter-spacing:-0.5px; }
.pcard h3 a { color:var(--ink); }
.pcard h3 a:hover { color:var(--koralle); }
.pcard .teaser { font-size:15px; line-height:1.55; color:var(--muted); }
.pcard .meta { margin-top:auto; padding-top:12px; font-size:13px; color:var(--muted-l); }
.badge { display:inline-block; align-self:flex-start; font-family:var(--kar); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.08em; border:1.5px solid var(--ink); border-radius:999px; padding:3px 12px; color:var(--ink); }
.t-anleitung{background:var(--seegruen)} .t-stofftest{background:var(--senf)} .t-upcycling{background:var(--rose)}
.t-anfaenger{background:var(--sand)} .t-werkzeug{background:var(--nebel)} .t-kinderkram{background:var(--senf)}

/* ---------- Kategorie-Kacheln ---------- */
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.cat { border:2px solid var(--ink); border-radius:18px; padding:22px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; transition:transform .12s ease; }
.cat:hover { transform:rotate(-1deg); text-decoration:none; }
.cat .name { font-family:var(--bri); font-weight:600; font-size:21px; color:var(--ink); }
.cat .desc { font-size:14px; color:var(--muted); }
.cat .cnt { font-family:var(--bri); font-weight:800; font-size:15px; opacity:.5; color:var(--ink); }

/* ---------- Newsletter ---------- */
.newsletter { background:var(--seegruen); border:2px solid var(--ink); border-radius:26px; padding:44px; box-shadow:6px 6px 0 var(--ink); display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.newsletter h2 { font-size:36px; font-weight:800; letter-spacing:-1.2px; margin:6px 0 12px; }
.newsletter p { font-size:17px; }
.nl-form { display:flex; flex-direction:column; gap:12px; }
.nl-form input { font-size:17px; padding:16px 20px; border-radius:14px; background:var(--leinen); border:2px solid var(--ink); font-family:var(--kar); }
.nl-form .hint { font-size:13px; color:var(--ink80); }

/* ---------- Blog-Index ---------- */
.index-head { padding-top:56px; }
.index-head h1 { font-size:56px; font-weight:800; letter-spacing:-2px; margin:6px 0 12px; }
.index-head .sub { color:var(--muted); font-size:18px; max-width:56ch; }
.filters { display:flex; gap:10px; flex-wrap:wrap; padding:28px 0 18px; border-bottom:2px solid var(--ink); }
.filters a { font-family:var(--kar); font-weight:600; font-size:15px; border:2px solid var(--ink); border-radius:999px; padding:9px 18px; color:var(--ink); }
.filters a:hover { text-decoration:none; background:var(--papier); }
.filters a[aria-current="true"] { background:var(--ink); color:var(--leinen); }
.index-grid { padding-top:34px; }
.index-grid .pcard .thumb { height:180px; }

/* ---------- Artikel ---------- */
.article-head { max-width:820px; margin:0 auto; padding-top:48px; }
.article-head .back { font-family:var(--kar); font-weight:600; font-size:15px; }
.article-head h1 { font-size:52px; font-weight:800; line-height:1.02; letter-spacing:-2px; margin:14px 0 16px; }
.article-head .lead { font-size:21px; line-height:1.5; color:var(--ink60); text-wrap:pretty; }
.byline { display:flex; align-items:center; gap:12px; margin-top:22px; padding-bottom:18px; border-bottom:2px solid var(--ink); }
.byline .avatar { width:46px; height:46px; border-radius:50%; border:2px solid var(--ink); background:var(--ink); color:#fff; font-family:var(--bri); font-weight:800; display:grid; place-items:center; font-size:20px; }
.byline .name { font-size:16px; font-weight:600; }
.byline .name a { color:var(--ink); }
.byline .metaline { font-size:14px; color:var(--muted-l); }
.article-hero { max-width:1100px; margin:34px auto 0; }
.article-hero img { width:100%; height:440px; object-fit:cover; border:2px solid var(--ink); border-radius:26px; box-shadow:6px 6px 0 var(--ink); }
.prose { max-width:720px; margin:40px auto 0; font-size:19px; line-height:1.72; color:var(--ink80); }
.prose > p { margin-bottom:24px; }
.prose > p:first-of-type::first-letter { font-family:var(--bri); font-weight:800; font-size:62px; float:left; line-height:.8; margin:6px 12px 0 0; color:var(--koralle); }
.prose h2 { font-family:var(--bri); font-size:32px; font-weight:800; letter-spacing:-1px; margin:38px 0 14px; color:var(--ink); }
.prose h3 { font-family:var(--bri); font-size:22px; font-weight:600; margin:26px 0 10px; color:var(--ink); }
.prose ul, .prose ol { margin:0 0 24px 24px; }
.prose li { margin-bottom:8px; }
.prose table { border-collapse:collapse; width:100%; margin-bottom:24px; font-size:17px; }
.prose th, .prose td { border:2px solid var(--ink); padding:10px 12px; text-align:left; vertical-align:top; }
.prose th { background:var(--papier); font-family:var(--kar); }
.tipp { background:var(--senf); border:2px solid var(--ink); border-radius:20px; padding:24px 26px; box-shadow:4px 4px 0 var(--ink); margin:26px 0; }
.tipp .t { font-family:var(--cav); font-size:22px; margin-bottom:6px; }
.tipp p { font-size:17px; line-height:1.55; margin:0; }
.prose blockquote { border-left:5px solid var(--koralle); padding-left:22px; font-family:var(--bri); font-weight:600; font-size:24px; line-height:1.35; letter-spacing:-0.5px; margin:26px 0; color:var(--ink); }
.tags { max-width:720px; margin:38px auto 0; display:flex; gap:10px; flex-wrap:wrap; padding:18px 0; border-top:2px dotted var(--dot); border-bottom:2px dotted var(--dot); }
.tags a { font-family:var(--kar); font-weight:600; font-size:14px; border:1.5px solid var(--ink); border-radius:999px; padding:6px 14px; color:var(--ink); }
.related { max-width:1100px; margin:0 auto; }
.related .card-grid { grid-template-columns:repeat(3,1fr); }
.rcard { background:var(--papier); border:2px solid var(--ink); border-radius:22px; padding:20px; box-shadow:5px 5px 0 var(--ink); transition:transform .12s ease, box-shadow .12s ease; display:flex; flex-direction:column; gap:10px; }
.rcard:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink); }
.rcard h3 { font-size:20px; font-weight:600; line-height:1.15; }
.rcard h3 a { color:var(--ink); }

/* ---------- Autorenprofil ---------- */
.author-hero { max-width:820px; margin:0 auto; padding-top:56px; display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; }
.author-hero .big-avatar { width:120px; height:120px; border-radius:50%; border:2px solid var(--ink); background:var(--ink); color:#fff; font-family:var(--bri); font-weight:800; font-size:52px; display:grid; place-items:center; box-shadow:5px 5px 0 var(--seegruen); flex:none; }
.author-hero h1 { font-size:44px; font-weight:800; letter-spacing:-1.5px; }
.author-hero .role { font-family:var(--cav); font-size:22px; color:var(--koralle); }
.author-body { max-width:720px; margin:34px auto 0; }
.author-body h2 { font-family:var(--bri); font-size:26px; font-weight:800; margin:32px 0 12px; }
.author-body p { margin-bottom:16px; color:var(--ink80); }
.expertise { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 6px; }
.expertise span { background:var(--papier); border:1.5px solid var(--ink); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:600; }

/* ---------- Generische Seiten (Kategorie-Stubs, Impressum) ---------- */
.page { max-width:820px; margin:0 auto; padding-top:56px; }
.page h1 { font-size:44px; font-weight:800; letter-spacing:-1.5px; margin-bottom:12px; }
.page h2 { font-family:var(--bri); font-size:24px; margin:28px 0 10px; }
.page p { margin-bottom:16px; color:var(--ink80); }
.hinweis { background:var(--papier); border-left:4px solid var(--koralle); border-radius:8px; padding:14px 18px; margin:20px 0; }

/* ---------- Footer ---------- */
.site-footer { background:var(--ink); color:var(--leinen); margin-top:80px; padding:52px 0 30px; }
.site-footer .cols { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; }
.site-footer .wm { font-family:var(--bri); font-weight:800; font-size:26px; }
.site-footer .fh { font-family:var(--cav); color:var(--senf); font-size:20px; margin:4px 0 10px; }
.site-footer .about { font-size:15px; opacity:.75; max-width:34ch; }
.site-footer h4 { font-family:var(--kar); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--senf); margin-bottom:10px; }
.site-footer ul { list-style:none; display:flex; flex-direction:column; gap:8px; }
.site-footer a { color:var(--leinen); opacity:.8; font-size:15px; }
.site-footer a:hover { opacity:1; }
.site-footer .copy { font-size:14px; opacity:.6; margin-top:34px; }

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .hero, .newsletter { grid-template-columns:1fr; }
  .hero-media { order:-1; }
  .hero-media img { height:360px; }
  .hero h1 { font-size:44px; letter-spacing:-1.5px; }
  .card-grid, .cat-grid, .related .card-grid { grid-template-columns:repeat(2,1fr); }
  .site-footer .cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:639px){
  body { font-size:17px; }
  .wrap, .site-header .inner { padding-left:20px; padding-right:20px; }
  .hero h1 { font-size:34px; letter-spacing:-1px; }
  .hero-media img { height:320px; }
  .index-head h1 { font-size:38px; }
  .article-head h1 { font-size:34px; letter-spacing:-1px; }
  .prose { font-size:17px; }
  .card-grid, .cat-grid, .related .card-grid, .site-footer .cols { grid-template-columns:1fr; }
  .pcard, .rcard, .newsletter { box-shadow:3px 3px 0 var(--ink); }
  .filters { overflow-x:auto; flex-wrap:nowrap; }
  .filters::-webkit-scrollbar { display:none; }
  .site-header .inner { flex-wrap:wrap; row-gap:6px; gap:12px; }
  .brand .claim { display:none; }
  nav.main { order:3; width:100%; justify-content:center; margin:4px 0 0; gap:6px; flex-wrap:wrap; }
  nav.main a { padding:7px 13px; font-size:14px; }
  .cta { margin-left:auto; padding:8px 15px; font-size:14px; }
  .article-hero img { height:220px; }
  .prose > p:first-of-type::first-letter { font-size:48px; }
}
@media (prefers-reduced-motion:reduce){ * { transition:none!important; } }

/* Logo-Signet im Header */
.brand .signet { width:42px; height:39px; display:block; }

/* Foto-Avatare (echtes Marlene-Foto fuellt den runden Container) */
.avatar img, .ab-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.avatar, .ab-avatar { overflow:hidden; padding:0; }
/* Profilseite: grosses Foto statt Monogramm */
.author-photo { width:220px; height:220px; flex:none; border:2px solid var(--ink); border-radius:20px; box-shadow:5px 5px 0 var(--seegruen); object-fit:cover; }
@media (max-width:639px){ .author-photo { width:100%; height:auto; max-height:340px; } }

/* ---------- Typo-Politur Artikel ---------- */
.prose { font-size:18px; line-height:1.75; }
.prose > p { margin-bottom:22px; }
.prose h2 { font-size:30px; margin:44px 0 14px; }
.article-head h1 { line-height:1.05; }
.article-head .lead { font-size:20px; line-height:1.55; }
/* Inline-Bild im Artikel (nicht der große Hero) */
.prose figure.inline-img { margin:30px 0; }
.prose figure.inline-img img { width:100%; height:360px; object-fit:cover; border:2px solid var(--ink); border-radius:20px; box-shadow:5px 5px 0 var(--ink); }

/* ---------- FAQ-Accordion (aufklappbar, aber im DOM immer vorhanden = crawlbar) ---------- */
.faq { max-width:720px; margin:38px auto 0; }
.faq h2 { font-family:var(--bri); font-size:30px; font-weight:800; letter-spacing:-1px; margin-bottom:16px; color:var(--ink); }
.faq details { background:var(--papier); border:2px solid var(--ink); border-radius:16px; margin-bottom:12px; overflow:hidden; }
.faq summary { list-style:none; cursor:pointer; padding:16px 48px 16px 20px; position:relative; font-family:var(--bri); font-weight:600; font-size:19px; color:var(--ink); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-family:var(--bri); font-weight:800; font-size:26px; color:var(--koralle); line-height:1; }
.faq details[open] summary::after { content:"\2212"; }
.faq details[open] summary { border-bottom:2px dotted var(--dot); }
.faq .answer { padding:14px 20px 18px; font-size:17px; line-height:1.65; color:var(--ink80); }
.faq summary:focus-visible { outline:3px solid var(--koralle); outline-offset:-3px; }

/* ---------- Autorenbox am Artikelende ---------- */
.author-box { max-width:720px; margin:48px auto 0; background:var(--papier); border:2px solid var(--ink); border-radius:22px; box-shadow:5px 5px 0 var(--ink); padding:26px 28px; display:flex; gap:22px; align-items:flex-start; }
.author-box .ab-avatar { width:72px; height:72px; border-radius:50%; border:2px solid var(--ink); background:var(--ink); color:#fff; font-family:var(--bri); font-weight:800; font-size:32px; display:grid; place-items:center; box-shadow:3px 3px 0 var(--seegruen); flex:none; }
.author-box .ab-role { font-family:var(--cav); font-size:19px; color:var(--koralle); }
.author-box .ab-name { font-family:var(--bri); font-weight:800; font-size:22px; letter-spacing:-0.5px; margin:2px 0 8px; }
.author-box .ab-name a { color:var(--ink); }
.author-box p { font-size:16px; line-height:1.6; color:var(--ink80); margin:0 0 10px; }
.author-box .ab-link { font-family:var(--kar); font-weight:600; font-size:15px; }
@media (max-width:639px){
  .prose { font-size:17px; }
  .prose h2 { font-size:25px; }
  .faq h2 { font-size:25px; }
  .faq summary { font-size:17px; }
  .prose figure.inline-img img { height:220px; }
  .author-box { flex-direction:column; gap:14px; box-shadow:3px 3px 0 var(--ink); }
}

/* Hero-Note statt Fake-Stats */
.hero-note { border-top:2px dotted var(--dot); padding-top:20px; font-size:15px; line-height:1.5; color:var(--muted); font-family:var(--kar); max-width:46ch; }