/*
 * ROK Stilvorlage v1.2
 * Seitentitel als Ganzes, Fokusring, fünf Bausteinklassen, reduzierte Bewegung, Druck.
 * Schrift und Farben bestehender Seitenelemente bleiben unverändert.
 */

/* 1 · Token --------------------------------------------------------------------------------- */

:root{
  /* Farben wie live. Gold ist #C9952A, ohne Abdunklung und ohne Mischton */
  --rok-navy:#2C3E50;          /* Fokusring */
  --rok-gold:#C9952A;          /* Kastenüberschrift, Kicker, Linie, Ziffernkreis, Rahmen, Fokusring auf Navy */
  --rok-creme:#FAF5E5;
  --rok-weiss:#FAFAFA;
  /* Schrift: Montserrat wie live, keine zweite Familie */
  --rok-sans:Montserrat,"Montserrat-HelveticaNeue","Montserrat-Tahoma",Arial,sans-serif;
  /* Größen NUR für die fünf Klassen (Abschnitt 4), nie für Bestandstexte. In px, weil Astra die
     Wurzelgröße auf 94,75 % setzt */
  --rok-fs-kicker:13px;                                   /* 13 */
  --rok-fs-text:clamp(17px,16px + .25vw,18px);       /* 17 bis 18 */
  --rok-fs-h3:clamp(22px,19px + .6vw,24px);           /* 22 bis 24: Kastenüberschrift, Bibelzitat */
  --rok-radius:8px;
  /* Bewegung */
  --rok-ease:cubic-bezier(.25,.46,.45,.94);
}

/* 2 · Seitentitel als Ganzes --------------------------------------------------------------- */

/* Seitentitel als Ganzes. Das Zusatz-CSS im Customizer (wp-custom-css) zwingt
   den Titel in eine nicht umbrechende Flexzeile; das Skript im Plugin verhindert die Zerlegung.
   Läuft das Skript einmal nicht, machen diese Regeln die Buchstaben sichtbar, umbrechen kann ein
   zerlegter Titel dann aber nur an keiner Stelle (geschützte Leerzeichen). */
html body .rok-gradual-spacing .elementor-heading-title{
  display:block!important;
  overflow:visible!important;
  flex-wrap:wrap!important;
  text-align:center;
  overflow-wrap:break-word;
  hyphens:auto;
  text-wrap:balance;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
}
html body .rok-gradual-spacing .elementor-heading-title .rok-char{
  display:inline!important;opacity:1!important;transform:none!important;animation:none!important;filter:none!important;
}
/* Einblendung als Ganzes direkt am Titel, nicht über eine per Skript gesetzte Klasse: so gibt es
   keinen Sprung, wenn das Skript erst nach dem ersten Bild läuft. */
@media (prefers-reduced-motion:no-preference){
  html body .rok-gradual-spacing .elementor-heading-title{animation:rok-titel-ein .8s var(--rok-ease) both}
}
@keyframes rok-titel-ein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* 3 · Fokus ------------------------------------------------------------------------------ */

/* Nur bei Tastaturbedienung (:focus-visible), Mausklicks zeigen keinen Ring.
   Doppelring: Navy außen für helle Flächen, Weiß innen für dunkle Flächen und Fotos */
:where(a,button,summary,input,select,textarea,[tabindex]:not([tabindex="-1"]),[role="button"]):focus-visible{
  outline:3px solid var(--rok-navy)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 2px #fff!important;
}
/* Fußzeile (Navy): Ring in Gold, 4,1:1 gegen Navy */
:where(.site-footer,.site-footer *):focus-visible{outline-color:var(--rok-gold)!important}

/* 4 · Fünf Klassen für Elementor ---------------------------------------------------------------
 * Setzen: Widget oder Container markieren, Reiter „Erweitert“, Feld „CSS-Klassen“, Klassenname
 * ohne Punkt. Bei Datenbank-Skripten heißt das Feld am Widget `_css_classes`, am Container
 * `css_classes`. Alle Regeln wirken auf die Klasse selbst und ihren Inhalt, egal wo sie sitzt.
 * Farben wie die Seite: Überschriften, Kicker, Linien, Rahmen und Ziffernkreise in Gold #C9952A,
 * Fließtext erbt die Textfarbe der Seite (keine eigene Textfarbe).
 * Ohne diese Datei bleibt der Inhalt normaler Text: keine Shortcodes, keine Klammern.
 */

