/* Meike Schiek – Abschnitte, die nur auf bestimmten Seiten vorkommen. */

/* =========================================================
   Startseite
   ========================================================= */

/* ---------- Einstieg ---------- */
.ms-held { position: relative; padding: var(--space-8) 0 var(--space-abschnitt); }
/* Flecken oben auf der Seite beginnen erst unter dem Kopfbereich, sonst liegen die
   rosa Menüknöpfe auf Pfirsich (gleiche Helligkeit) und der Rand läuft durch die Knöpfe */
.ms-held__fleck-1 { left: -120px; top: 56px; width: 540px; height: 330px; transform: rotate(-12deg); }
.ms-held__fleck-2 { right: -160px; bottom: -60px; width: 620px; height: 420px; transform: rotate(8deg); }
.ms-held .ms-zweispaltig { gap: var(--space-12) var(--space-14); }
.ms-held__text { --basis: 500px; display: flex; flex-direction: column; gap: 22px; }
.ms-held h1 { font-size: var(--fs-hero); line-height: 1.08; letter-spacing: -.015em; }
.ms-held__lead { max-width: 540px; }
.ms-held .ms-linkreihe { padding-top: 6px; }
.ms-held__bild { --basis: 360px; display: flex; justify-content: center; }

.ms-held__rahmen { position: relative; width: 380px; max-width: 100%; aspect-ratio: 4 / 5; }
.ms-held__rahmen .ms-foto { position: absolute; inset: 0; padding: 48px; border-radius: 999px 999px 28px 28px; box-shadow: var(--shadow-soft); }
.ms-held__rahmen-fleck { position: absolute; left: -40px; top: 18%; width: 150px; height: 150px; background: var(--rose); border-radius: 52% 48% 45% 55% / 50% 55% 45% 50%; }
.ms-stempel {
  position: absolute; right: -4px; top: 40px;
  display: flex; align-items: center; justify-content: center;
  width: 120px; height: 120px; padding: 14px;
  border-radius: 50%; background: var(--accent); color: var(--on-accent);
  box-shadow: 0 2px 12px rgba(74, 55, 66, .18);
  transform: rotate(-10deg);
  font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 21px; text-align: center;
}
@media (min-width: 700px) { .ms-stempel { right: -26px; width: 128px; height: 128px; font-size: 17px; line-height: 22px; } }

/* ---------- Was suchst du heute? ---------- */
.ms-wege { padding-bottom: var(--space-10); }
.ms-wege .ms-stapel { --stapel: 36px; }
.ms-wege .ms-raster { --min: 290px; padding: 6px; }

/* ---------- Safe Space ---------- */
.ms-safe { margin-top: var(--space-10); }
.ms-safe__fleck { right: -120px; top: -100px; width: 440px; height: 360px; }
.ms-safe .ms-zweispaltig { gap: var(--space-10) 72px; }
.ms-safe__text { --basis: 420px; display: flex; flex-direction: column; gap: 14px; }
.ms-safe .ms-herzliste { --basis: 400px; padding: 28px 32px; --herz-fuellung: #ffffff; }
@media (max-width: 699px) { .ms-safe .ms-herzliste { padding: var(--space-6); } }
.ms-nowrap { white-space: nowrap; font-weight: 700; }

/* ---------- Bücher auf der Startseite ---------- */
.ms-buecher-start .ms-stapel { --stapel: var(--space-12); }
.ms-buchbuehne { --basis: 360px; display: flex; justify-content: center; padding: var(--space-6) 0; }
.ms-buchbuehne__flaeche { position: relative; width: 320px; height: 400px; max-width: 100%; }
.ms-buchbuehne__kreis { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; max-width: 94%; aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--rose-soft); border-radius: 50%; }
.ms-buchbuehne__hinten { position: absolute; top: 48px; width: 190px; height: 285px; border-radius: var(--radius-sm); box-shadow: 0 2px 12px rgba(74, 55, 66, .12); }
.ms-buchbuehne__hinten--links { left: 18px; background: var(--lilac); transform: rotate(-11deg); }
.ms-buchbuehne__hinten--rechts { right: 18px; background: var(--peach); transform: rotate(10deg); }
.ms-buchbuehne .ms-cover { position: absolute; left: 50%; top: 30px; width: 210px; transform: translateX(-50%); }

