/* „Mein kleiner Laden" — gemeinsames Stylesheet der vier Seiten (Umbau 19.08.2026,
   Petras Website-Struktur). Farbwelt-Entscheid 18.08.: Papier als Grund, LEUCHTENDE
   Akzente (nie abgetönt), Pflaume als Schrift. Bunt heißt Karten, Rahmen, Zahlen,
   Linien — nie Fläche, nie Fließtext-Farbe. Neon nur auf dunklem Grund. */

@font-face{
  font-family:'Playfair Display';
  font-style:italic;
  font-weight:500 700;
  font-display:swap;
  src:url('/fonts/playfair-italic-500.woff2') format('woff2');
}

:root{
  --papier:#fbf9f5;
  --karte:#ffffff;
  --pflaume:#44204c;
  --grau:#6c5f68;
  --gold:#c9922f;
  --kante:#ece7e0;
  --gruen:#3f9e3a;
  --gelb:#d19012;
  --orange:#e35d17;
  --pink:#e02c7c;
  /* dieselben Farben als SCHRIFT auf Papier — nachgemessen, alle über 4,5:1 */
  --gruen-t:#2f7a2b;
  --gelb-t:#8a5f07;
  --orange-t:#b0430e;
  --pink-t:#b01a5f;
  /* Leuchtfarben — nur auf dunklem Grund */
  --neongruen:#c8f259;
  --neonpink:#f26ba6;
  --serif:'Playfair Display',Georgia,"Iowan Old Style",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--papier); color:var(--pflaume);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; font-size:17px;
}
.wrap{max-width:720px;margin:0 auto;padding:0 20px 70px}
p{margin:0 0 15px}
a{color:var(--pflaume)}
img{max-width:100%;height:auto}

/* ---------- Kopfleiste mit Navigation ---------- */
.topbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;
  padding:16px 0 16px;border-bottom:0;position:relative;margin-bottom:32px;
}
/* Die bunte Linie — Petras vier Farben, oben und unten auf jeder Seite */
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--gruen),var(--gelb),var(--orange),var(--pink));
}
.logo{font-family:var(--serif);font-style:italic;font-size:1.16rem;font-weight:600;text-decoration:none}
.logo .punkt{color:var(--orange)}
nav.haupt{display:flex;flex-wrap:wrap;gap:2px 16px;font-size:.92rem}
nav.haupt a{text-decoration:none;font-weight:700;color:var(--grau);padding:3px 0}
nav.haupt a.aktiv{color:var(--pflaume);border-bottom:3px solid var(--orange)}
nav.haupt a:hover{color:var(--pflaume)}
.top-cta{
  font-size:.86rem;font-weight:700;text-decoration:none;color:var(--pflaume);
  border:2px solid var(--orange);border-radius:999px;padding:7px 15px;white-space:nowrap;
}

/* ---------- Aufmacher ---------- */
.hero-foto{position:relative;width:176px;height:176px;margin:0 0 26px}
.hero-foto::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--gelb)}
.hero-foto img{
  position:relative;z-index:1;width:176px;height:176px;border-radius:50%;
  object-fit:cover;border:5px solid var(--karte);box-shadow:0 8px 28px rgba(68,32,76,.17);
}
.eyebrow{
  display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--orange-t);margin-bottom:13px;
}
h1{font-size:2.05rem;line-height:1.18;font-weight:800;letter-spacing:-.022em;margin-bottom:18px}
h1 .bunt{font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:0;color:var(--orange)}
.lead{font-size:1.09rem}
.lead .stark{font-weight:700}
.hero-cta{margin-top:26px}
.btn-gross{
  display:block;text-align:center;text-decoration:none;
  background:var(--orange);color:#fff;font-weight:800;font-size:1.06rem;
  padding:17px 20px;border-radius:15px;box-shadow:0 5px 18px rgba(227,93,23,.28);
}
.btn-mittel{
  display:inline-block;text-decoration:none;background:var(--orange);color:#fff;
  font-weight:800;font-size:.98rem;padding:13px 22px;border-radius:13px;
  box-shadow:0 4px 14px rgba(227,93,23,.24);margin-top:8px;
}
.btn-mittel.gruen{background:var(--gruen);box-shadow:0 4px 14px rgba(63,158,58,.24)}
.btn-mittel.pink{background:var(--pink);box-shadow:0 4px 14px rgba(224,44,124,.24)}
.btn-leise{font-weight:700;color:var(--grau);text-decoration-color:var(--gold);
  text-underline-offset:3px;text-decoration-thickness:2px}
