/* 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:#8a8075; --rule:#e6dfd1;
  --accent:var(--oliv); --accent-2:var(--salbei); --accent-text:#697154;
  --tape:#e9dfc9dd;
  --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:#4a3d29aa; --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:#4a3d29aa; --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); border-bottom-color:var(--accent); }
.navlinks a[aria-current="page"]{ color:var(--accent); 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); }

@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); }

.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); }

.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); 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); }
@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; }
}