/* ===========================================================================
 * pages/spiegel.css - die Seite "Hier beginnt Deine neue Lebensgeschichte"
 * V574
 *
 * Der Text ist lang und ruhig. Das Stylesheet tut deshalb so wenig wie
 * moeglich: schmale Spalte, viel Luft, keine Kaesten, keine Farbflaechen.
 * Wer diesen Text liest, soll lesen - nicht durch Gestaltung geschoben
 * werden.
 *
 * Vier Textrollen, mehr nicht:
 *   p              der normale Absatz
 *   .sp-satz       ein Satz, der fuer sich steht (Zitat oder Frage an sich)
 *   .sp-kernsatz   der Satz, auf den ein Abschnitt hinauslaeuft
 *   .sp-liste      Aufzaehlung in Zeilen, ohne Punkte
 * =========================================================================== */

body.page-spiegel {
  background: var(--rose-50, #fdf6f3);
}

.sp-page {
  /* 34rem statt der ueblichen Breite: bei langem Fliesstext ist eine schmale
     Spalte besser lesbar. Die Augen muessen weniger weit zurueckspringen. */
  max-width: 34rem;
  margin: 0 auto;
  padding: 0 20px 60px;
  color: var(--text, #6b5560);
}

/* --- Einstieg ------------------------------------------------------------ */
.sp-intro {
  padding: 48px 0 8px;
  text-align: center;
}
.sp-h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--fs-title) * 1.15);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--rose-600, #993556);
  margin: 0;
}

/* V578: die zweite grosse Ueberschrift, jetzt UNTER dem Auftaktbild.
   Sie braucht oben weniger Luft als die erste - das Bild darueber hat
   ohnehin einen Abstand, sonst klaffte eine Luecke. */
.sp-intro-zweit {
  padding-top: 18px;
}

/* --- Abschnitte ---------------------------------------------------------- */
.sp-block {
  margin: 0 0 6px;
}
.sp-h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-title);
  font-weight: 500;
  line-height: 1.3;
  color: var(--rose-600, #993556);
  margin: 52px 0 16px;
  /* V601: Der Platz fuer die Nummer wird nicht mehr gebraucht. */
}
/* V580: eine kurze Linie ueber jeder Ueberschrift. Sie macht sichtbar,
   dass hier etwas Neues anfaengt - der Text ist lang, und beim Scrollen
   sucht das Auge nach Halt. */
/* V601 (Christian): die Abschnittsnummern sind ENTFERNT.
   Sie standen seit V585 ueber jeder Zwischenueberschrift (01 bis 07)
   und gaben Orientierung auf der langen Seite. Auf Wunsch raus - der
   Zaehler ist damit ueberfluessig und ebenfalls entfernt.
   Wer sie zurueckwill: counter-reset auf .sp-page, counter-increment
   auf .sp-h2, und ein ::before mit counter(sp-abschnitt,
   decimal-leading-zero). */
.sp-page p {
  font-size: var(--fs-body, 17px);
  line-height: 1.75;
  /* V584: 18 -> 14. Von 87 gewoehnlichen Absaetzen dieser Seite sind
     52 kuerzer als 60 Zeichen, 33 sogar kuerzer als 40 - es sind
     ueberwiegend EINZELNE SAETZE. Bei 18 Pixeln Abstand stand jeder
     davon als eigener Block da, und 87 gleich grosse Bloecke
     untereinander sind der Grund, warum die Seite gleichfoermig wirkt.
     Enger gesetzt lesen sie sich als Folge, als Atemzuege eines
     Gedankens. Die gewonnene Luft geht an die Struktur: Ueberschriften,
     Kernsaetze, Bilder. */
  margin: 0 0 14px;
}

/* V584: Der erste Absatz nach einer Ueberschrift ist der Einstieg in
   den Abschnitt. Er steht groesser und dunkler - so hat jeder der acht
   Abschnitte einen sichtbaren Anfang, statt sofort in die Reihe der
   kurzen Saetze zu kippen. Nur der Nachbar-Wahlweg (+), den kennt
   jeder Browser. */