.micro{font-size:.86rem;color:var(--grau);margin:11px 2px 0}

/* ---------- Abschnitte ---------- */
section{margin-top:56px}
.sec-kopf{margin-bottom:22px}
.sec-tag{
  display:block;font-size:.76rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;margin-bottom:9px;
}
.sec-tag::before{
  content:"";display:block;width:56px;height:6px;border-radius:99px;
  background:currentColor;margin-bottom:13px;
}
h2{font-size:1.62rem;line-height:1.24;font-weight:800;letter-spacing:-.018em}
h2 .kursiv{font-family:var(--serif);font-style:italic;font-weight:600;letter-spacing:0}
h3{line-height:1.35}
.sec-lead{margin-top:12px;color:var(--grau);font-size:1rem}

/* Zeilen-Poesie: Petras kurze Sätze einzeln, mit Luft */
.zeilen p{margin-bottom:9px}
.zeilen p.stark{font-weight:800}
.zeilen p.kursiv{font-family:var(--serif);font-style:italic;font-size:1.13rem}

/* ---------- Erzähl-Beat: Foto + Text ---------- */
.beat{
  background:var(--karte);border:1px solid var(--kante);border-radius:18px;
  overflow:hidden;margin-bottom:18px;border-left:6px solid var(--kante);
}
.beat .beat-text{border-top:3px solid var(--kante)}
.beat > img{width:100%;display:block}
.beat-text{padding:20px 21px 22px}
.beat h3{font-size:1.14rem;font-weight:800;margin-bottom:10px}
.beat p{font-size:1rem;margin-bottom:0}
.beat p + p{margin-top:12px}
.b-gruen{border-left-color:var(--gruen)}
.b-gruen .beat-text{border-top-color:var(--gruen)}   .b-gruen h3{color:var(--gruen-t)}
.b-gelb{border-left-color:var(--gelb)}
.b-gelb .beat-text{border-top-color:var(--gelb)}     .b-gelb h3{color:var(--gelb-t)}
.b-orange{border-left-color:var(--orange)}
.b-orange .beat-text{border-top-color:var(--orange)} .b-orange h3{color:var(--orange-t)}
.b-pink{border-left-color:var(--pink)}
.b-pink .beat-text{border-top-color:var(--pink)}     .b-pink h3{color:var(--pink-t)}