/* 4.1 Faktenbox „Auf einen Blick“: Text-Editor mit Zwischenüberschrift und Liste.
   Jeder Punkt beginnt fett: „<strong>Wann und wo:</strong> …“, das Fette wird zum Label. */
.rok-fakten{
  background:var(--rok-weiss);
  border-top:3px solid var(--rok-gold);border-radius:0 0 var(--rok-radius) var(--rok-radius);
  box-shadow:0 10px 30px rgba(44,62,80,.08);
  padding:clamp(1.25rem,.9rem + 1.6vw,2rem);
  font-size:var(--rok-fs-text);line-height:1.6;
}
.rok-fakten :is(h2,h3,h4,.elementor-heading-title){
  font-family:var(--rok-sans)!important;font-size:var(--rok-fs-h3)!important;font-weight:700!important;
  line-height:1.3!important;letter-spacing:normal!important;text-transform:none!important;color:var(--rok-gold)!important;margin:0 0 1rem!important;
}
.rok-fakten ul{list-style:none;margin:0;padding:0;display:grid;gap:1rem 2.5rem}
@media (min-width:768px){.rok-fakten ul{grid-template-columns:1fr 1fr}}
.rok-fakten li{margin:0;padding-left:1.1rem;position:relative}
.rok-fakten li::before{content:"";position:absolute;left:0;top:.35rem;width:6px;height:6px;border-radius:50%;background:var(--rok-gold)}
.rok-fakten li > strong:first-child{
  display:block;margin-bottom:.15rem;
  font-size:var(--rok-fs-kicker);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rok-gold);
}
.rok-fakten p:last-child{margin-bottom:0}

/* 4.2 Schrittfolge: Text-Editor mit nummerierter Liste (<ol>). Ziffern weiß im Goldkreis wie die
   Goldknöpfe der Seite, Verbindungslinie in Gold. */
.rok-schritte :is(h2,h3,h4),.rok-aufklapper :is(h2,h3,h4){color:var(--rok-gold)}
.rok-schritte ol{list-style:none;counter-reset:rok-schritt;margin:0;padding:0}
.rok-schritte ol > li{counter-increment:rok-schritt;position:relative;margin:0;padding:.3rem 0 1.75rem 3.5rem;min-height:3rem}
.rok-schritte ol > li::before{
  content:counter(rok-schritt);position:absolute;left:0;top:0;
  width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;
  background:var(--rok-gold);color:#fff;font-family:var(--rok-sans);font-weight:700;font-size:1.05rem;line-height:1;
  box-shadow:0 0 0 3px var(--rok-creme),0 0 0 4px var(--rok-gold);
}
.rok-schritte ol > li::after{content:"";position:absolute;left:calc(1.125rem - 1px);top:2.75rem;bottom:.35rem;width:2px;background:var(--rok-gold)}
.rok-schritte ol > li:last-child{padding-bottom:0}
.rok-schritte ol > li:last-child::after{display:none}
.rok-schritte li > strong:first-child{display:block;font-size:1.05em}

/* 4.3 Aufklapper: <details>/<summary> im Text-Editor, Elementor-Akkordeon oder Umschalter.
   Titel sprechend formulieren („Wie bekreuzigt man sich?“), nie „Mehr erfahren“.
   Titelzeile wie die FAQ auf der Glaube-Seite: Textfarbe der Seite, halbfett; Plus und Linien Gold. */
.rok-aufklapper details{border-bottom:1px solid var(--rok-gold);margin:0}
.rok-aufklapper details:first-of-type{border-top:1px solid var(--rok-gold)}
.rok-aufklapper summary,.rok-aufklapper .elementor-tab-title{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:44px;padding:1rem 0;font-weight:600;
}
.rok-aufklapper summary::-webkit-details-marker{display:none}
.rok-aufklapper summary:not(.e-n-accordion-item-title)::after{
  content:"+";flex:none;color:var(--rok-gold);font-size:1.6em;font-weight:400;line-height:1;transition:transform .3s var(--rok-ease);
}
.rok-aufklapper details[open] > summary:not(.e-n-accordion-item-title)::after{transform:rotate(45deg)}
.rok-aufklapper summary:hover{text-decoration:underline;text-decoration-color:var(--rok-gold);text-underline-offset:.25em}
.rok-aufklapper details > :not(summary){padding-bottom:1.25rem;margin-top:0}
.rok-aufklapper details[open] > :not(summary){animation:rok-aufklappen .35s var(--rok-ease)}
@keyframes rok-aufklappen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* 4.4 Bibelzitat zweisprachig (Hausregel: immer beide, gleich groß).
   Text-Editor: <p lang="de">„…“</p><p lang="ru">«…»</p><p><cite>Johannes 1,46 · Ин. 1:46</cite></p> */
