/* Zuhause im Jetzt — Rechtstexte. Farben und Schriften wie auf der Homepage. */

:root{
  --leinen:#fbf7ed; --sand:#ede4d4; --stein:#d6cfc2; --holz:#c9a87c;
  --braun:#7b6552; --tinte:#2b3440; --kohle:#2a2622;
  --oliv:#6e7658; --kuerbis:#c77c3e; --rost:#9e5233; --terra:#b5714f; --kastanie:#6b3e2e; --salbei:#9aa88e;

  --paper:var(--leinen); --card:#fffdf6; --card-2:#f5f0e6;
  --ink:var(--kohle); --ink-2:#5c5349; --muted:#73695e; --rule:#e6dfd1;
  --accent:var(--oliv); --accent-2:var(--salbei); --accent-text:#697154;
  --tape:rgba(154,168,142,.52);
  --shadow:rgba(43,35,25,0.13);

  --serif:'Belleza', -apple-system, "Segoe UI", sans-serif;
  --sans:'Jost', -apple-system, "Segoe UI", sans-serif;
  --hand:'Gloria Hallelujah', cursive;
  --type:'Special Elite', 'Courier New', monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#20190f; --card:#2a2115; --card-2:#241c12;
    --ink:#efe6d6; --ink-2:#c9bda6; --muted:#9a8c73; --rule:#4a3d29;
    --accent:#a3ba8f; --accent-2:#c3cdaf; --accent-text:#a3ba8f; --tape:rgba(154,168,142,.34); --shadow:rgba(0,0,0,0.45);
  }
}
:root[data-theme="dark"]{
  --paper:#20190f; --card:#2a2115; --card-2:#241c12;
  --ink:#efe6d6; --ink-2:#c9bda6; --muted:#9a8c73; --rule:#4a3d29;
  --accent:#a3ba8f; --accent-2:#c3cdaf; --accent-text:#a3ba8f; --tape:rgba(154,168,142,.34); --shadow:rgba(0,0,0,0.45);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:300;
  font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

/* Kopf */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  max-width:940px; margin:0 auto; padding:26px 22px 22px;
  border-bottom:1px solid var(--rule);
}
.wordmark{ font-family:var(--serif); font-size:23px; line-height:1.15; color:var(--ink); text-decoration:none; }
.wordmark small{ display:block; font-family:var(--type); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-top:5px; }
.navlinks{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.navlinks a{ font-family:var(--type); font-size:11.2px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid transparent; }
.navlinks a:hover{ color:var(--accent-text); border-bottom-color:var(--accent); }
.navlinks a[aria-current="page"]{ color:var(--accent-text); border-bottom-color:var(--accent); }
.navlinks a.nav-cta{ border:1px solid var(--accent); color:var(--accent-text);
  padding:0.34rem 0.7rem; border-radius:2px; }
.navlinks a.nav-cta:hover{ background:var(--accent); color:var(--card); border-color:var(--accent); }

/* Inhalt */
main{ max-width:720px; margin:0 auto; padding:46px 22px 70px; }
.eyebrow{ font-family:var(--type); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-text); margin:0 0 12px; }
h1{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,6vw,46px);
  line-height:1.14; margin:0 0 10px; letter-spacing:.005em; }
.lede{ font-size:18px; color:var(--ink-2); margin:0 0 8px; }
h2{ font-family:var(--serif); font-weight:400; font-size:clamp(22px,3.6vw,27px);
  line-height:1.25; margin:44px 0 12px; padding-top:20px; border-top:1px solid var(--rule); }
h2:first-of-type{ border-top:none; padding-top:0; }
h3{ font-family:var(--sans); font-weight:400; font-size:17px; letter-spacing:.02em;
  margin:26px 0 6px; color:var(--ink); }
p{ margin:0 0 16px; }
ul{ margin:0 0 16px; padding-left:20px; }
li{ margin-bottom:8px; }
a{ color:var(--accent-text); text-underline-offset:3px; }
a:hover{ color:var(--ink); }
strong{ font-weight:500; }

.adresse{ font-style:normal; line-height:1.85; }

.kurz{
  background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:3px; padding:18px 20px; margin:0 0 34px;
  box-shadow:0 1px 2px var(--shadow);
}
.kurz p{ margin:0; color:var(--ink-2); }

.stand{ font-family:var(--type); font-size:11.5px; letter-spacing:.08em;
  color:var(--muted); margin-top:48px; padding-top:18px; border-top:1px solid var(--rule); }

/* Fuß */
.footer{
  max-width:940px; margin:0 auto; padding:26px 22px 46px;
  border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  font-size:13.5px; color:var(--muted);
}
.flinks{ display:flex; gap:20px; flex-wrap:wrap; }
.flinks a{ color:var(--muted); text-decoration:none; }
.flinks a:hover{ color:var(--accent-text); }

@media (max-width:560px){
  body{ font-size:16.5px; }
  main{ padding:34px 20px 56px; }
  .navlinks{ gap:16px; }
}

/* ---- Sammlungs- und Journalseiten ---- */

.seitenkopf{ max-width:940px; margin:0 auto; padding:40px 22px 0; }
.seitenkopf .zurueck{ font-family:var(--type); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); text-decoration:none; }
.seitenkopf .zurueck:hover{ color:var(--accent-text); }

.kopfbild{
  max-width:940px; margin:22px auto 0; padding:0 22px;
}
.kopfbild div{
  aspect-ratio:3/1; border-radius:2px; background-size:cover; background-position:center;
  box-shadow:0 12px 26px -18px var(--shadow);
}

.sammlung{ max-width:720px; margin:0 auto; padding:30px 22px 20px; }
.sammlung h1{ margin-bottom:12px; }
.sammlung .themen{ font-family:var(--type); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-text); margin:0 0 14px; }

.leerstand{
  max-width:720px; margin:14px auto 0; padding:0 22px 10px;
}
.leerstand div{
  background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--accent-2);
  border-radius:3px; padding:22px 24px;
}
.leerstand p{ margin:0 0 10px; color:var(--ink-2); }
.leerstand p:last-child{ margin-bottom:0; }

.raster{
  max-width:960px; margin:0 auto; padding:10px 22px 64px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px 22px;
}
@media (max-width:900px){ .raster{ grid-template-columns:repeat(2,1fr); gap:24px 20px; } }
@media (max-width:560px){ .raster{ grid-template-columns:1fr; gap:26px; max-width:340px; } }

/* Karten als Polaroids: Bild oben, Text auf dem weißen Rand darunter */
.kachel{
  position:relative; display:block; text-decoration:none;
  background:var(--card); padding:0.6rem 0.6rem 0; border-radius:1px;
  box-shadow:0 3px 6px -2px rgba(43,35,25,.18), 0 18px 30px -14px rgba(43,35,25,.22);
  transition:transform .18s ease, box-shadow .18s ease;
}
.kachel:nth-child(3n+1){ transform:rotate(-1.5deg); }
.kachel:nth-child(3n+2){ transform:rotate(1deg); }
.kachel:nth-child(3n+3){ transform:rotate(-0.7deg); }
.kachel:hover{ transform:translateY(-4px) rotate(0deg); z-index:2;
  box-shadow:0 5px 10px -3px rgba(43,35,25,.22), 0 24px 38px -14px rgba(43,35,25,.28); }