.ms-buchinfo { --basis: 460px; display: flex; flex-direction: column; gap: var(--space-4); }
.ms-buchinfo h3 { font-size: var(--fs-buchtitel); line-height: 1.15; }
.ms-buchinfo h3 a { color: var(--ink); }
.ms-buchinfo h3 a:hover { color: var(--accent); }
.ms-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding-top: 6px; }
.ms-buchinfo .ms-stimme { margin-top: var(--space-2); }

/* Kleiner Hinweis auf ein weiteres Buch */
.ms-buchhinweis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding: var(--space-6) 28px; }
.ms-buchhinweis .ms-cover { flex: 0 0 84px; padding: 8px; transform: rotate(-4deg); box-shadow: none; line-height: 18px; }
.ms-buchhinweis__text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-buchhinweis h3 { font-size: 26px; line-height: 34px; }

/* ---------- Kurzgeschichten auf der Startseite ---------- */
.ms-kurz-start__fleck { left: -140px; top: 40px; width: 360px; height: 300px; }

/* ---------- Newsletter ---------- */
.ms-nl__fleck-1 { right: -100px; top: -120px; width: 420px; height: 360px; background: var(--night-blob-1); }
.ms-nl__fleck-2 { left: -140px; bottom: -160px; width: 460px; height: 380px; background: var(--night-blob-2); }
.ms-nl .ms-zweispaltig { gap: var(--space-12) 72px; }
.ms-nl__text { --basis: 440px; display: flex; flex-direction: column; gap: 18px; }
.ms-nl__geschenk { color: var(--on-night-muted); }
.ms-nl .ms-formkasten { --basis: 360px; }

