/* Zuhause im Jetzt — Startseite und Blog-Übersicht (25.09.2026).
   Baut auf legal.css auf (Farben, Schriften, Kopf, Fuß, Klebeband).
   Leitgedanke: große Bilder im Passepartout, die Text tragen,
   versetzter Bildlauf, Elemente aus dem Freebie (Klebeband, gedudelte Striche). */

.weit{ max-width:1120px; margin:0 auto; padding:0 22px; }

/* ---------- Passepartout: helle Auflage, feiner Schnitt, weicher Schatten ---------- */
.passepartout{
  position:relative; margin:0; background:var(--card);
  padding:clamp(10px,1.6vw,18px);
  box-shadow:
    0 1px 2px rgba(43,35,25,.10),
    0 14px 28px -12px rgba(43,35,25,.22),
    0 38px 60px -34px rgba(43,35,25,.30);
  border-radius:1px;
}
.passepartout img{
  display:block; width:100%; height:auto; border-radius:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
  /* angedeuteter Schnitt im Karton */
  outline:1px solid rgba(43,35,25,.10); outline-offset:-1px;
}
.passepartout figcaption, .passepartout .bu{
  font-family:var(--hand); font-size:16px; text-align:center; color:var(--ink-2);
  padding:10px 0 2px; text-transform:none; letter-spacing:0;
}
.passepartout .tape{
  position:absolute; top:-0.7rem; width:5.6rem; height:1.5rem; z-index:2;
}
.passepartout .tape.links{ left:1.6rem; transform:rotate(-8deg); }
.passepartout .tape.rechts{ right:1.6rem; transform:rotate(7deg); }

/* ---------- Gedudelte Unterstreichung wie im Freebie ---------- */
.gedudelt{ position:relative; white-space:nowrap; }
.gedudelt svg{
  position:absolute; left:-2%; bottom:-0.16em; width:104%; height:0.42em;
  overflow:visible; pointer-events:none;
}
.gedudelt path{ fill:none; stroke:var(--salbei); stroke-width:2.2; stroke-linecap:round; }

/* ---------- Bühne: 5 zu 7, Oberkanten bündig ---------- */
.buehne{
  display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,5vw,64px);
  align-items:start; padding-top:clamp(34px,6vw,70px); padding-bottom:clamp(30px,5vw,56px);
}
.buehne h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(40px,6.2vw,66px);
  line-height:1.04; margin:6px 0 18px; letter-spacing:.003em;
}
.buehne h1 .zusatz{
  display:block; font-size:.42em; line-height:1.3; color:var(--ink-2); margin-top:16px;
  max-width:24ch;
}
.buehne .lede{ font-size:18px; color:var(--ink-2); max-width:38ch; margin:0 0 26px; }
.knoepfe{ display:flex; gap:12px; flex-wrap:wrap; }
.knopf{
  display:inline-block; font-family:var(--sans); font-weight:400; font-size:15.5px;
  padding:13px 22px; border-radius:2px; text-decoration:none; line-height:1.2;
}
.knopf.voll{ background:var(--oliv); color:#fffdf6; }
.knopf.voll:hover{ background:#5d6449; color:#fffdf6; }
.knopf.linie{ border:1.5px solid var(--oliv); color:var(--accent-text); }
.knopf.linie:hover{ background:color-mix(in srgb, var(--oliv) 9%, transparent); color:var(--ink); }
.buehne .passepartout{ transform:rotate(1.2deg); margin-top:10px; }
@media (max-width:820px){
  .buehne{ grid-template-columns:1fr; }
  .buehne .passepartout{ transform:rotate(.8deg); max-width:560px; }
}

/* ---------- Olga-Streifen ---------- */
.hallo{
  display:flex; align-items:center; gap:20px; max-width:780px;
  margin:10px auto clamp(40px,6vw,70px); padding:0 22px;
}
.hallo img{ width:72px; height:72px; border-radius:99px; flex:none; object-fit:cover;
  box-shadow:0 2px 8px -2px var(--shadow); }
.hallo p{ margin:0; color:var(--ink-2); font-size:16.5px; }
.hallo .sig{ font-family:var(--hand); font-size:24px; color:var(--accent-text); }

/* ---------- Bildband: großes Bild trägt den Satz ---------- */
.bildband{
  position:relative; min-height:clamp(360px,46vw,560px);
  display:flex; align-items:flex-end;
  background-image:
    linear-gradient(180deg, rgba(20,15,10,0) 30%, rgba(20,15,10,.45) 68%, rgba(20,15,10,.80) 100%),
    linear-gradient(100deg, rgba(20,15,10,.72) 0%, rgba(20,15,10,.35) 45%, rgba(20,15,10,0) 80%),
    url('/bilder/zweite-lampe-hero.webp');
  background-size:cover; background-position:center 55%;
}
.bildband .weit{ width:100%; padding-top:60px; padding-bottom:clamp(34px,5vw,62px); }
.bildband blockquote{ margin:0; }
.bildband blockquote p{
  font-family:var(--serif); font-size:clamp(28px,4.4vw,48px); line-height:1.14;
  color:#fffdf6; margin:0 0 14px; max-width:15em; text-wrap:balance;
  text-shadow:0 1px 18px rgba(20,15,10,.35);
}
.bildband blockquote footer{
  all:unset; display:block; font-family:var(--hand); font-size:19px; color:#efe6d6;
}
.bildband .ki{
  display:block; margin-top:22px; font-size:12px; color:#fffdf6; opacity:.72;
}

/* ---------- Abschnittsköpfe ---------- */
.kopf{ margin:clamp(56px,8vw,96px) 0 clamp(26px,4vw,40px); max-width:640px; }
.kopf h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,4vw,40px); line-height:1.15;
  margin:0 0 10px; padding:0; border:none;
}
.kopf p{ margin:0; color:var(--ink-2); }