/* ---------- Zitat-Bildkarte (Mondserie: Rand statt Fläche) ---------- */
.bildkarte{
  background:var(--karte);border:2px solid var(--kante);border-radius:20px;
  padding:14px;margin:30px 0;
}
/* bunte Rahmen für die Bildkarten */
.bildkarte.r-gruen{border-color:var(--gruen)}
.bildkarte.r-gelb{border-color:var(--gelb)}
.bildkarte.r-orange{border-color:var(--orange)}
.bildkarte.r-pink{border-color:var(--pink)}
.bildkarte img{width:100%;display:block;border-radius:12px}
.bildkarte figcaption{
  font-family:var(--serif);font-style:italic;font-size:1.24rem;
  padding:18px 10px 8px;text-align:center;line-height:1.45;
}
.bildkarte.leuchtet{background:var(--pflaume);border-color:var(--pflaume)}
.bildkarte.leuchtet figcaption{color:var(--neongruen);font-size:1.34rem}
.bildkarte.leuchtet .quelle{color:#cbb3d2}
.bildkarte .quelle{
  display:block;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-style:normal;font-size:.82rem;color:var(--grau);margin-top:10px;letter-spacing:.03em;
}

/* ---------- Foto-Streifen ---------- */
.galerie{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:8px}
.galerie img{width:100%;display:block;border-radius:14px;aspect-ratio:1/1;object-fit:cover;
  object-position:center 22%;border:4px solid var(--karte);box-shadow:0 3px 12px rgba(68,32,76,.09)}
.galerie img:nth-child(1){border-color:var(--gruen)}
.galerie img:nth-child(2){border-color:var(--gelb)}
.galerie img:nth-child(3){border-color:var(--orange)}
.galerie img:nth-child(4){border-color:var(--pink)}
@media (min-width:660px){.galerie{grid-template-columns:repeat(4,1fr)}}

/* ---------- Themen-Stichpunkte (bewusst KEINE Knopf-Optik — nicht anklickbar) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px 22px;margin:6px 0 16px}
.chips span{
  position:relative;padding:0 0 0 19px;
  font-weight:700;font-size:.98rem;
}
.chips span::before{
  content:"";position:absolute;left:0;top:.4em;width:11px;height:11px;border-radius:50%;
}
.chips span:nth-child(4n+1){color:var(--gruen-t)}  .chips span:nth-child(4n+1)::before{background:var(--gruen)}
.chips span:nth-child(4n+2){color:var(--gelb-t)}   .chips span:nth-child(4n+2)::before{background:var(--gelb)}
.chips span:nth-child(4n+3){color:var(--orange-t)} .chips span:nth-child(4n+3)::before{background:var(--orange)}
.chips span:nth-child(4n+4){color:var(--pink-t)}   .chips span:nth-child(4n+4)::before{background:var(--pink)}

/* ---------- Nummerierte Liste / Phasen ---------- */
.schritte{display:grid;gap:16px}
.schritt{
  display:grid;grid-template-columns:46px 1fr;gap:15px;align-items:start;
  background:var(--karte);border:1px solid var(--kante);border-left:6px solid var(--kante);
  border-radius:16px;padding:19px 20px;
}
.schritt:has(.n-gruen){border-left-color:var(--gruen)}
.schritt:has(.n-gelb){border-left-color:var(--gelb)}
.schritt:has(.n-orange){border-left-color:var(--orange)}
.schritt:has(.n-pink){border-left-color:var(--pink)}
.schritt .nr{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:1.35rem;font-weight:700;color:#fff;
}
.schritt h3{font-size:1.07rem;font-weight:800;margin-bottom:7px}
.schritt p{font-size:.98rem;margin-bottom:0}
.schritt p + p{margin-top:9px}
.n-gruen{background:var(--gruen)} .n-gelb{background:var(--gelb)}
.n-orange{background:var(--orange)} .n-pink{background:var(--pink)}

/* ---------- Klartext-Kasten (dunkel, Neon darauf) ---------- */
.klartext{background:var(--pflaume);border:2px solid var(--pflaume);border-radius:18px;
  padding:25px 22px;color:var(--papier)}
.klartext h2{font-size:1.42rem;margin-bottom:16px;color:var(--neongruen)}
.klartext h3{color:var(--neonpink);font-size:1.05rem;margin:18px 0 8px}
.klartext b{color:#fff}
.klartext ul{margin:0;padding-left:0;list-style:none}
.klartext li{font-size:1rem;padding:0 0 0 30px;margin-bottom:13px;position:relative}
.klartext li:last-child{margin-bottom:0}
.klartext li::before{content:"—";position:absolute;left:4px;top:0;color:var(--neonpink);font-weight:800}

/* ---------- Häkchen-Liste auf Papier ---------- */
.haken{list-style:none;padding:0;margin:0 0 15px}
.haken li{padding:0 0 0 32px;margin-bottom:11px;position:relative;font-size:1rem}
.haken li::before{content:"✓";position:absolute;left:2px;top:0;font-weight:800}
.haken li:nth-child(4n+1)::before{color:var(--gruen-t)}
.haken li:nth-child(4n+2)::before{color:var(--gelb-t)}
.haken li:nth-child(4n+3)::before{color:var(--orange-t)}
.haken li:nth-child(4n+4)::before{color:var(--pink-t)}

/* ---------- FAQ zum Aufklappen ---------- */
details.frage-auf{
  background:var(--karte);border:1px solid var(--kante);border-left:6px solid var(--kante);
  border-radius:14px;margin-bottom:12px;padding:0;
}
details.frage-auf summary{
  cursor:pointer;font-weight:800;font-size:1rem;padding:16px 18px;list-style:none;
  display:flex;gap:12px;align-items:baseline;
}
details.frage-auf summary::-webkit-details-marker{display:none}
details.frage-auf summary::before{content:"+";font-family:var(--serif);font-size:1.25rem;
  font-weight:700;color:var(--orange);flex:0 0 auto;line-height:1}
details.frage-auf[open] summary::before{content:"–"}
details.frage-auf .antwort{padding:0 18px 17px 44px}
details.frage-auf .antwort p{font-size:.98rem}
details.frage-auf .antwort p:last-child{margin-bottom:0}
details.frage-auf:nth-of-type(4n+1){border-left-color:var(--gruen)}
details.frage-auf:nth-of-type(4n+2){border-left-color:var(--gelb)}
details.frage-auf:nth-of-type(4n+3){border-left-color:var(--orange)}
details.frage-auf:nth-of-type(4n+4){border-left-color:var(--pink)}

/* ---------- Ruhiger Verweis ---------- */
.verweis{margin-top:32px;padding:19px 20px;border:2px dashed var(--gold);
  border-radius:16px;background:var(--karte)}
.verweis p{font-size:.99rem;color:var(--grau);margin-bottom:0}
.verweis p + p{margin-top:10px}
.verweis a{font-weight:800;color:var(--pflaume);text-decoration-color:var(--gold);
  text-underline-offset:3px;text-decoration-thickness:2px}

/* ---------- Schluss ---------- */
.schluss{
  margin-top:56px;background:var(--pflaume);border:1px solid var(--pflaume);
  border-radius:20px;padding:30px 22px;text-align:center;color:var(--papier);
}
.schluss h2{color:var(--neongruen);margin-bottom:14px}
.schluss .btn-gross{background:var(--neonpink);color:#3d0a20;box-shadow:0 6px 20px rgba(0,0,0,.28);margin-top:16px}
.schluss .frage{font-family:var(--serif);font-style:italic;font-size:1.16rem;margin-top:18px;color:var(--neonpink)}
.schluss .micro{color:#cbb3d2}
.schluss .micro a{color:var(--neonpink)}

/* ---------- Fußzeile ---------- */
footer{
  margin-top:48px;padding-top:26px;border-top:0;position:relative;
  color:var(--grau);font-size:.87rem;line-height:1.62;
}
footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--gruen),var(--gelb),var(--orange),var(--pink));
}
footer .name{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--pflaume);
  display:block;margin-bottom:9px}