.sp-page .sp-h2 + p {
  font-size: calc(var(--fs-body, 17px) * 1.12);
  line-height: 1.7;
  color: var(--rose-600, #993556);
  margin-bottom: 18px;
}

/* V584: Das Initial. NUR am ersten Absatz der Seite - es markiert den
   Anfang des Textes, nicht jeden Abschnitt. Zweimal waere Zierde,
   einmal ist ein Anfang. */
.sp-page .sp-block:first-of-type > p:first-of-type {
  /* V587: Der erste Absatz ist nur EIN Satz lang - "Manche Beziehungen
     sind zerbrochen." Ein Initial ueber drei Zeilen ragte darunter
     hinaus und schob den NAECHSTEN Absatz ein. Im echten Browser
     gesehen; die alte Rendering-Maschine zeigte es nicht.
     Loesung: der Absatz raeumt den Platz selbst frei (overflow),
     dann laeuft nichts mehr hinein. Und das Initial ist auf zwei
     Zeilen gekuerzt - bei einem einzeiligen Absatz ist alles
     Groessere ohnehin zu viel. */
  overflow: hidden;
}
.sp-page .sp-block:first-of-type > p:first-of-type::first-letter {
  float: left;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.6em;
  line-height: .86;
  padding: 4px 9px 0 0;
  color: var(--rose-400, #d4537e);
}

/* Ein Satz, der fuer sich steht. Etwas groesser, eingerueckt, mit einer
   feinen Linie links - kein Kasten, keine Farbflaeche. */
.sp-satz {
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--fs-body, 17px) * 1.18);
  font-style: italic;
  line-height: 1.6;
  color: var(--rose-600, #993556);
  border-left: 2px solid var(--rose-400, #d4537e);
  padding-left: 18px;
  margin: 26px 0 26px;
  /* V580: Platz fuer das Anfuehrungszeichen */
  position: relative;
}
/* V580: ein grosses Anfuehrungszeichen, sehr blass, HINTER dem Text.
   Es sagt "hier spricht jemand" - ohne dass man es bewusst liest. */
.sp-satz::before {
  content: "\201E";
  position: absolute;
  left: 6px;
  top: -22px;
  font-size: 5.2em;
  line-height: 1;
  color: rgba(212, 83, 126, .13);
  pointer-events: none;
  z-index: 0;
}

/* V580: Der Satz, auf den ein Abschnitt hinauslaeuft.
   Frueher nur fett und rose. Jetzt ein RUHEPUNKT: mittig, in der
   Serifenschrift, groesser, mit Luft davor und danach und zwei feinen
   Linien, die zu den Seiten auslaufen.
   Er wird damit zur Zaesur - man haelt kurz an, bevor der naechste
   Abschnitt beginnt. Genau das tut er inhaltlich ja auch. */
.sp-kernsatz {
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--fs-body, 17px) * 1.28);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: var(--rose-600, #993556);
  text-align: center;
  margin: 40px auto 34px !important;
  padding: 22px 0;
  max-width: 30rem;
  position: relative;
}
/* Zwei Haarlinien, in der Mitte voll, nach beiden Seiten auslaufend.
   Kein durchgehender Balken - der wuerde die Spalte zerschneiden. */
.sp-kernsatz::before,
.sp-kernsatz::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(to right,
      rgba(212,83,126,0) 0%,
      rgba(212,83,126,.45) 30%,
      rgba(212,83,126,.45) 70%,
      rgba(212,83,126,0) 100%);
}
.sp-kernsatz::before { top: 0; }
.sp-kernsatz::after  { bottom: 0; }

/* Die Fragen im Abschnitt "Liebe ist nicht bequem". Enger gesetzt als
   normale Absaetze, damit sie als Folge wirken und nicht als Einzelteile. */
/* V580: Die Fragen im Abschnitt "Liebe ist nicht bequem" sind der
   Wendepunkt der Seite - dort geht der Text vom Beschreiben ins
   Fragen ueber. Sie stehen jetzt als zusammenhaengender Block auf
   einem Hauch von Farbe, mit einem Fragezeichen als Marke.
   Aufeinanderfolgende .sp-frage bilden optisch EINE Flaeche: die
   erste bekommt den Deckel, die letzte den Boden. */