.kachel::before{
  content:""; position:absolute; top:-0.5rem; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:3.2rem; height:1.05rem; z-index:2; background:var(--tape); opacity:.95;
  box-shadow:0 2px 4px var(--shadow);
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 3px, transparent 3px 7px);
}
.kachel .bild{
  display:block; aspect-ratio:4/3; border-radius:1px;
  background-size:cover; background-position:center;
}
.kachel .beschriftung{ padding:0.7rem 0.4rem 1rem; }
.kachel h2{
  font-family:var(--serif); font-weight:400; font-size:17px; line-height:1.3;
  margin:0 0 0.3rem; padding:0; border:none; color:var(--ink);
}
.kachel p{ margin:0; font-size:13px; color:var(--muted); line-height:1.45; }
.kachel .datum{ font-family:var(--type); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--anlass-text); display:block; margin-bottom:0.3rem; }
.kachel:hover h2{ color:var(--accent-text); }

.hinweis{ max-width:720px; margin:0 auto; padding:0 22px 50px;
  font-size:14px; color:var(--muted); }

/* ---- Über mich ---- */
.hand{ font-family:var(--hand); color:var(--accent-text); font-weight:400; }
.portraet{
  float:right; width:190px; margin:6px 0 20px 26px;
  background:var(--card); padding:10px 10px 0; border-radius:1px;
  box-shadow:0 3px 6px -2px var(--shadow), 0 22px 40px -18px var(--shadow);
  transform:rotate(2deg);
}
.portraet .feld{
  aspect-ratio:1/1; border-radius:1px;
  background-size:cover; background-position:center 42%;
}
.portraet .feld span{ font-family:var(--type); font-size:9px; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(60,45,25,.55); }
.portraet .bu{ font-family:var(--hand); font-size:17px; text-align:center;
  padding:7px 0 10px; color:var(--ink); }
@media (max-width:560px){ .portraet{ float:none; margin:0 auto 24px; } }

.buecher{ display:grid; gap:14px; margin:0 0 18px; }
.buch{ background:var(--card); border:1px solid var(--rule); border-radius:3px; padding:16px 18px; }
.buch h3{ margin:0 0 4px; font-family:var(--serif); font-size:18px; }
.buch p{ margin:0; font-size:14.5px; color:var(--ink-2); }
.buch .meta{ font-family:var(--type); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-top:7px; }

.buch{ display:grid; grid-template-columns:96px 1fr; gap:16px; align-items:start; }
.buch .cover{
  aspect-ratio:9/10; border-radius:2px;
  background-size:cover; background-position:center top;
  box-shadow:0 6px 14px -8px var(--shadow);
}
.buch .cover span{ font-family:var(--type); font-size:8px; letter-spacing:.05em;
  text-transform:uppercase; color:rgba(60,45,25,.55); line-height:1.3; }
.buch .meta a{ color:var(--accent-text); }
@media (max-width:460px){ .buch{ grid-template-columns:76px 1fr; gap:13px; } }

/* ---- Artikel: Journal-/Collage-Optik ---- */
.artikel{ max-width:720px; margin:0 auto; padding:26px 22px 10px; }
.artikel .meta{ font-family:var(--type); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px; }
.artikel .meta .anlass{ color:var(--anlass-text); }
.artikel h1{ margin-bottom:14px; }
.artikel h2{ border-top:none; padding-top:0; margin:40px 0 10px; }

/* Nummern als Aufkleber */
.artikel h3{ margin:34px 0 8px; font-family:var(--serif); font-size:20px; font-weight:400;
  display:flex; align-items:center; gap:12px; }
.artikel h3 .nr{
  flex:none; width:2.15rem; height:2.15rem; border-radius:99px;
  background:var(--anlass); color:#fffdf6;
  font-family:var(--type); font-size:12px; letter-spacing:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 5px var(--shadow); transform:rotate(-6deg);
}

/* Notizzettel mit Klebeband */
.kurzbox{
  position:relative; background:var(--card); border:1px solid var(--rule);
  border-radius:2px; padding:26px 24px 22px; margin:34px 0 36px;
  box-shadow:0 3px 6px -2px var(--shadow), 0 18px 32px -18px var(--shadow);
}
.kurzbox::before{
  content:""; position:absolute; top:-0.55rem; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:5.4rem; height:1.3rem; background:var(--tape); opacity:.95;
  box-shadow:0 2px 5px var(--shadow);
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 9px);
}
.kurzbox p.titel{ font-family:var(--type); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--anlass-text); margin:0 0 11px; }
.kurzbox ul{ margin:0; padding-left:19px; }
.kurzbox li{ margin-bottom:7px; color:var(--ink-2); }
.kurzbox li:last-child{ margin-bottom:0; }

/* Bilder als Polaroids mit Washi-Tape */
figure{
  position:relative; margin:40px auto; max-width:600px;
  background:var(--card); padding:0.7rem 0.7rem 0; border-radius:1px;
  box-shadow:0 3px 6px -2px rgba(43,35,25,.2), 0 24px 42px -18px rgba(43,35,25,.26);
}
figure:nth-of-type(odd){ transform:rotate(-1.4deg); }
figure:nth-of-type(even){ transform:rotate(1.2deg); }
figure .tape{
  position:absolute; top:-0.6rem; width:4.6rem; height:1.35rem; z-index:2;
  background:var(--tape); opacity:.95; box-shadow:0 2px 5px var(--shadow);
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 9px);
}
figure:nth-of-type(odd) .tape{ left:1.4rem; transform:rotate(-7deg); }
figure:nth-of-type(even) .tape{ right:1.4rem; transform:rotate(6deg); }
figure img{ width:100%; height:auto; display:block; border-radius:1px; }
figcaption{ font-family:var(--hand); font-size:17px; text-align:center;
  padding:0.65rem 0 0.9rem; color:var(--ink); letter-spacing:0; text-transform:none; }

.zitat{ margin:38px 0; padding:0; border:none; text-align:center; }
.zitat p{ font-family:var(--hand); color:var(--anlass-text);
  font-size:clamp(20px,3.4vw,25px); line-height:1.5; margin:0 0 7px; }
.zitat cite{ font-family:var(--type); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); font-style:normal; }

.faq{ margin-top:44px; }
.faq h2{ margin-bottom:6px; }
.faq .frage{ font-family:var(--sans); font-weight:500; font-size:17px;
  margin:22px 0 5px; color:var(--ink); }