/* ---------- Versetzter Bildlauf ---------- */
.lauf{ display:flex; flex-direction:column; gap:clamp(48px,7vw,90px); }
.lauf-eintrag{
  display:grid; grid-template-columns:7fr 5fr; gap:clamp(24px,4vw,56px); align-items:center;
  text-decoration:none; color:inherit;
}
.lauf-eintrag:nth-child(even){ grid-template-columns:5fr 7fr; }
.lauf-eintrag:nth-child(even) .passepartout{ order:2; }
.lauf-eintrag:nth-child(odd) .passepartout{ transform:rotate(-1deg); }
.lauf-eintrag:nth-child(even) .passepartout{ transform:rotate(1.1deg); }
/* der Versatz: jeder zweite Eintrag rückt ein Stück ein */
.lauf-eintrag:nth-child(2){ margin-left:clamp(0px,6vw,80px); }
.lauf-eintrag:nth-child(3){ margin-right:clamp(0px,6vw,80px); }
.lauf-eintrag .text .meta{
  font-family:var(--type); font-size:12px; letter-spacing:.06em; color:var(--accent-text); margin:0 0 10px;
}
.lauf-eintrag h3{
  font-family:var(--serif); font-weight:400; font-size:clamp(24px,3vw,32px); line-height:1.2;
  margin:0 0 12px; color:var(--ink); display:block;
}
.lauf-eintrag p{ color:var(--ink-2); margin:0 0 14px; }
.lauf-eintrag .weiter{ font-family:var(--hand); font-size:18px; color:var(--accent-text); }
.lauf-eintrag:hover h3{ color:var(--accent-text); }
.lauf-eintrag:hover .passepartout{ transform:rotate(0deg) translateY(-3px); }
.lauf-eintrag .passepartout{ transition:transform .2s ease; }
@media (max-width:760px){
  .lauf-eintrag, .lauf-eintrag:nth-child(even){ grid-template-columns:1fr; margin:0; }
  .lauf-eintrag:nth-child(even) .passepartout{ order:0; }
}

/* ---------- Sammlungen (Polaroids aus legal.css .raster/.kachel) ---------- */
.sammlungen .raster{ padding-left:0; padding-right:0; max-width:none; }
.sammlungen .kachel h3{
  font-family:var(--serif); font-weight:400; font-size:18px; line-height:1.3;
  margin:0 0 .3rem; color:var(--ink);
}
.sammlungen .kachel img{ display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }

/* ---------- Freebie ---------- */
.freebie{
  display:grid; grid-template-columns:7fr 4fr; gap:clamp(28px,5vw,60px); align-items:center;
  background:var(--card-2); padding:clamp(28px,5vw,56px); margin-top:clamp(56px,8vw,96px);
  border:1px solid var(--rule); border-radius:2px;
}
.freebie h2{
  font-family:var(--serif); font-weight:400; font-size:clamp(28px,4vw,40px); line-height:1.14;
  margin:0 0 8px; padding:0; border:none;
}
.freebie .unterzeile{ font-family:var(--hand); font-size:19px; color:var(--accent-text); margin:0 0 18px; }
.freebie ul{ margin:0 0 24px; padding-left:20px; color:var(--ink-2); }
.freebie li{ margin-bottom:6px; }
.freebie .klein{ font-size:14px; color:var(--muted); margin:16px 0 0; max-width:52ch; }
.freebie .passepartout{ transform:rotate(2.2deg); max-width:300px; justify-self:center; }
@media (max-width:760px){
  .freebie{ grid-template-columns:1fr; }
  .freebie .passepartout{ order:-1; max-width:220px; }
}

