/* Never Miss a Birthday — Blog-Designsystem (Grape Soda, Kreativ-Modus).
   Der Blog ist die Kreativ-Seite des Produkts: unterschiedlich große Boxen,
   Rotation, drei Schriftrollen statt einer geraden Liste. Kein Caveat/Kursiv-
   Handschrift (siehe Produkt-Sweep) — Scribble-Wirkung kommt aus Strike +
   Serif-Ersatzwort und handgezeichneten SVG-Wellenlinien statt Skriptschrift. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Instrument+Serif:ital@0;1&family=Space+Mono:wght@400;700&display=swap');

:root{
  --lilac:#f4f1ff;--lilac-2:#ece7ff;--violet:#6c5ce7;--violet-deep:#5b5bd6;
  --butter:#ffe08a;--mint:#bff0db;--pink:#ffd3e6;
  --ink:#1d1b2e;--muted:#6b6880;--line:#e7e3f5;
  --font-body:"Bricolage Grotesque",system-ui,sans-serif;
  --font-serif:"Instrument Serif",Georgia,serif;
  --font-mono:"Space Mono",monospace;
}
*{box-sizing:border-box}
body{
  margin:0;color:var(--ink);font-family:var(--font-body);line-height:1.65;
  background-color:#fdfcff;
  background-image:
    radial-gradient(circle, rgba(108,92,231,.09) 1px, transparent 1.6px),
    radial-gradient(ellipse 900px 560px at 88% 0, rgba(255,224,138,.35), transparent 60%),
    radial-gradient(ellipse 800px 560px at 4% 10%, rgba(191,240,219,.35), transparent 58%);
  background-size:24px 24px, 100% 100%, 100% 100%;
  background-repeat:repeat, no-repeat, no-repeat;
}
.wrap{max-width:680px;margin:0 auto;padding:0 20px}

/* ─── Header ─── */
header{border-bottom:1px solid var(--line);background:var(--lilac);position:relative;overflow:hidden}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px;position:relative;z-index:1}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16.5px;letter-spacing:-.02em;text-decoration:none;color:var(--ink);white-space:nowrap;flex-shrink:0}
.logo img{width:30px;height:30px;display:block;flex-shrink:0}
.logo .logo-short{display:none}
.nav a{margin-left:18px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
@media (max-width:480px){
  .logo{font-size:15px}
  .logo img{width:26px;height:26px}
  .logo .logo-full{display:none}
  .logo .logo-short{display:inline}
  .nav a{margin-left:12px;font-size:13.5px}
}

/* ─── Memphis-Blobs (Deko) ─── */
.blob{position:absolute;border-radius:42% 58% 55% 45%/55% 45% 55% 45%;opacity:.55;pointer-events:none;z-index:0}
.blob--butter{background:var(--butter)}
.blob--mint{background:var(--mint);border-radius:24%}
.blob--pink{background:var(--pink);border-radius:50%}

/* ─── Artikel-Grundgerüst ─── */
article{padding:36px 0 20px;position:relative}
.k{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--violet-deep);background:var(--lilac);display:inline-block;padding:5px 12px;border-radius:7px;transform:rotate(-1.2deg);border:1px solid var(--line)}
h1{font-weight:800;letter-spacing:-.03em;font-size:clamp(30px,5.5vw,44px);line-height:1.06;margin:14px 0 10px;text-wrap:balance}
h1 em,.accent{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--violet)}
.meta{font-family:var(--font-mono);color:var(--muted);font-size:12.5px;margin:0 0 28px;letter-spacing:.01em}

article p{font-size:17px;color:#2f2b45;margin:0 0 18px}
article h2{font-weight:800;letter-spacing:-.02em;font-size:26px;margin:42px 0 12px;line-height:1.15}
article h3{font-weight:800;letter-spacing:-.01em;font-size:19px;margin:24px 0 8px}
article strong{color:var(--ink)}

figure{margin:30px 0 28px}
figure img{width:100%;height:auto;border-radius:18px;display:block;box-shadow:0 18px 34px -18px rgba(40,30,90,.4);transform:rotate(-0.5deg)}
figcaption{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);margin-top:10px}