/* Gruss als angepinntes Polaroid */
.gruss{
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
  margin:50px 0 10px; padding-top:30px; border-top:1px solid var(--rule);
}
.gruss .pola{
  position:relative; width:150px; flex:none; background:var(--card); padding:9px 9px 0;
  box-shadow:0 3px 6px -2px var(--shadow), 0 20px 36px -18px var(--shadow);
  transform:rotate(-2.5deg); border-radius:1px;
}
.gruss .pola .pin{
  position:absolute; top:-0.5rem; left:50%; transform:translateX(-50%);
  width:0.85rem; height:0.85rem; border-radius:99px; z-index:2;
  background:radial-gradient(circle at 32% 30%, #f2d9a8, var(--anlass) 70%);
  box-shadow:0 2px 4px var(--shadow);
}
.gruss .pola .feld{ aspect-ratio:1/1; border-radius:1px;
  background-size:cover; background-position:center 42%; }
.gruss .pola .feld span{ font-family:var(--type); font-size:8.5px; letter-spacing:.05em;
  text-transform:uppercase; color:rgba(60,45,25,.55); }
.gruss .pola .bu{ font-family:var(--hand); font-size:15px; text-align:center;
  padding:6px 0 9px; color:var(--ink); }
.gruss .text{ flex:1; min-width:210px; }
.gruss .text p{ margin:0 0 8px; }
.gruss .sig{ font-family:var(--hand); font-size:27px; color:var(--anlass-text); }

.weiterlesen{
  position:relative; margin:44px 0 0; padding:24px 22px 20px;
  background:var(--card-2); border:1px dashed var(--rule); border-radius:3px;
}
.weiterlesen p.titel{ font-family:var(--type); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:0 0 10px; }
.weiterlesen ul{ margin:0; padding-left:19px; }
.weiterlesen li{ margin-bottom:6px; }

@media (max-width:560px){
  figure:nth-of-type(odd), figure:nth-of-type(even){ transform:none; }
  .artikel h3{ gap:10px; }
}

/* ---- Anlassfarben — von Olga bestätigt 17.08.2026 ----
   Führende Quelle: Brain / „Zuhause im Jetzt – Branding".
   --anlass      = Signalfarbe: Flächen, Punkte, Klebeband, Aufkleber
   --anlass-text = Textfarbe:   Schrift auf hellem Grund (WCAG-tauglich)
   Die kräftigen Gelb-/Orangetöne sind als Schrift auf #FBF7ED unlesbar. */
.anlass-herbst      { --anlass:#C77C3E; --anlass-text:#9E5233; }
.anlass-halloween   { --anlass:#E37B1E; --anlass-text:#9B2622; }
.anlass-weihnachten { --anlass:#C0332C; --anlass-text:#C0332C; }
.anlass-winter      { --anlass:#5A6B73; --anlass-text:#5A6B73; }
.anlass-valentin    { --anlass:#CB2A3E; --anlass-text:#CB2A3E; }
.anlass-ostern      { --anlass:#E5C8C0; --anlass-text:#2A2622; }
.anlass-fruehling   { --anlass:#8A9A6B; --anlass-text:#677350; }
.anlass-muttertag   { --anlass:#D9A6A0; --anlass-text:#2A2622; }
.anlass-vatertag    { --anlass:#2B3440; --anlass-text:#2B3440; }
.anlass-sommer      { --anlass:#EEC04C; --anlass-text:#84641A; }
.anlass-journaling  { --anlass:#DFA63A; --anlass-text:#8D6520; }
.anlass-evergreen   { --anlass:#6E7658; --anlass-text:#697154; }

/* Im Dunkelmodus trägt die Signalfarbe auch als Schrift */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) [class*="anlass-"]{ --anlass-text:var(--anlass); }
}
:root[data-theme="dark"] [class*="anlass-"]{ --anlass-text:var(--anlass); }

/* Rückfall, wenn keine Anlassklasse gesetzt ist */
body{ --anlass:var(--accent); --anlass-text:var(--accent-text); }  /* Oliv, Markenfarbe */

/* ---- Artikelkopf mit Polaroid ---- */
.artikelkopf{
  max-width:720px; margin:0 auto; padding:22px 22px 0;
  display:grid; grid-template-columns:132px 1fr; gap:24px; align-items:start;
}
.kopfpola{
  position:relative; background:var(--card); padding:8px 8px 0; border-radius:1px;
  transform:rotate(-3deg); margin-top:26px;
  box-shadow:0 3px 6px -2px rgba(43,35,25,.2), 0 18px 32px -16px rgba(43,35,25,.26);
}
.kopfpola .tape{
  position:absolute; top:-0.5rem; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:3.6rem; height:1.1rem; z-index:2; background:var(--tape); opacity:.95;
  box-shadow:0 2px 4px var(--shadow);
  background-image:repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 3px, transparent 3px 7px);
}
.kopfpola .feld{ aspect-ratio:1/1; background-size:cover; background-position:center; border-radius:1px; }
.kopfpola .bu{ font-family:var(--hand); font-size:14px; text-align:center;
  padding:5px 0 8px; color:var(--ink); }
.artikelkopf .meta{ font-family:var(--type); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.artikelkopf .meta .anlass{ color:var(--anlass-text); }
.artikelkopf h1{ margin:0 0 12px; }
.artikelkopf .lede{ margin:0; }

/* ---- Post-it ---- */
.artikel{ position:relative; }
.postit{
  position:absolute; top:96px; right:-208px; z-index:3;
  width:176px; padding:16px 16px 18px;
  background:color-mix(in srgb, var(--anlass) 13%, #fffdf2);
  border:1px solid color-mix(in srgb, var(--anlass) 22%, transparent);
  transform:rotate(2.2deg); border-radius:1px;
  box-shadow:0 3px 7px -3px var(--shadow), 0 14px 24px -16px var(--shadow);
  font-family:var(--hand); font-size:15px; line-height:1.5; color:var(--ink);
}
.postit b{ display:block; font-family:var(--type); font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--anlass-text); margin-bottom:7px; font-weight:400; }

/* ---- Handschriftlicher Hinweis mit Pfeil ---- */
.notiz{
  display:flex; align-items:flex-end; gap:9px;
  font-family:var(--hand); font-size:16px; color:var(--anlass-text);
  margin:30px 0 -14px 6px;
}
.notiz svg{ flex:none; margin-bottom:2px; }

@media (max-width:1180px){
  .postit{ position:static; width:auto; max-width:300px;
    margin:24px auto 28px; transform:rotate(-1deg); }
}

@media (max-width:620px){
  .artikelkopf{ grid-template-columns:1fr; gap:0; padding-top:26px; }
  .kopfpola{ width:120px; margin:0 0 18px; }
  .postit{ position:static; width:auto; max-width:290px; margin:22px auto 26px; transform:rotate(-1deg); }
  .notiz{ margin-left:0; }
}


/* ==== Ergänzungen 25.09.2026 ==== */

/* Klebeband wie im Freebie: Salbei, durchsichtig, Fasern, ausgefranste Enden.
   Durchsichtig heißt: das Foto darunter scheint durch. Deshalb kein Schatten,
   der Schatten würde das Band wie Papier wirken lassen. */
.tape, figure .tape, .kopfpola .tape, .kachel::before, .kurzbox::before{
  background-color:var(--tape) !important;
  background-image:repeating-linear-gradient(0deg, rgba(255,253,246,.22) 0 2px, transparent 2px 6px) !important;
  box-shadow:none !important;
  clip-path:polygon(0 10%,3% 0,97% 4%,100% 0,98% 50%,100% 94%,97% 100%,3% 96%,0 100%,2% 50%);
  opacity:1 !important;
}

/* Sprunglink für Tastatur und Screenreader */
.skip{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--kohle); color:#fffdf6; padding:10px 16px; border-radius:2px;
  font-family:var(--sans); font-size:15px; text-decoration:none;
}
.skip:focus{ top:12px; color:#fffdf6; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* Footer mit Trägerhinweis */
.footer .fuss-text{ display:flex; flex-direction:column; gap:3px; }
.footer .traeger{ font-size:12.5px; }
.footer .flinks{ align-items:center; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* Hauptbereich der Blogseiten: nur Landmarke, keine eigene Gestaltung */
main.huelle{ max-width:none; margin:0; padding:0; }

/* Ziffern auf den Aufklebern: Farbe je Anlass nach Kontrast (WCAG AA) */
body.anlass-herbst .artikel h3 .nr{ color:#2A2622; }
body.anlass-halloween .artikel h3 .nr{ color:#2A2622; }
body.anlass-weihnachten .artikel h3 .nr{ color:#fffdf6; }
body.anlass-winter .artikel h3 .nr{ color:#fffdf6; }
body.anlass-valentin .artikel h3 .nr{ color:#fffdf6; }
body.anlass-ostern .artikel h3 .nr{ color:#2A2622; }
body.anlass-fruehling .artikel h3 .nr{ color:#2A2622; }
body.anlass-muttertag .artikel h3 .nr{ color:#2A2622; }
body.anlass-vatertag .artikel h3 .nr{ color:#fffdf6; }
body.anlass-sommer .artikel h3 .nr{ color:#2A2622; }
body.anlass-journaling .artikel h3 .nr{ color:#2A2622; }
body.anlass-evergreen .artikel h3 .nr{ color:#fffdf6; }

/* Dunkelmodus: Oliv ist als Schrift auf dunklem Grund zu schwach, dort das helle Salbei */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.anlass-evergreen,
  :root:not([data-theme="light"]) body:not([class*="anlass-"]){ --anlass-text:#a3ba8f; }
}
:root[data-theme="dark"] body.anlass-evergreen,
:root[data-theme="dark"] body:not([class*="anlass-"]){ --anlass-text:#a3ba8f; }

/* Der Post-it bleibt in beiden Modi hell, deshalb feste dunkle Schrift */
.postit{ color:#2A2622; }
.postit b{ color:color-mix(in srgb, var(--anlass) 40%, #2A2622); }

/* Über mich: zweites Polaroid links, gleiche Größe wie das Porträt */
.portraet.links{ float:left; margin:6px 26px 20px 0; transform:rotate(-2deg); }
@media (max-width:560px){ .portraet.links{ float:none; margin:0 auto 24px; } }


/* ==== Empfehlungen mit Werbelinks, 27.09.2026 ====
   Karten wie Notizzettel. Jede Karte trägt „Anzeige“, der Knopf führt zu Amazon.
   Die Streifenfarbe kommt aus der Anlassfarbe des Artikels. */
.werbehinweis{ font-size:14px; color:var(--muted); margin:14px 0 0; }
.werbehinweis a{ color:var(--muted); }
.empfehlungen{ margin:40px 0 44px; }
.empfehlungen > p.titel{ font-family:var(--type); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--anlass-text); margin:0 0 6px; }
.empfehlungen > p.hinweis{ font-size:14px; color:var(--muted); margin:0 0 18px; line-height:1.55; }
.empfehlungen .karten{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; }
.karte{ position:relative; background:var(--card); border-radius:3px; padding:22px 18px 18px;
  box-shadow:0 3px 6px -2px var(--shadow), 0 16px 30px -18px var(--shadow);
  display:flex; flex-direction:column; }
.karte::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:var(--anlass); border-radius:3px 3px 0 0; }
.karte .werbung{ position:absolute; top:10px; right:12px; font-family:var(--type);
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.karte .name{ font-family:var(--sans); font-weight:500; font-size:16.5px; line-height:1.4;
  color:var(--ink); margin:8px 0 8px; padding-right:48px; }
.karte .warum{ font-family:var(--hand); font-size:16px; line-height:1.45; color:var(--ink-2); margin:0 0 16px; flex:1; }
.karte .knopf{ align-self:flex-start; font-family:var(--type); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:#fffdf6; background:var(--oliv);
  padding:.55rem .95rem; border-radius:99px; }
.karte .knopf:hover{ background:#5a6147; }
.karte .knopf:focus-visible{ outline:2px solid var(--anlass); outline-offset:3px; }
a.produktlink{ color:var(--anlass-text); text-decoration-thickness:1px; text-underline-offset:3px; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .karte .knopf{ background:#a3ba8f; color:#20190f; }
}
:root[data-theme="dark"] .karte .knopf{ background:#a3ba8f; color:#20190f; }
/* Ganze Karte klickbar: der Knopf spannt seine Klickfläche über die Karte */
.karte .knopf::after{ content:""; position:absolute; inset:0; border-radius:3px; }
.karte:hover{ box-shadow:0 4px 8px -2px var(--shadow), 0 22px 38px -18px var(--shadow); transform:translateY(-2px); }
.karte{ transition:transform .15s ease, box-shadow .15s ease; }
.karte .knopf{ font-size:12px; padding:.62rem 1.05rem; }


/* ==== Blogartikel mit Tiefe, 27.09.2026 (Olga: „durchgehend eine Farbe, zu flach“) ====
   Papiergrund, Abschnitte als Karten in wechselnden Tönen mit Anlassbalken an der H2,
   Kasten „Das sagt Olga“, Empfehlungen mit Symbolbild im Text und am Ende.
   Weihnachten darf dunkler sein: Tannengrün-Flächen für Zitat und Empfehlungen. */
body[class*="anlass-"]{
  background-color:var(--paper);
  background-image:url('/bilder/papier-leinen.webp');
  background-size:600px 600px;
}
.artikel{ max-width:760px; }
.artikel .abschnitt{
  position:relative; margin:34px -26px; padding:30px 26px 26px;
  border-radius:4px; border:1px solid var(--rule);
  box-shadow:0 2px 5px -2px var(--shadow), 0 18px 34px -24px var(--shadow);
}
.artikel .abschnitt.ton1{ background:var(--card); }
.artikel .abschnitt.ton2{ background:color-mix(in srgb, var(--anlass) 7%, var(--card)); }
.artikel .abschnitt.ton3{ background:var(--card-2); }
.artikel .abschnitt > h2:first-child{
  margin-top:0; padding-left:16px; border-left:4px solid var(--anlass);
  line-height:1.25;
}
.artikel .abschnitt figure{ margin-left:0; margin-right:0; }

/* Das sagt Olga */
.olga-sagt{
  margin:40px -26px; padding:30px 34px 28px; border-radius:4px;
  background:color-mix(in srgb, var(--anlass) 14%, var(--card));
  border-left:5px solid var(--anlass);
  box-shadow:0 2px 5px -2px var(--shadow), 0 18px 34px -24px var(--shadow);
}
.olga-sagt .titel{ font-family:var(--type); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--anlass-text); margin:0 0 10px; }
.olga-sagt blockquote{ margin:0; padding:0; border:none; }
.olga-sagt blockquote p{ font-family:var(--hand); font-size:24px; line-height:1.5;
  color:var(--ink); margin:0 0 10px; }
.olga-sagt cite{ font-family:var(--hand); font-style:italic; font-size:18px;
  color:var(--anlass-text); display:block; transform:rotate(-2deg); transform-origin:left; }

/* Empfehlung mitten im Text: Polaroid mit Symbolbild */
.tipp{
  position:relative; display:grid; grid-template-columns:190px 1fr; gap:22px; align-items:center;
  margin:26px 0 30px; padding:18px 20px 18px 18px; border-radius:4px;
  background:var(--card); border:1px solid var(--rule);
  box-shadow:0 3px 6px -2px var(--shadow), 0 16px 30px -18px var(--shadow);
}
.tipp::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:var(--anlass); border-radius:4px 0 0 4px; }
.tipp .bild{ background:#fffdf6; padding:8px 8px 22px; transform:rotate(-2deg);
  box-shadow:0 3px 7px -2px rgba(43,35,25,.25); }
.tipp .bild img, .karte .bild img{ display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.tipp .bild.cover, .karte .bild.cover{ background:var(--sand); }
.tipp .bild.cover img, .karte .bild.cover img{ object-fit:contain; padding:10px; }
.tipp .text{ position:relative; }
.tipp .werbung{ font-family:var(--type); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }
.tipp .name{ font-family:var(--sans); font-weight:500; font-size:17px; line-height:1.4; color:var(--ink); margin:4px 0 6px; }
.tipp .warum{ font-family:var(--hand); font-size:16.5px; line-height:1.45; color:var(--ink-2); margin:0 0 14px; }
.tipp .knopf{ display:inline-block; font-family:var(--type); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:#fffdf6; background:var(--oliv);
  padding:.62rem 1.05rem; border-radius:99px; }
.tipp .knopf:hover{ background:#5a6147; }
.tipp .knopf::after{ content:""; position:absolute; inset:0; }
.tipp{ transition:transform .15s ease, box-shadow .15s ease; }
.tipp:hover{ transform:translateY(-2px); box-shadow:0 4px 8px -2px var(--shadow), 0 22px 38px -18px var(--shadow); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tipp .knopf{ background:#a3ba8f; color:#20190f; }
}
:root[data-theme="dark"] .tipp .knopf{ background:#a3ba8f; color:#20190f; }
@media (max-width:560px){
  .tipp{ grid-template-columns:1fr; }
  .tipp .bild{ max-width:220px; margin:0 auto 4px; }
  .artikel .abschnitt, .olga-sagt{ margin-left:-8px; margin-right:-8px; padding-left:18px; padding-right:18px; }
}

/* Kacheln am Ende mit Bild */
.karte{ padding-top:0; overflow:hidden; }
.karte .bild{ margin:0 -18px 14px; }
.karte .werbung{ top:14px; right:12px; background:rgba(255,253,246,.92); color:#5c5349;
  padding:2px 7px; border-radius:2px; z-index:2; }
.karte .name{ padding-right:0; margin-top:0; }
.karte::before{ z-index:2; }
.empfehlungen{ margin:44px -26px; padding:30px 26px 32px; border-radius:4px;
  background:color-mix(in srgb, var(--anlass) 9%, var(--card-2)); border:1px solid var(--rule); }
@media (max-width:560px){ .empfehlungen{ margin-left:-8px; margin-right:-8px; padding-left:16px; padding-right:16px; } }

/* Weihnachten darf dunkler sein: Tannengrün-Flächen, Kerzenlicht in Messing */
body.anlass-weihnachten .olga-sagt,
body.anlass-weihnachten .empfehlungen{
  background:#5B6B4A; border-color:#5B6B4A; color:#FBF7ED;
}
body.anlass-weihnachten .olga-sagt{ border-left-color:#C9A356; }
body.anlass-weihnachten .olga-sagt .titel,
body.anlass-weihnachten .empfehlungen > p.titel{ color:#E8D8A8; }
body.anlass-weihnachten .olga-sagt blockquote p{ color:#FBF7ED; }
body.anlass-weihnachten .olga-sagt cite{ color:#E8D8A8; }
body.anlass-weihnachten .empfehlungen > p.hinweis{ color:#E6DFD1; }
body.anlass-weihnachten .karte::before,
body.anlass-weihnachten .tipp::before{ background:#C0332C; }


/* ==== Runde 2, 27.09.2026: kleinere Bilder, Kopfband, Kleber am Zitat, FAQ zum Aufklappen ==== */
/* Bilder nehmen beim Lesen weniger Platz: auf breiten Schirmen halb breit und im Text umflossen */
.artikel figure{ max-width:520px; margin-left:auto; margin-right:auto; }
@media (min-width:760px){
  .artikel .abschnitt figure{ width:46%; margin:6px 0 16px 24px; float:right; padding:10px 10px 0; }
  .artikel .abschnitt figure:nth-of-type(even){ float:left; margin:6px 24px 16px 0; }
  .artikel .abschnitt figure figcaption{ font-size:15px; }
  .artikel .abschnitt::after{ content:""; display:block; clear:both; }
  .artikel .abschnitt h3, .artikel .abschnitt .tipp{ clear:none; }
  .artikel .abschnitt .tipp{ clear:both; }
  .artikel > figure{ max-width:440px; }
}
@media (max-width:759px){
  .artikel figure{ max-width:380px; }
}

/* Kopfband: der erste Bereich bekommt eine Fläche in der Anlassfarbe */
.kopfband{
  position:relative; margin:8px auto 0; max-width:900px; padding:34px 20px 38px; border-radius:6px;
  background:color-mix(in srgb, var(--anlass) 16%, var(--card-2));
  box-shadow:0 2px 5px -2px var(--shadow), 0 22px 40px -28px var(--shadow);
}
.kopfband .artikelkopf{ grid-template-columns:200px 1fr; gap:34px; padding-top:0; }
.kopfband .kopfpola{ margin-top:10px; }
@media (max-width:620px){
  .kopfband{ margin:8px 10px 0; padding:24px 6px 28px; }
  .kopfband .artikelkopf{ grid-template-columns:1fr; gap:0; }
  .kopfband .kopfpola{ width:150px; }
}
body.anlass-weihnachten .kopfband{ background:#5B6B4A; }
body.anlass-weihnachten .kopfband h1,
body.anlass-weihnachten .kopfband .lede{ color:#FBF7ED; }
body.anlass-weihnachten .kopfband .meta,
body.anlass-weihnachten .kopfband .meta .anlass,
body.anlass-weihnachten .kopfband .werbehinweis{ color:#E8D8A8; }
body.anlass-halloween .kopfband{ background:color-mix(in srgb, #E37B1E 20%, var(--card-2)); }

/* Zitat ohne Überschrift, dafür mit Kleber */
.olga-sagt{ position:relative; padding-top:38px; }
.olga-sagt .tape{ position:absolute; top:-0.6rem; left:50%; width:6rem; height:1.35rem;
  transform:translateX(-50%) rotate(-3deg); }
body.anlass-weihnachten .olga-sagt .tape{ background-color:rgba(201,163,86,.75) !important; }

/* Häufige Fragen zum Auf- und Zuklappen */
.faq details{ background:var(--card); border:1px solid var(--rule); border-radius:4px;
  margin:0 0 10px; box-shadow:0 2px 4px -2px var(--shadow); }
.faq summary{ cursor:pointer; list-style:none; position:relative;
  padding:15px 48px 15px 18px; font-family:var(--sans); font-weight:500; font-size:17px; line-height:1.4; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:300; color:var(--anlass-text); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:0; padding:0 18px 16px; }
.faq summary:focus-visible{ outline:2px solid var(--anlass); outline-offset:2px; }

/* Olgas Bücher in jedem Herbstartikel */
.buecherbox{ margin:40px -26px; padding:28px 26px 10px; border-radius:4px;
  background:color-mix(in srgb, #C77C3E 14%, var(--card-2)); }
.buecherbox > .titel{ font-family:var(--type); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#9E5233; margin:0 0 4px; }
.buecherbox .tipp::before{ background:#C77C3E; }
@media (max-width:560px){ .buecherbox{ margin-left:-8px; margin-right:-8px; padding-left:16px; padding-right:16px; } }


/* Kopfband als Pinselstrich statt hartem Kasten (Olga 27.09.2026), Weihnachten dunkler */
.kopfband{
  box-shadow:none; border-radius:0;
  -webkit-mask-image:url('/bilder/pinselstrich.png'); mask-image:url('/bilder/pinselstrich.png');
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  padding:46px 40px 50px;
}
.kopfband .artikelkopf{ grid-template-columns:250px 1fr; }
.kopfband .kopfpola{ transform:rotate(-3deg) scale(1); }
body.anlass-weihnachten .kopfband{ background:#5B6B4A; }
@media (max-width:620px){
  .kopfband{ padding:34px 18px 38px; }
  .kopfband .artikelkopf{ grid-template-columns:1fr; }
  .kopfband .kopfpola{ width:190px; }
}

/* Zweiter Post-it mit Pinnnadel weiter unten */
.artikel .abschnitt{ position:relative; }
.postit.zwei{ top:70px; right:-222px; transform:rotate(-2.4deg); }
.pinnadel{ position:absolute; top:-9px; left:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #FBF7ED 0 16%, var(--anlass) 45%, color-mix(in srgb, var(--anlass) 60%, #2A2622) 100%);
  box-shadow:1px 3px 4px rgba(43,35,25,.35); }
@media (max-width:1180px){ .postit.zwei{ position:static; margin:6px auto 22px; transform:rotate(1.2deg); } }

/* Kopfband mit echtem Pinselstrich (bilder/pinselstrich.png als Maske) */
.kopfband{ max-width:1000px; padding:64px 90px 66px; }
@media (max-width:620px){ .kopfband{ padding:44px 30px 48px; margin-left:0; margin-right:0; } }

/* Pinselstrich nur als Ebene hinter dem Inhalt, damit Text nie angeschnitten wird */
.kopfband{ --kopf:color-mix(in srgb, var(--anlass) 16%, var(--card-2));
  background:transparent !important; -webkit-mask-image:none; mask-image:none; isolation:isolate; }
.kopfband::before{ content:""; position:absolute; inset:-6px -50px -10px -50px; z-index:-1; background:var(--kopf);
  -webkit-mask-image:url('/bilder/pinselstrich.png'); mask-image:url('/bilder/pinselstrich.png');
  -webkit-mask-size:100% 100%; mask-size:100% 100%; }
body.anlass-weihnachten .kopfband{ --kopf:#5B6B4A; }
body.anlass-halloween .kopfband{ --kopf:color-mix(in srgb, #E37B1E 22%, var(--card-2)); }
.kopfband{ padding:60px 40px 62px; }
@media (max-width:620px){ .kopfband{ padding:44px 16px 48px; } .kopfband::before{ inset:-4px -14px -6px -14px; } }
.kopfband::before{ inset:-24px -170px -30px -170px; }
main.huelle{ overflow-x:clip; }
@media (max-width:620px){ .kopfband::before{ inset:-14px -110px -18px -110px; } }
.kopfband::before{ inset:-50px -170px -75px -170px; }
.kopfband{ margin-top:40px; margin-bottom:60px; }
@media (max-width:620px){ .kopfband::before{ inset:-30px -110px -45px -110px; } }


/* Olga 27.09.2026: kein Pinselstrich. Ruhige Fläche mit sanft gewellter Kante, Papierstruktur darauf */
.kopfband::before, .buehne::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201000%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C18%20L0%2C18.0%20L20%2C19.7%20L40%2C21.3%20L60%2C22.8%20L80%2C24.2%20L100%2C25.3%20L120%2C26.1%20L140%2C26.7%20L160%2C27.0%20L180%2C26.9%20L200%2C26.6%20L220%2C25.9%20L240%2C24.9%20L260%2C23.7%20L280%2C22.3%20L300%2C20.8%20L320%2C19.1%20L340%2C17.4%20L360%2C15.8%20L380%2C14.2%20L400%2C12.7%20L420%2C11.4%20L440%2C10.4%20L460%2C9.6%20L480%2C9.2%20L500%2C9.0%20L520%2C9.2%20L540%2C9.6%20L560%2C10.4%20L580%2C11.4%20L600%2C12.7%20L620%2C14.2%20L640%2C15.8%20L660%2C17.4%20L680%2C19.1%20L700%2C20.8%20L720%2C22.3%20L740%2C23.7%20L760%2C24.9%20L780%2C25.9%20L800%2C26.6%20L820%2C26.9%20L840%2C27.0%20L860%2C26.7%20L880%2C26.1%20L900%2C25.3%20L920%2C24.2%20L940%2C22.8%20L960%2C21.3%20L980%2C19.7%20L1000%2C18.0%20L1000%2C387.0%20L980%2C388.0%20L960%2C389.0%20L940%2C389.7%20L920%2C390.3%20L900%2C390.8%20L880%2C391.0%20L860%2C391.0%20L840%2C390.8%20L820%2C390.4%20L800%2C389.8%20L780%2C389.0%20L760%2C388.1%20L740%2C387.1%20L720%2C385.9%20L700%2C384.6%20L680%2C383.3%20L660%2C381.9%20L640%2C380.6%20L620%2C379.3%20L600%2C378.0%20L580%2C376.8%20L560%2C375.8%20L540%2C374.9%20L520%2C374.1%20L500%2C373.6%20L480%2C373.2%20L460%2C373.0%20L440%2C373.0%20L420%2C373.3%20L400%2C373.7%20L380%2C374.3%20L360%2C375.1%20L340%2C376.1%20L320%2C377.1%20L300%2C378.3%20L280%2C379.6%20L260%2C380.9%20L240%2C382.3%20L220%2C383.6%20L200%2C384.9%20L180%2C386.2%20L160%2C387.3%20L140%2C388.4%20L120%2C389.3%20L100%2C390.0%20L80%2C390.5%20L60%2C390.9%20L40%2C391.0%20L20%2C390.9%20L0%2C390.7%20Z%22%20fill%3D%22white%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201000%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2C18%20L0%2C18.0%20L20%2C19.7%20L40%2C21.3%20L60%2C22.8%20L80%2C24.2%20L100%2C25.3%20L120%2C26.1%20L140%2C26.7%20L160%2C27.0%20L180%2C26.9%20L200%2C26.6%20L220%2C25.9%20L240%2C24.9%20L260%2C23.7%20L280%2C22.3%20L300%2C20.8%20L320%2C19.1%20L340%2C17.4%20L360%2C15.8%20L380%2C14.2%20L400%2C12.7%20L420%2C11.4%20L440%2C10.4%20L460%2C9.6%20L480%2C9.2%20L500%2C9.0%20L520%2C9.2%20L540%2C9.6%20L560%2C10.4%20L580%2C11.4%20L600%2C12.7%20L620%2C14.2%20L640%2C15.8%20L660%2C17.4%20L680%2C19.1%20L700%2C20.8%20L720%2C22.3%20L740%2C23.7%20L760%2C24.9%20L780%2C25.9%20L800%2C26.6%20L820%2C26.9%20L840%2C27.0%20L860%2C26.7%20L880%2C26.1%20L900%2C25.3%20L920%2C24.2%20L940%2C22.8%20L960%2C21.3%20L980%2C19.7%20L1000%2C18.0%20L1000%2C387.0%20L980%2C388.0%20L960%2C389.0%20L940%2C389.7%20L920%2C390.3%20L900%2C390.8%20L880%2C391.0%20L860%2C391.0%20L840%2C390.8%20L820%2C390.4%20L800%2C389.8%20L780%2C389.0%20L760%2C388.1%20L740%2C387.1%20L720%2C385.9%20L700%2C384.6%20L680%2C383.3%20L660%2C381.9%20L640%2C380.6%20L620%2C379.3%20L600%2C378.0%20L580%2C376.8%20L560%2C375.8%20L540%2C374.9%20L520%2C374.1%20L500%2C373.6%20L480%2C373.2%20L460%2C373.0%20L440%2C373.0%20L420%2C373.3%20L400%2C373.7%20L380%2C374.3%20L360%2C375.1%20L340%2C376.1%20L320%2C377.1%20L300%2C378.3%20L280%2C379.6%20L260%2C380.9%20L240%2C382.3%20L220%2C383.6%20L200%2C384.9%20L180%2C386.2%20L160%2C387.3%20L140%2C388.4%20L120%2C389.3%20L100%2C390.0%20L80%2C390.5%20L60%2C390.9%20L40%2C391.0%20L20%2C390.9%20L0%2C390.7%20Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  background-image:url('/bilder/papier-leinen.webp'); background-size:600px 600px; background-blend-mode:multiply;
  background-color:var(--kopf);
}
.kopfband::before{ inset:-26px -30px -30px -30px; border-radius:0; }
@media (max-width:620px){ .kopfband::before{ inset:-18px -16px -22px -16px; } }
.kopfband{ margin-top:30px; margin-bottom:50px; padding:52px 40px 54px; }
@media (max-width:620px){ .kopfband{ padding:40px 14px 44px; } }

/* Olga 28.09.2026: Polaroid im Kopfband größer und senkrecht mittig zur Schrift (gilt für alle Artikel) */
.kopfband .artikelkopf{ max-width:960px; grid-template-columns:300px 1fr; gap:44px; align-items:center; }
.kopfband .kopfpola{ margin-top:0; padding:10px 10px 0; }
.kopfband .kopfpola .bu{ font-size:16px; padding:7px 0 10px; }
@media (max-width:900px){ .kopfband .artikelkopf{ grid-template-columns:230px 1fr; gap:30px; } }
@media (max-width:620px){
  .kopfband .artikelkopf{ grid-template-columns:1fr; gap:0; }
  .kopfband .kopfpola{ width:230px; margin:0 auto 24px; }
}

/* Olga 28.09.2026: Halloween-Kopfband schwarz, Schrift weiß */
body.anlass-halloween .kopfband{ --kopf:#1E1C1A; }
body.anlass-halloween .kopfband::before{ background-blend-mode:multiply; }
body.anlass-halloween .kopfband h1,
body.anlass-halloween .kopfband .lede{ color:#FBF7ED; }
body.anlass-halloween .kopfband .meta,
body.anlass-halloween .kopfband .werbehinweis{ color:#D9CFBF; }
body.anlass-halloween .kopfband .meta .anlass{ color:#F0A35E; }

/* Olga 28.09.2026: Bilder im Text stehen mittig, nicht links oder rechts am Rand (alle Artikel) */
@media (min-width:760px){
  .artikel .abschnitt figure,
  .artikel .abschnitt figure:nth-of-type(even){ float:none; width:62%; max-width:460px; margin:18px auto 22px; }
}

/* Olga 28.09.2026: Themenbild mit weißem Rand wie ein Foto */
.kopfbild div{ border:14px solid #FFFDF8; border-radius:2px; box-shadow:0 3px 8px -2px rgba(43,35,25,.2), 0 20px 36px -18px rgba(43,35,25,.3); }
@media (max-width:620px){ .kopfbild div{ border-width:8px; } }


/* Olga 28.09.2026: derselbe feine Schatten unter dem gewellten Kopfband der Blogartikel */
.kopfband::after{ content:""; position:absolute; z-index:-2; pointer-events:none;
  inset:-26px -30px -30px -30px; transform:translate(0, 10px) scale(1.09, 1.22);
  background:rgba(70,50,30,.14);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-40%20-40%201080%20480%22%20preserveAspectRatio%3D%22none%22%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-10%25%22%20y%3D%22-20%25%22%20width%3D%22120%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2214%22/%3E%3C/filter%3E%3Cpath%20d%3D%22M0%2C18%20L0%2C18.0%20L20%2C19.7%20L40%2C21.3%20L60%2C22.8%20L80%2C24.2%20L100%2C25.3%20L120%2C26.1%20L140%2C26.7%20L160%2C27.0%20L180%2C26.9%20L200%2C26.6%20L220%2C25.9%20L240%2C24.9%20L260%2C23.7%20L280%2C22.3%20L300%2C20.8%20L320%2C19.1%20L340%2C17.4%20L360%2C15.8%20L380%2C14.2%20L400%2C12.7%20L420%2C11.4%20L440%2C10.4%20L460%2C9.6%20L480%2C9.2%20L500%2C9.0%20L520%2C9.2%20L540%2C9.6%20L560%2C10.4%20L580%2C11.4%20L600%2C12.7%20L620%2C14.2%20L640%2C15.8%20L660%2C17.4%20L680%2C19.1%20L700%2C20.8%20L720%2C22.3%20L740%2C23.7%20L760%2C24.9%20L780%2C25.9%20L800%2C26.6%20L820%2C26.9%20L840%2C27.0%20L860%2C26.7%20L880%2C26.1%20L900%2C25.3%20L920%2C24.2%20L940%2C22.8%20L960%2C21.3%20L980%2C19.7%20L1000%2C18.0%20L1000%2C387.0%20L980%2C388.0%20L960%2C389.0%20L940%2C389.7%20L920%2C390.3%20L900%2C390.8%20L880%2C391.0%20L860%2C391.0%20L840%2C390.8%20L820%2C390.4%20L800%2C389.8%20L780%2C389.0%20L760%2C388.1%20L740%2C387.1%20L720%2C385.9%20L700%2C384.6%20L680%2C383.3%20L660%2C381.9%20L640%2C380.6%20L620%2C379.3%20L600%2C378.0%20L580%2C376.8%20L560%2C375.8%20L540%2C374.9%20L520%2C374.1%20L500%2C373.6%20L480%2C373.2%20L460%2C373.0%20L440%2C373.0%20L420%2C373.3%20L400%2C373.7%20L380%2C374.3%20L360%2C375.1%20L340%2C376.1%20L320%2C377.1%20L300%2C378.3%20L280%2C379.6%20L260%2C380.9%20L240%2C382.3%20L220%2C383.6%20L200%2C384.9%20L180%2C386.2%20L160%2C387.3%20L140%2C388.4%20L120%2C389.3%20L100%2C390.0%20L80%2C390.5%20L60%2C390.9%20L40%2C391.0%20L20%2C390.9%20L0%2C390.7%20Z%22%20fill%3D%22white%22%20filter%3D%22url%28%23b%29%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-40%20-40%201080%20480%22%20preserveAspectRatio%3D%22none%22%3E%3Cfilter%20id%3D%22b%22%20x%3D%22-10%25%22%20y%3D%22-20%25%22%20width%3D%22120%25%22%20height%3D%22140%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2214%22/%3E%3C/filter%3E%3Cpath%20d%3D%22M0%2C18%20L0%2C18.0%20L20%2C19.7%20L40%2C21.3%20L60%2C22.8%20L80%2C24.2%20L100%2C25.3%20L120%2C26.1%20L140%2C26.7%20L160%2C27.0%20L180%2C26.9%20L200%2C26.6%20L220%2C25.9%20L240%2C24.9%20L260%2C23.7%20L280%2C22.3%20L300%2C20.8%20L320%2C19.1%20L340%2C17.4%20L360%2C15.8%20L380%2C14.2%20L400%2C12.7%20L420%2C11.4%20L440%2C10.4%20L460%2C9.6%20L480%2C9.2%20L500%2C9.0%20L520%2C9.2%20L540%2C9.6%20L560%2C10.4%20L580%2C11.4%20L600%2C12.7%20L620%2C14.2%20L640%2C15.8%20L660%2C17.4%20L680%2C19.1%20L700%2C20.8%20L720%2C22.3%20L740%2C23.7%20L760%2C24.9%20L780%2C25.9%20L800%2C26.6%20L820%2C26.9%20L840%2C27.0%20L860%2C26.7%20L880%2C26.1%20L900%2C25.3%20L920%2C24.2%20L940%2C22.8%20L960%2C21.3%20L980%2C19.7%20L1000%2C18.0%20L1000%2C387.0%20L980%2C388.0%20L960%2C389.0%20L940%2C389.7%20L920%2C390.3%20L900%2C390.8%20L880%2C391.0%20L860%2C391.0%20L840%2C390.8%20L820%2C390.4%20L800%2C389.8%20L780%2C389.0%20L760%2C388.1%20L740%2C387.1%20L720%2C385.9%20L700%2C384.6%20L680%2C383.3%20L660%2C381.9%20L640%2C380.6%20L620%2C379.3%20L600%2C378.0%20L580%2C376.8%20L560%2C375.8%20L540%2C374.9%20L520%2C374.1%20L500%2C373.6%20L480%2C373.2%20L460%2C373.0%20L440%2C373.0%20L420%2C373.3%20L400%2C373.7%20L380%2C374.3%20L360%2C375.1%20L340%2C376.1%20L320%2C377.1%20L300%2C378.3%20L280%2C379.6%20L260%2C380.9%20L240%2C382.3%20L220%2C383.6%20L200%2C384.9%20L180%2C386.2%20L160%2C387.3%20L140%2C388.4%20L120%2C389.3%20L100%2C390.0%20L80%2C390.5%20L60%2C390.9%20L40%2C391.0%20L20%2C390.9%20L0%2C390.7%20Z%22%20fill%3D%22white%22%20filter%3D%22url%28%23b%29%22/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%; mask-size:100% 100%; }
@media (max-width:620px){ .kopfband::after{ inset:-18px -16px -22px -16px; transform:translate(0, 7px) scale(1.085, 1.21); } }


/* Weihnachtsartikel: dunkles Tannengrün als großer Hintergrund (Olga 06.10.2026). Nur body.anlass-weihnachten. */
body.anlass-weihnachten{ background:#14281E url(/muster/gold.svg); background-size:1400px 1400px; }
body.anlass-weihnachten .wordmark, body.anlass-weihnachten .wordmark small,
body.anlass-weihnachten .navlinks a, body.anlass-weihnachten .seitenkopf a,
body.anlass-weihnachten footer, body.anlass-weihnachten footer a, body.anlass-weihnachten footer p{ color:#F4EFE2; border-color:#C9A356; }
body.anlass-weihnachten .artikel > p, body.anlass-weihnachten .artikel > h2, body.anlass-weihnachten .artikel > h3,
body.anlass-weihnachten .artikel > ul li{ color:#F4EFE2; }
body.anlass-weihnachten .artikel{ position:relative; }
img.rand{ position:absolute; width:170px; height:auto; display:none; filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
@media(min-width:1280px){ img.rand{ display:block; } img.rand.l{ left:-215px; } img.rand.r{ right:-215px; } }
body.anlass-weihnachten .faq > h2, body.anlass-weihnachten .faq > p, body.anlass-weihnachten .gruss .text p{ color:#F4EFE2; }
body.anlass-weihnachten .gruss .sig{ color:#E8D8A8; }