/* ---------- Häufige Fragen ---------- */
.fragen{ max-width:760px; }
.fragen details{ border-top:1px solid var(--rule); padding:4px 0; }
.fragen details:last-of-type{ border-bottom:1px solid var(--rule); }
.fragen summary{
  cursor:pointer; list-style:none; padding:16px 36px 16px 0; position:relative;
  font-family:var(--serif); font-size:clamp(19px,2.4vw,22px); color:var(--ink);
}
.fragen summary::-webkit-details-marker{ display:none; }
.fragen summary::after{
  content:"+"; position:absolute; right:4px; top:12px; font-family:var(--sans);
  font-size:26px; color:var(--accent-text); line-height:1;
}
.fragen details[open] summary::after{ content:"–"; }
.fragen details p{ margin:0 0 18px; color:var(--ink-2); }

.abstand-unten{ height:clamp(60px,8vw,100px); }

/* ---------- Blog-Übersicht ---------- */
.blogkopf{ padding-top:clamp(34px,6vw,64px); max-width:700px; }
.blogkopf h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(38px,6vw,58px); line-height:1.08; margin:0 0 16px;
}
.blogkopf .lede{ font-size:18px; color:var(--ink-2); }
.themenliste{ display:flex; flex-wrap:wrap; gap:10px 12px; margin:22px 0 0; padding:0; list-style:none; }
.themenliste a{
  display:inline-block; padding:8px 14px; border:1px solid var(--rule); background:var(--card);
  border-radius:2px; text-decoration:none; color:var(--ink-2); font-size:15px;
}
.themenliste a:hover{ border-color:var(--accent); color:var(--ink); }

/* legal.css setzt main schmal und figure als Polaroid, hier nicht gewollt */
main.start{ max-width:none; margin:0; padding:0; }
figure.passepartout{ max-width:none; margin:0; }
.fragen summary::after{ content:"+"; }
.fragen details[open] summary::after{ content:"\2212"; }

.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.blogliste{ margin-top:clamp(30px,5vw,54px); }

/* Themen auf der Blogseite als salbeigrüne Aufkleber */
.themenliste{ gap:14px 12px; }
.themenliste a{
  background:var(--salbei); color:#2A2622; border:none; border-radius:3px;
  padding:9px 15px; font-size:15.5px;
  box-shadow:0 2px 5px -1px rgba(43,35,25,.22);
  transition:transform .15s ease, background .15s ease;
}
.themenliste li:nth-child(odd) a{ transform:rotate(-1.6deg); }
.themenliste li:nth-child(even) a{ transform:rotate(1.3deg); }
.themenliste a:hover, .themenliste a:focus-visible{
  background:var(--oliv); color:#fffdf6; transform:rotate(0deg) translateY(-1px);
}

/* Olga-Foto: gelber Ring im Journaling-Gelb (Anlassfarbe Journaling, #DFA63A) */
.hallo img{ box-shadow:0 0 0 3px var(--paper), 0 0 0 6px #DFA63A, 0 4px 12px -2px var(--shadow); }

/* Freebie-Anmeldung (Double-Opt-in über Brevo) */
.doi{ margin:0; }
.doi-label{ display:block; font-size:15px; color:var(--ink); margin:0 0 8px; }
.doi-zeile{ display:flex; flex-wrap:wrap; gap:10px; }
.doi-feld{
  flex:1 1 15rem; font:inherit; font-size:16px; padding:12px 14px; min-height:48px;
  border:1.5px solid var(--stein); border-radius:2px; background:var(--card); color:var(--ink);
}
.doi-feld:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-color:var(--accent); }
.doi .knopf{ min-height:48px; border:none; cursor:pointer; font-family:var(--sans); }
.doi .knopf:disabled{ opacity:.7; cursor:wait; }
.doi-falle{ position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0; }

/* Seiten nach der Freebie-Anmeldung */
.danke{ max-width:640px; margin:0 auto; padding:clamp(48px,8vw,90px) 22px 70px; text-align:center; }
.danke h1{ font-family:var(--serif); font-weight:400; font-size:clamp(34px,6vw,48px); line-height:1.12; margin:0 0 22px; }
.danke h1 .hand{ display:block; font-size:.55em; margin-top:8px; color:var(--accent-text); }
.danke p{ color:var(--ink-2); margin:0 0 16px; }
.danke .knopf{ margin:10px 0 14px; }
.danke .klein{ font-size:14px; color:var(--muted); }
.danke .gruss-hand{ font-family:var(--hand); font-size:26px; color:var(--accent-text); margin-top:26px; }