ul,ol{padding-left:22px;margin:0 0 18px}
li{font-size:17px;color:#2f2b45;margin-bottom:8px}

/* ─── Scribble: handschriftliches Durchstreichen ohne Kursiv-Font ───
   Wie im Produkt (grape-strike): alte Zeile durchgestrichen, Ersatz in
   Serif-Kursiv statt in einer Skriptschrift. */
.strike{position:relative;white-space:nowrap;color:var(--muted)}
.strike::after{content:"";position:absolute;left:-3%;right:-3%;top:54%;height:.12em;background:var(--violet);border-radius:999px;transform:rotate(-2deg)}
.fix{font-family:var(--font-serif);font-style:italic;color:var(--violet-deep);font-size:1.22em;margin-left:.18em}

/* Handgezeichnete Wellenlinie unter einer Schlüsselphrase — der eine erlaubte
   „Scribble"-Moment pro Artikel. SVG statt Kursiv-Handschrift. */
.squiggle{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q 8 2 16 8 T 32 8 T 48 8 T 64 8 T 80 8 T 100 8' fill='none' stroke='%236c5ce7' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 9px;padding-bottom:5px;
}

/* Steckbrief-Karte (dunkel, Mono-Zahlen — für Statistik-artige Callouts) */
.steck{background:var(--ink);color:#fff;border-radius:16px;padding:16px 20px;margin:14px 0 24px;font-family:var(--font-mono);font-size:13.5px;line-height:1.9}
.steck b{display:inline-block;min-width:132px;color:var(--butter);font-weight:700}

/* Boxen: eine Basis, mehrere Farb-/Größen-/Neigungs-Varianten statt eines
   einzigen uniformen Lilac-Kastens */
.box{border:1px solid var(--line);border-radius:18px;padding:18px 20px;margin:26px 0;background:var(--lilac)}
.box p{margin:0;font-size:15.5px}
.box--butter{background:var(--butter);border-color:transparent}
.box--mint{background:var(--mint);border-color:transparent}
.box--pink{background:var(--pink);border-color:transparent}
.box--ink{background:var(--ink);border-color:transparent}
.box--ink p{color:#fff}
.box--sm{max-width:420px}
.box--wide{margin-left:-8px;margin-right:-8px;padding:22px 26px}
.tilt-l{transform:rotate(-1.3deg)}
.tilt-r{transform:rotate(1.1deg)}

blockquote{border-left:3px solid var(--violet);margin:24px 0;padding:4px 0 4px 18px;font-style:normal}
blockquote p{font-size:19px;font-family:var(--font-serif);font-style:italic;color:var(--ink);margin:0}

.faq h3{font-weight:800;font-size:18px;margin:22px 0 6px}

/* ─── CTA: dunkle Karte statt Lilac-Zwilling der Boxen darüber ─── */
.cta{background:var(--ink);color:#fff;border-radius:22px;padding:32px 26px;text-align:center;margin:44px 0;position:relative;overflow:hidden}
.cta h3{font-family:var(--font-body);font-weight:800;letter-spacing:-.02em;font-size:24px;margin:0 0 8px;color:#fff}
.cta p{font-size:15px;color:rgba(255,255,255,.72);margin:0 0 20px}
.cta a{display:inline-block;background:var(--butter);color:var(--ink);font-weight:800;padding:14px 28px;border-radius:999px;text-decoration:none;transform:rotate(-1deg);box-shadow:0 14px 26px -10px rgba(0,0,0,.5)}

.more{display:grid;gap:10px;margin:10px 0 30px}
.more a{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.more a span{font-family:var(--font-mono);color:var(--violet-deep);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:3px}

footer{border-top:1px solid var(--line);margin-top:24px;padding:28px 0;color:var(--muted);font-size:13px}
footer a{color:var(--muted);text-decoration:none;margin-left:14px}

/* ─── Sprüche-Wand: unterschiedlich große, schräge Karten statt Liste ─── */
.wall{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 20px;padding:4px 2px;list-style:none}
.wall li{margin:0;font-size:16px;line-height:1.42;padding:16px 18px;border-radius:14px;box-shadow:3px 5px 0 rgba(29,27,46,.08)}
.wall li:nth-child(6n+1){background:var(--lilac);flex:1 1 250px;transform:rotate(-1.6deg)}
.wall li:nth-child(6n+2){background:var(--butter);flex:1 1 190px;transform:rotate(1.1deg)}
.wall li:nth-child(6n+3){background:var(--mint);flex:1 1 300px;transform:rotate(-0.6deg)}
.wall li:nth-child(6n+4){background:#fff;border:1px solid var(--line);flex:1 1 230px;transform:rotate(1.6deg)}
.wall li:nth-child(6n+5){background:var(--pink);flex:1 1 270px;transform:rotate(-1deg)}
.wall li:nth-child(6n+0){background:var(--lilac-2);flex:1 1 210px;transform:rotate(0.8deg)}

/* ─── Blog-Index ─── */
.hero{position:relative}
h1.hero-title{position:relative;z-index:1}
.intro{position:relative;z-index:1;color:var(--muted);font-size:17px;margin:0 0 28px}
.featured{display:block;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;margin-bottom:18px;transition:transform .15s ease,box-shadow .15s ease}
.featured img{width:100%;height:230px;object-fit:cover;display:block}
.featured .inner{padding:20px 22px 22px}
.featured h2{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:8px 0;color:var(--ink)}
.featured p{font-size:15px;color:var(--muted);margin:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.post{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.post:nth-child(3n+2){transform:rotate(-0.6deg)}
.post:nth-child(3n+3){transform:rotate(0.6deg)}
.post img{width:100%;height:130px;object-fit:cover;display:block}
.post .inner{padding:16px 18px 18px}
.post h2{font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:8px 0;color:var(--ink)}
.post p{font-size:13.5px;color:var(--muted);margin:0}
.featured:hover,.post:hover{transform:translateY(-3px) rotate(0deg);box-shadow:0 12px 30px rgba(91,91,214,.16)}