footer a{color:var(--grau);font-weight:700}
footer nav{margin:10px 0}

@media (min-width:660px){
  h1{font-size:2.55rem}
  .hero-foto{width:196px;height:196px}
  .beat{display:grid;grid-template-columns:44% 1fr;align-items:stretch}
  .beat > img{height:100%;object-fit:cover;object-position:center 22%;min-height:270px}
  .beat.gedreht > img{order:2}
  .beat-text{display:flex;flex-direction:column;justify-content:center;padding:24px 26px}
  .beat.ohne-bild{display:block}
  .wrap{padding-bottom:90px}
}

@media (min-width:980px){
  .wrap{max-width:1060px}
  header.hero{display:grid;grid-template-columns:300px 1fr;gap:50px;align-items:center;margin-bottom:8px}
  .hero-text{min-width:0}
  .hero-foto{width:280px;height:280px;margin-bottom:0}
  .hero-foto img{width:280px;height:280px}
  h1{font-size:2.9rem}
  .hero-cta{max-width:460px}
  .paarweise{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
  .paarweise .beat{margin-bottom:0}
  .schritte{grid-template-columns:1fr 1fr}
  .schritte.einspaltig{grid-template-columns:1fr}
  .sec-lead,.verweis p,.zeilen{max-width:660px}
  .klartext,.faq-spalte{max-width:760px}
  .bildkarte{max-width:720px;margin-left:auto;margin-right:auto}
  .schluss{padding-left:60px;padding-right:60px}
  .schluss p{max-width:620px;margin-left:auto;margin-right:auto}
}