.rok-bibel{
  background:var(--rok-creme);text-align:center;
  padding:clamp(2rem,1.4rem + 2.6vw,3.5rem) clamp(1.25rem,.5rem + 3vw,3rem);
  border-top:1px solid var(--rok-gold);border-bottom:1px solid var(--rok-gold);
}
.rok-bibel::before{content:"";display:block;width:40px;height:2px;background:var(--rok-gold);margin:0 auto 1.5rem}
.rok-bibel :is(p,blockquote){
  font-family:var(--rok-sans);font-style:italic;font-weight:400;font-size:var(--rok-fs-h3);line-height:1.45;
  margin:0 auto .75rem;max-width:34ch;border:0;padding:0;
}
.rok-bibel [lang] + [lang]::before{
  content:"";display:block;width:7px;height:7px;margin:0 auto 1rem;background:var(--rok-gold);transform:rotate(45deg);
}
.rok-bibel cite{
  display:block;margin-top:1.25rem;font-family:var(--rok-sans);font-style:normal;font-weight:600;
  font-size:var(--rok-fs-kicker);letter-spacing:.08em;text-transform:uppercase;color:var(--rok-gold);
}
.rok-bibel p:has(> cite:only-child){font-size:inherit;margin-bottom:0}

/* 4.5 Hinweis „Gut zu wissen“: Text-Editor, erste Zeile fett oder Zwischenüberschrift. */
.rok-hinweis{
  position:relative;background:var(--rok-weiss);
  border-left:4px solid var(--rok-gold);border-radius:0 var(--rok-radius) var(--rok-radius) 0;
  padding:1.25rem 1.5rem 1.25rem 3.75rem;font-size:var(--rok-fs-text);line-height:1.6;
}
.rok-hinweis::before{
  content:"i";position:absolute;left:1.1rem;top:1.25rem;width:1.6rem;height:1.6rem;border-radius:50%;
  display:grid;place-items:center;border:2px solid var(--rok-gold);color:var(--rok-gold);
  font-family:var(--rok-sans);font-style:normal;font-weight:700;font-size:1rem;line-height:1;
}
#content .rok-hinweis :is(h2,h3,h4,.elementor-heading-title){
  font-family:var(--rok-sans)!important;font-size:var(--rok-fs-text)!important;font-weight:700!important;color:var(--rok-gold)!important;margin:0 0 .35rem!important;
}
.rok-hinweis > strong:first-child,.rok-hinweis p:first-child > strong:first-child{color:var(--rok-gold)}
.rok-hinweis p:last-child{margin-bottom:0}

/* 5 · Reduzierte Bewegung -----------------------------------------------------------------
   Keine Animation wird abgeschaltet, sondern auf 1 ms verkürzt: Elemente, die unsichtbar starten
   und per Animation erscheinen (Kalendertage, Buchstaben), landen so sofort im Endzustand.
   Endlosschleifen (drehender Spenden-Rahmen, Herzschlag, hüpfender Pfeil) laufen genau einmal. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:1ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
    transition-duration:1ms!important;transition-delay:0s!important;scroll-behavior:auto!important;
  }
  #content *{background-attachment:scroll!important}
}

/* 6 · Druck -------------------------------------------------------------------------------- */
@media print{
  *,*::before,*::after{animation:none!important;transition:none!important}
  .elementor-invisible,.rok-char,.rok-cal-day,.rok-gradual-spacing .elementor-heading-title{opacity:1!important;visibility:visible!important;transform:none!important}
  details > *{display:block}
  details::details-content{content-visibility:visible!important;display:block!important;height:auto!important}
  .elementor-tab-content,.e-n-accordion-item > [role="region"]{display:block!important}
  .rok-aufklapper summary::after{display:none!important}
  .rok-fakten,.rok-hinweis,.rok-bibel,.rok-schritte li{box-shadow:none!important;break-inside:avoid}
  .rok-fakten,.rok-bibel,.rok-hinweis{background:#fff!important}
  .elementor-background-video-container{display:none!important}
}