.sp-page .sp-frage {
  margin: 0;
  padding: 11px 22px;
  color: var(--rose-600, #993556);
  background: rgba(212, 83, 126, .05);
  border-left: 2px solid rgba(212, 83, 126, .35);
}
/* Die Fragen sollen als EINE Flaeche wirken, nicht als fuenf Kaesten.
   Deshalb nur Regeln mit dem Nachbar-Zeichen (+) - die kennt jeder
   Browser. Meine erste Fassung benutzte :has() und ein zusammen-
   gesetztes :not(); beides ist neu, und wo es fehlt, zerfiel der Block
   in fuenf Kaestchen mit Luecken. Am Ergebnis gesehen, nicht geraten.
   Die erste Frage folgt immer auf einen normalen Absatz - daran
   haengt der Deckel. Der Boden haengt am Absatz danach.
   GEWICHT: .sp-page davor, sonst sticht die allgemeine Regel
   ".sp-page p { margin: 0 0 18px }" diese hier aus - dann bleiben die
   18 Pixel stehen und der Block zerfaellt trotzdem. Genau das ist mir
   im ersten Anlauf passiert. */
.sp-page p + .sp-frage {
  margin-top: 28px;
  padding-top: 18px;
}
/* ... und wieder zuruecknehmen, sobald eine Frage auf eine Frage folgt.
   Denn .sp-frage IST ein p - "p + .sp-frage" trifft also auch die
   zweite, dritte, vierte Frage, und jede bekam den Deckel. Deshalb
   standen sie als fuenf Kaesten da statt als eine Flaeche.
   Diese Regel wiegt schwerer (drei Klassen gegen zwei Klassen und ein
   Element) und gewinnt. */
.sp-page .sp-frage + .sp-frage {
  margin-top: 0;
  padding-top: 11px;
}
.sp-page .sp-frage + p {
  margin-top: 28px;
}

/* Aufzaehlung in Zeilen. Kein <ul>, weil es im Original keine Punkte hat -
   es sind Saetze, die untereinander stehen. */
/* V584: Grund statt nur einer Linie. Die vier Aufzaehlungen der Seite
   sind Aufzaehlungen von MOEGLICHKEITEN - "aus einem Blick, der
   laenger bleibt", "ein Herz senden". Sie duerfen als Flaeche stehen,
   nicht als Anhaengsel am Rand. */
.sp-page .sp-liste {
  line-height: 1.95;
  padding: 18px 20px 18px 22px;
  border-left: 3px solid rgba(212, 83, 126, 0.32);
  border-radius: 0 var(--r-lg, 14px) var(--r-lg, 14px) 0;
  background: rgba(212, 83, 126, .045);
  margin: 26px 0;
}

/* V580: Trenner zwischen den Abschnitten. Ein winziges Herz, sehr
   blass - Amorazzas eigenes Zeichen, so leise gesetzt, dass es beim
   Lesen nicht stoert, aber den Takt vorgibt.
   Nur zwischen Abschnitten, die direkt aufeinanderfolgen: wo ein Bild
   dazwischensteht, uebernimmt das Bild diese Aufgabe. */
.sp-block + .sp-block::before {
  content: "\2665";
  display: block;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  color: rgba(212, 83, 126, .28);
  margin: 34px 0 6px;
}
/* V584: NICHT vor dem Amorazza-Abschnitt - der hat seit V584 einen
   eigenen weissen Grund, der die Zaesur schon markiert. Das Herz
   schwebte dort im Kasten statt zwischen den Abschnitten.
   MUSS HIER STEHEN, hinter der Regel darueber: mein erster Versuch
   stand davor und hatte dasselbe Gewicht - dann gewinnt die spaetere
   Regel, und das Herz blieb. Zur Sicherheit zusaetzlich .sp-page
   davor, damit die Reihenfolge nicht wieder zur Falle wird. */
.sp-page .sp-block + .sp-block-amorazza::before { content: none; }

/* --- Der Amorazza-Abschnitt ---------------------------------------------- */
/* Hier kippt der Text vom Zustand in die Absicht. Eine feine Linie darueber
   markiert das, ohne den Lesefluss zu unterbrechen. */
/* V584: Der Abschnitt steht jetzt auf WEISSEM Grund und bricht dafuer
   aus der Textspalte aus. Hier kippt die Seite vom Zustand in die
   Absicht - vorher wird beschrieben, ab hier wird etwas angeboten.
   Diesen Wechsel sieht man jetzt, bevor man ihn liest.
   Es ist der einzige Abschnitt mit eigenem Grund. Gaebe es zwei,
   waere es Dekoration. */
.sp-block-amorazza {
  margin-top: 54px;
  padding: 8px 24px 26px;
  margin-left: calc(var(--sp-ausbruch, 0px) * -1);
  margin-right: calc(var(--sp-ausbruch, 0px) * -1);
  background: var(--weiss, #fff);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 2px 18px rgba(107, 85, 96, .07);
}
/* Die Bilder darin sollen nicht ein zweites Mal ausbrechen.
   V592: auto statt 0. Mit 0 stand das schmale Handybild LINKS statt
   mittig - diese Regel wiegt schwerer als das margin:auto bei
   .sp-bild-schmal und hat es ueberschrieben.
   Fuer Bilder ueber die volle Breite ist auto dasselbe wie 0, fuer
   das schmale ist es die Mitte. Eine Regel, beide Faelle richtig. */
.sp-block-amorazza .sp-bild {
  margin-left: auto;
  margin-right: auto;
}

/* V581: Die Einordnung unter "Hier beginnt Amorazza".
   Mittig und in der Serifenschrift wie die Kernsaetze - aber OHNE die
   Haarlinien. Die Linien markieren einen Halt am Ende eines Abschnitts;
   hier faengt einer an. Der Unterschied soll sichtbar bleiben.
   Die zwei Verneinungen stehen zurueck, die Behauptung tritt vor. */
/* V582: eingerahmt, rote Linie, runde Ecken.
   Der Rahmen ist die einzige geschlossene Form auf der ganzen Seite -
   sonst gibt es nur Linien und Flaechen ohne Kontur. Genau deshalb
   faellt er auf: hier steht, was Amorazza IST.
   Die Farbe ist der vorhandene Akzentton (--rose-400), nicht ein neues
   Rot. Der Grund innen ist ein Hauch davon, damit der Kasten nicht wie
   ein leeres Formularfeld wirkt. */
.sp-page .sp-einordnung {
  font-family: Georgia, "Times New Roman", serif;
  /* Die beiden Verneinungen in normaler Textgroesse. Bei 1,12 brach
     "Amorazza ist keine Datingplattform." am Handy in zwei Zeilen, die
     zweite Verneinung nicht - das sah schief aus. Gerendert gesehen.
     Nebenbei entsteht so ein Gefaelle: die Verneinungen leiser, die
     Behauptung lauter. */
  font-size: var(--fs-body, 17px);
  line-height: 1.8;
  text-align: center;
  color: var(--text, #6b5560);
  margin: 26px auto 34px;
  max-width: 28rem;
  padding: 26px 24px 28px;
  border: 2px solid var(--rose-400, #d4537e);
  border-radius: var(--r-lg, 14px);
  background: rgba(212, 83, 126, .04);
}
/* Die Behauptung: groesser, halbfett, in der dunklen Markenfarbe -
   und mit Luft ueber sich, damit sie von den zwei Verneinungen
   abruecken kann. Der Abstand stand vorher als <br><br> im Text;
   hier laesst er sich in Pixeln treffen. */
.sp-einordnung-kern {
  display: block;
  margin-top: 18px;
  font-size: calc(var(--fs-body, 17px) * 1.28);
  font-weight: 600;
  line-height: 1.45;
  color: var(--rose-600, #993556);
}

@media (max-width: 480px) {
  /* V584: Der weisse Grund des Amorazza-Abschnitts kostet 48 Pixel
     Breite - dadurch brach "Amorazza ist keine Datingplattform."
     wieder in zwei Zeilen um. Beide Polster am Handy enger, damit die
     Zeile wieder passt. Nachgemessen, nicht geschaetzt. */
  .sp-block-amorazza      { padding-left: 14px; padding-right: 14px; }
  /* Der Kasten holt sich die Polsterung des Abschnitts zurueck: mit
     negativen Raendern steht er bis an dessen Kante. Gemessen im
     Render: die Zeile "Amorazza ist keine Datingplattform." braucht
     rund 340 Pixel, vorher standen ihr nur 311 zur Verfuegung.
     So sind es 356 - sie passt. */
  .sp-page .sp-einordnung {
    margin-left: -14px;
    margin-right: -14px;
    padding: 20px 10px 22px;
    font-size: 15.5px;
    max-width: none;
  }
}

/* --- V594: die zwei Wege zum Test ----------------------------------------
   Oben ein Nebenausgang fuer alle, die nicht lesen wollen. Unten der
   naechste Schritt fuer alle, die gelesen haben.
   Beide in derselben Machart wie der Kasten auf der Startseite: Hauch
   Rot innen, 2 Pixel Rahmen, gerundet - kein gefuellter Knopf.
   ALLE Farben mit Rueckfallwert: fehlt tokens.css, waere die Regel
   sonst ungueltig und der Verweis faellt auf Browserblau zurueck.
   Das ist mir bei der Startseite genau so passiert. */


.sp-zumtest {
  display: block;
  box-sizing: border-box;
  /* V601: liegt ueber dem Abschnitt darunter, damit die ueberstehende
     Hand nicht verdeckt wird - wie auf der Startseite. */
  position: relative;
  z-index: 1;
  margin: 40px 0 26px;
  padding: 15px 22px;
  background: rgba(212, 83, 126, .05);
  /* V667: kein geschlossener Rahmen mehr - Klammer links und rechts,
     wie bei den beiden Wegen auf der Startseite. Rundung 8px,
     damit alle vier gleich sind. */
  border: 0;
  border-left: 3px solid var(--rose-400, #d4537e);
  border-right: 3px solid var(--rose-400, #d4537e);
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: calc(var(--fs-body, 17px) * 1.05);
  color: var(--rose-600, #993556);
  transition: background .2s, border-color .2s;
}
/* V667: die Regeln fuer die Mauszeigerhand sind ENTFERNT - die Hand
   selbst ist aus spiegel.php raus. Sie schnitt den unteren Rahmen;
   den gibt es hier nicht mehr.
   Das z-index am Kasten ist geblieben: es haelt ihn ueber dem
   Abschnitt darunter, und position: relative traegt jetzt die beiden
   Linien. */

/* V667: die zwei duennen roten Linien, oben und unten, mittig voll
   und nach beiden Seiten auslaufend. Dieselbe Methodik wie beim Weg
   zu was-ist-amorazza.php (V664) und beim Test-Knopf (V665), dort
   wiederum woertlich aus .sp-kernsatz in pages/spiegel.css.
   Verlauf unveraendert: 0 - voll bei 30 - voll bei 70 - 0.
   Einzug 20 Prozent je Seite. pointer-events: none, damit sie den
   Klick nicht abfangen. */
.sp-zumtest::before,
.sp-zumtest::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(to right,
      rgba(212, 83, 126, 0) 0%,
      rgba(212, 83, 126, 1) 30%,
      rgba(212, 83, 126, 1) 70%,
      rgba(212, 83, 126, 0) 100%);
}
.sp-zumtest::before { top: 0; }
.sp-zumtest::after  { bottom: 0; }

/* V601: der Rueckweg zur Hauptseite. Bewusst RUHIGER als der
   Testknopf: nur Schrift und eine feine Linie, kein Rahmen, keine
   Hand. Er ist keine Einladung, sondern eine Tuer fuer die, die
   zurueckwollen - und er darf dem Testknopf nichts wegnehmen. */
.sp-zurueck {
  display: block;
  box-sizing: border-box;
  margin: 0 0 34px;
  padding: 12px 20px;
  border: 1px solid rgba(212, 83, 126, .35);
  border-radius: var(--r-lg, 14px);
  text-align: center;
  text-decoration: none;
  font-size: var(--fs-body, 17px);
  color: var(--text, #6b5560);
  transition: background .2s, border-color .2s;
}
.sp-zurueck:hover,
.sp-zurueck:focus-visible {
  background: rgba(212, 83, 126, .05);
  border-color: var(--rose-400, #d4537e);
}

.sp-zumtest:hover,
.sp-zumtest:focus-visible {
  background: rgba(212, 83, 126, .10);
  border-color: var(--rose-600, #993556);
}

/* Am Handy braucht der obere Weg mehr als die halbe Breite - sonst
   bricht "Ohne diese Seite zu lesen." in drei Zeilen. */

/* --- Bilder --------------------------------------------------------------- */
/* V575: die Bilder brechen aus der Textspalte aus - etwas breiter als der
   Text, aber nicht randlos. Der Text bleibt schmal und ruhig, das Bild darf
   atmen. Auf schmalen Geraeten faellt der Ausbruch von selbst weg, weil die
   Spalte dort ohnehin die volle Breite hat. */
.sp-bild {
  margin: 38px calc(var(--sp-ausbruch, 0px) * -1);
  line-height: 0;   /* kein Zeilenabstand unter dem Bild */
}
/* V587: <picture> ist ein Element wie jedes andere - ohne diese Zeile
   bleibt darunter der Zeilenabstand stehen und das Bild bekommt einen
   Spalt nach unten. */
.sp-bild picture { display: block; }
.sp-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-lg, 14px);
  /* Ein sehr weicher Schatten. Die Bilder sollen auf dem hellen Rose-Grund
     liegen, nicht hineingestanzt wirken. */
  box-shadow: 0 2px 14px rgba(107, 85, 96, 0.13);
}

/* V576: das Auftaktbild ganz oben. Es steht vor der Ueberschrift und
   braucht deshalb keinen Abstand nach oben - nur nach unten, damit die
   Ueberschrift Luft bekommt. */
.sp-bild-auftakt {
  margin-top: 26px;
  margin-bottom: 10px;
}

/* Das Handy-Bild ist ein Hochformat. In voller Breite wuerde es die Seite
   auseinanderziehen und man muesste daran vorbeiscrollen. */
.sp-bild-schmal {
  margin-left: auto;
  margin-right: auto;
  max-width: 300px;
}

/* --- Bildplaetze ---------------------------------------------------------- */
/* V576: die Seite ist inzwischen vollstaendig bebildert - diese Regeln
   werden derzeit von nichts benutzt. Sie bleiben stehen, weil auf dieser
   Seite noch weitere Abschnitte hinzukommen koennen und das Muster dann
   sofort wieder zur Verfuegung steht: gestrichelter Rahmen mit der
   Bildidee im Klartext, sichtbar bis das Bild da ist. */
.sp-bildplatz {
  margin: 34px 0;
}
.sp-bildplatz-rahmen {
  border: 1px dashed rgba(212, 83, 126, 0.45);
  border-radius: var(--r-lg, 14px);
  background: rgba(212, 83, 126, 0.045);
  padding: 20px 22px;
  text-align: center;
}
.sp-bildplatz-marke {
  display: inline-block;
  font-size: var(--fs-meta, 13px);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rose-400, #d4537e);
  margin-bottom: 10px;
}
.sp-bildplatz p {
  font-size: var(--fs-meta, 13px);
  line-height: 1.6;
  color: #8a7078;
  margin: 0;
  font-style: italic;
}

/* --- Schluss -------------------------------------------------------------- */
.sp-schluss {
  text-align: center;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid rgba(212, 83, 126, 0.22);
}
.sp-marke {
  font-family: Georgia, "Times New Roman", serif;
  font-size: var(--fs-hero);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--rose-600, #993556);
  line-height: 1.1;
}
.sp-slogan {
  font-size: calc(var(--fs-body, 17px) * 1.05);
  color: var(--rose-400, #d4537e);
  margin: 10px 0 0 !important;
}
/* Damit "Echte Menschen" und "Echt verlieben" nicht mitten im Wortpaar
   umbrechen - dieselbe Loesung wie beim Slogan auf index.php und liebe.php. */
.sp-nowrap { white-space: nowrap; }

.sp-schlusssatz {
  font-family: Georgia, "Times New Roman", serif;
  font-size: calc(var(--fs-body, 17px) * 1.15);
  font-style: italic;
  color: var(--text, #6b5560);
  margin: 24px 0 0 !important;
}

/* --- Grosse Bildschirme --------------------------------------------------- */
@media (min-width: 700px) {
  .sp-intro { padding-top: 64px; }
  .sp-page  { padding-bottom: 80px; }
  /* Erst hier duerfen die Bilder aus der Textspalte ausbrechen - vorher
     ist kein Platz dafuer. */
  .sp-page  { --sp-ausbruch: 46px; }
  .sp-bild-schmal { max-width: 340px; }
}

/* --- Drucken --------------------------------------------------------------- */
/* Der Text taugt zum Ausdrucken. Die Bildplatzhalter dann nicht. */
@media print {
  .sp-bildplatz { display: none; }
  .sp-bild { margin: 20px 0; break-inside: avoid; }
  .sp-bild img { box-shadow: none; }
  .sp-page { max-width: none; color: #000; }
  .sp-h1, .sp-h2, .sp-kernsatz, .sp-satz, .sp-marke { color: #000; }
}

/* --------------------------------------------------------------------------
   V831: DER CTA AM SEITENENDE.
   Christian: "auf meine neue liebe fehlt der cta - zuerst hauptseite/
   anmelden/reservieren und dann darunter erst der link lust auf einen
   beziehungstest."
   Form und Wortlaut sind die des Kastens am Ende von
   was-ist-amorazza.php (.wia-cta). Die Regeln stehen hier eigens, weil
   diese Seite pages/wia nicht laedt - eine ganze Stildatei nur fuer
   einen Kasten waere zu viel.
   Der Rueckweg "Zurueck zur Hauptseite" ist entfallen: Der Knopf fuehrt
   auf dieselbe Seite und sagt es deutlicher.
   -------------------------------------------------------------------------- */
.sp-cta {
  max-width: 640px;
  margin: clamp(30px, 6vw, 48px) auto clamp(18px, 3vw, 26px);
  padding: clamp(26px, 5vw, 38px) clamp(20px, 4vw, 30px);
  text-align: center;
  background: linear-gradient(160deg, var(--rose-400, #d4537e), var(--rose-600, #993556));
  border-radius: 22px;
  color: #ffffff;
}
.sp-cta h2 {
  margin: 0 0 12px;
  color: #ffffff;
  line-height: 1.25;
}
.sp-cta p {
  margin: 0 0 20px;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
}
/* V880 (Christian): DER ZWEITE AUFRUF, mittendrin nach "Mensch zu
   Mensch". Er traegt dieselbe Form wie der untere, aber nicht dessen
   Lautstaerke: der volle rosefarbene Block wuerde die Seite zweimal
   enden lassen.
   Heller Grund, rosefarbener Rahmen, dunkle Schrift - er unterbricht den
   Lesefluss, ohne ihn abzubrechen. Der Knopf darin bleibt kraeftig, denn
   er ist das Angebot. */
.sp-cta.sp-cta-mittig {
  background: var(--rose-50, #fdf6f3);
  border: 1px solid var(--rose-200, #f4c0d1);
  color: var(--ink-900, #333333);
  padding: clamp(20px, 4vw, 28px) clamp(18px, 3vw, 26px);
}
.sp-cta.sp-cta-mittig p {
  color: var(--ink-700, #6b5560);
  margin: 0 0 16px;
}
/* Der Knopf ist fuer den DUNKLEN Block gemacht: weiss auf Rose. Auf dem
   hellen Grund hier verschwaende er - gemessen im Bild, nicht vermutet.
   Deshalb umgekehrt: Rose mit weisser Schrift. */
.sp-cta.sp-cta-mittig .sp-cta-btn {
  background: var(--rose-400, #d4537e);
  color: #ffffff;
}
.sp-cta.sp-cta-mittig .sp-cta-btn:hover {
  background: var(--rose-600, #993556);
}
.sp-cta-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--rose-600, #993556);
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sp-cta-btn:hover,
.sp-cta-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
@media (prefers-reduced-motion: reduce) {
  .sp-cta-btn { transition: none; }
}