/* ---------- Über mich und Termine ---------- */
.ms-ich-termin .ms-raster { --min: 360px; align-items: stretch; }
.ms-ich { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.ms-ich__foto { position: relative; flex: 0 0 160px; width: 160px; height: 160px; }
.ms-ich__foto::before { content: ""; position: absolute; inset: -14px; background: var(--rose-soft); border-radius: 52% 48% 45% 55% / 50% 55% 45% 50%; }
.ms-ich__foto .ms-foto { position: absolute; inset: 0; border-radius: 50%; }
.ms-ich__text { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.ms-ich__text h2 { font-size: var(--fs-buchtitel); }

.ms-termin { display: flex; overflow: hidden; }
.ms-termin__datum {
  flex: 0 0 auto; min-width: 110px; padding: var(--space-6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--rose); border-right: 2px dashed var(--bg);
}
@media (max-width: 539px) { .ms-termin__datum { min-width: 84px; padding: var(--space-4); } }
.ms-termin__tag { font-family: var(--font-serif); font-size: 40px; line-height: 44px; font-weight: 600; }
.ms-termin__inhalt { flex: 1 1 auto; min-width: 0; padding: var(--space-6) 28px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ms-termin__titel { font-size: var(--fs-h4); line-height: 1.4; }
.ms-termin .ms-linkreihe { gap: 0 var(--space-6); }

/* =========================================================
   Bücher: Übersicht und Buchseite
   ========================================================= */
.ms-buchliste { display: flex; flex-direction: column; gap: var(--space-8); }
.ms-buchkarte {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
  padding: var(--space-6); align-items: start;
}
.ms-buchkarte .ms-cover { width: 150px; }
.ms-buchkarte__text { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ms-buchkarte h2 { font-size: var(--fs-buchtitel); }
.ms-buchkarte h2 a { color: var(--ink); }
.ms-buchkarte h2 a:hover { color: var(--accent); }
@media (min-width: 700px) {
  .ms-buchkarte { grid-template-columns: 180px 1fr; gap: var(--space-8); padding: var(--space-8); }
  .ms-buchkarte .ms-cover { width: 180px; }
}

.ms-buchkopf { padding-top: var(--space-8); }
.ms-buchkopf h1 { font-size: var(--fs-h1); }
.ms-buchkopf .ms-buchinfo { gap: var(--space-4); }
.ms-haendler { font-size: var(--fs-small); line-height: 24px; color: var(--ink-muted); }

.ms-zitate { --min: 260px; }
.ms-zitate .ms-quote { max-width: none; }

.ms-leseprobe { font-family: var(--font-serif); font-size: 19px; line-height: 1.75; max-width: var(--measure-lese); }
.ms-leseprobe > * + * { margin-top: 1em; }

.ms-produktsicherheit { max-width: 720px; padding: var(--space-6); }
.ms-produktsicherheit h2 { font-size: var(--fs-h4); margin-bottom: var(--space-3); }

/* =========================================================
   Kurzgeschichten: Übersicht und Geschichte
   ========================================================= */
.ms-regal { --min: 230px; }
.ms-regal .ms-kachel--buch { aspect-ratio: 3 / 4; min-height: 0; }
.ms-regal .ms-kachel__titel { font-size: var(--fs-h4); line-height: 1.3; }
@media (max-width: 539px) { .ms-regal .ms-kachel--buch { aspect-ratio: auto; min-height: 260px; } }

/* Titelseite wie im Buch */
.ms-titelseite { position: relative; padding: var(--space-12) 0 var(--space-10); text-align: center; }
.ms-titelseite .ms-blob { left: 50%; top: 32px; width: 560px; height: 320px; transform: translateX(-50%) rotate(-6deg); } /* unter dem Kopfbereich */
.ms-titelseite__inhalt { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.ms-titelseite h1 { font-size: var(--fs-hero); line-height: 1.08; max-width: 14em; }
.ms-titelseite .ms-herz-trenner { margin-top: var(--space-2); }

/* Text der Geschichte: Lora, ruhig, schmale Spalte */
.ms-geschichte { margin-inline: auto; max-width: var(--measure-lese); font-family: var(--font-serif); font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem); line-height: 1.75; }
.ms-geschichte > p + p { margin-top: .9em; }
.ms-geschichte > p:first-of-type::first-letter {
  float: left; margin: .08em .1em 0 0;
  font-size: 3.6em; line-height: .85; font-weight: 600; color: var(--accent);
}
.ms-herz-trenner { display: flex; justify-content: center; margin-block: 1.6em; color: var(--accent); --herz-fuellung: var(--rose-soft); }
.ms-ende { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: 2em; font-style: italic; font-size: 1.2em; color: var(--accent); --herz-fuellung: var(--rose); }
.ms-nach-geschichte { max-width: calc(640px + 2 * var(--gutter)); margin-inline: auto; }

/* =========================================================
   Blog: Übersicht und Beitrag
   ========================================================= */
.ms-blogleiste { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.ms-suche { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }
.ms-suche .ms-field { flex: 1 1 220px; }
.ms-seitenwahl { display: flex; justify-content: center; gap: var(--space-8); }

.ms-beitrag { padding-top: var(--space-8); }
.ms-beitrag__spalte { max-width: calc(640px + 2 * var(--gutter)); }
.ms-beitrag__kopf { display: flex; flex-direction: column; gap: var(--space-4); }
.ms-beitrag__kopf h1 { font-size: var(--fs-h1); }
.ms-beitrag__bild { margin-top: var(--space-8); aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
.ms-beitrag .ms-text { margin-top: var(--space-10); }
.ms-beitrag .ms-text strong:only-child { font-size: var(--fs-lead); }

.ms-beitrag .ms-teilen { margin-top: var(--space-10); }
.ms-teilen { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); max-width: var(--measure); }
.ms-teilen a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); }
.ms-teilen__titel { font-weight: 700; margin-right: var(--space-2); }

/* =========================================================
   Über mich
   ========================================================= */
.ms-portrait { --basis: 320px; display: flex; justify-content: center; }
.ms-portrait .ms-foto { width: 340px; max-width: 100%; aspect-ratio: 4 / 5; padding: 40px; border-radius: 999px 999px 28px 28px; box-shadow: var(--shadow-soft); }
.ms-ueber__text { --basis: 480px; display: flex; flex-direction: column; gap: var(--space-4); }
.ms-steckbrief { padding: var(--space-6); }
@media (min-width: 700px) { .ms-steckbrief { padding: var(--space-8); } }
.ms-steckbrief h2 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.ms-steckbrief .ms-daten { font-size: var(--fs-text); line-height: var(--lh-text); }
@media (max-width: 539px) { .ms-daten { grid-template-columns: 1fr; gap: 0; } .ms-daten dd + dt { margin-top: var(--space-3); } }

/* =========================================================
   Kontakt und Fehlerseite
   ========================================================= */
.ms-kontakt .ms-formkasten { --basis: 460px; background: var(--surface); box-shadow: var(--shadow-soft); }
.ms-kontakt__seite { --basis: 300px; display: flex; flex-direction: column; gap: var(--space-6); align-self: start; }
.ms-kontakt__seite h2 { font-size: var(--fs-h4); }
.ms-kontakt__block { display: flex; flex-direction: column; gap: var(--space-2); }

.ms-platzhalter { padding: var(--space-6); border: 2px dashed var(--border); border-radius: var(--radius-md); color: var(--ink-muted); max-width: 720px; }