/* Evangelisches Brevier – Aussehen
 *
 * Inhalt:
 *   1. Schrift (Junicode 2) und Farben
 *   2. Tagesseite: Textspalte, Kopfzeile mit Datum, Blättern am Ende
 *   3. Die Texte (Klassen aus den HTML-Bausteinen)
 *   4. Menüknopf und Menü
 *   5. Unterseiten und die Listen der Seiten Wochen und Gedenktage
 *   6. Bewegung der Knöpfe beim Überfahren und Drücken
 *   7. Titelbild (Logo und Name groß, beim Antippen des Menükopfs)
 *
 * Farben, Textgrößen und Knöpfe der übrigen Seiten stehen in den Einstellungen
 * des Foundation-Themes im Stacks-Projekt, nicht hier.
 */

/* ---------- 1. Schrift und Farben ---------- */

@font-face {
  font-family: "Junicode 2";
  src: url("schrift/JunicodeVF-Roman.woff2") format("woff2");
  font-weight: 300 700; font-stretch: 75% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Junicode 2";
  src: url("schrift/JunicodeVF-Italic.woff2") format("woff2");
  font-weight: 300 700; font-stretch: 75% 125%; font-style: italic; font-display: swap;
}

:root {
  --eb-tinte: #222222;
  --eb-hauch: #f1f1ef;          /* grauer Hauch: Knöpfe, Hinterlegung */
  --eb-hauch-dunkel: #e7e7e4;   /* dasselbe beim Überfahren */
  --eb-linie: #dcdcd8;
  --eb-violett: rgba(102, 0, 204, .7);   /* Trennlinien (Seite und Menü): #6600cc, leicht durchscheinend, damit 1 px feiner wirkt */
  --eb-grau: #6a6a66;
  --eb-glas: rgba(255, 255, 255, .44);
  --eb-glasrand: rgba(0, 0, 0, .09);                         /* feiner Rand der schwebenden Knöpfe */
  --eb-schatten: 0 1px 5px rgba(0, 0, 0, .12);               /* schwebender Knopf in Ruhe */
  --eb-schatten-hoch: 0 4px 12px rgba(0, 0, 0, .18);         /* Maus darüber: hebt sich */
  --eb-schatten-gedrueckt: 0 0 3px rgba(0, 0, 0, .22);       /* gedrückt */
  --eb-schrift: "Junicode 2", "Times New Roman", Times, Baskerville, Georgia, serif;
  --eb-rand: 16px;              /* Seitenrand der Textspalte */
  --eb-einzug: clamp(1.5em, 8vw, 2.4em);
  --eb-gross: 1;                /* Schriftgröße A−/A+ (setzt brevier.js) */
  /* Schriftgröße des Tagestexts (wächst mit der Bildschirmbreite) und Höchstbreite der Seite.
     Nach der Höchstbreite richtet sich auch der Menüknopf (Teil 4). */
  --eb-textgroesse: calc(clamp(19px, 14.6px + 1.15vw, 25px) * var(--eb-gross));
  --eb-spalte: calc(37 * var(--eb-textgroesse));
  /* Weißer Rand unter der Zeile mit Vortag und Folgetag am Ende der Tagesseite (am Handy kleiner, siehe unten). */
  --eb-blatt-unten: calc(2 * var(--eb-textgroesse));
  /* Abstand des Pfeils nach oben (Teil 4) vom unteren Fensterrand. So gerechnet, dass er am Ende der
     Tagesseite genau auf der Höhe von Vortag und Folgetag steht: Rand unter dem Blatt
     + halbe Höhe der Zeile mit den Tagen − halbe Höhe des Pfeils (20 px). */
  --eb-pfeil-unten: calc(env(safe-area-inset-bottom, 0px) + var(--eb-blatt-unten) + max(22px, 1.125 * var(--eb-textgroesse)) - 20px);
}
@media (max-width: 639px) {   /* Handy hochkant: kleinerer Rand unten, dadurch schwebt auch der Pfeil tiefer */
  :root { --eb-blatt-unten: calc(1.2 * var(--eb-textgroesse)); }
}
@media (orientation: landscape) and (max-height: 500px) {   /* Handy quer */
  :root { --eb-textgroesse: calc(19px * var(--eb-gross)); --eb-spalte: calc(46 * var(--eb-textgroesse)); }
}
:root:has(.eb-seite) { --eb-spalte: 46rem; }   /* Unterseiten */

/* Junicode überall; gerade Ziffern, damit die 11 nicht wie II aussieht */
body, h1, h2, h3, h4, h5, h6, button, input, .button, .menu {
  font-family: var(--eb-schrift);
  font-variant-numeric: lining-nums;
  font-synthesis: none;
}
body { font-weight: 350; }

/* Unterstreichung der Links. Das Theme schreibt für „Underline Links" den ungültigen Wert „True" in die
   Seite; hier stehen die gültigen Werte: im Text der Unterseiten und im Tagestext fein unterstrichen,
   überall sonst (Menü, Knöpfe) nicht. */
body { --link-decoration: none; --link-decoration-hover: none; }
.eb-seite, .eb-text { --link-decoration: underline; --link-decoration-hover: underline; }
.eb-seite a, .eb-text a { text-decoration-thickness: 1px; text-underline-offset: .18em; }


/* ---------- 2. Tagesseite ---------- */

/* Eine einzige Textspalte ohne Rahmen. Die Größe wächst mit der Bildschirmbreite. */
.eb-blatt {
  box-sizing: border-box;
  max-width: var(--eb-spalte);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) max(var(--eb-rand), env(safe-area-inset-right, 0px))
           calc(env(safe-area-inset-bottom, 0px) + var(--eb-blatt-unten)) max(var(--eb-rand), env(safe-area-inset-left, 0px));
  font-size: var(--eb-textgroesse);
  line-height: 1.5;
  color: var(--eb-tinte);
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.eb-blatt *, .eb-blatt *::before, .eb-blatt *::after { box-sizing: border-box; }
.eb-blatt a:focus-visible, .eb-datum:focus-within { outline: 2px solid #555; outline-offset: 2px; }

/* Kopfzeile: Datum mit Pfeilen, daneben die weiteren Texte. Scrollt mit dem Text weg.
   Rechts bleibt Platz für den schwebenden Menüknopf. */
.eb-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3em .8em;
  min-height: 44px; padding-right: 50px; margin-bottom: 1em;
  font-size: .9em; line-height: 1.3;
}
@media (min-width: 640px) { .eb-kopf { justify-content: space-between; } }
/* Der negative Rand unten senkt das Datum in der Zeile um die Hälfte ab (sitzt sonst optisch höher
   als der Knopf daneben) und rückt am Handy Datum und Knopf enger zusammen. */
.eb-tagwahl { display: flex; align-items: center; margin-left: -10px; margin-bottom: -.3em; }
.eb-pfeil {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  font-size: 1.45em; line-height: 1; padding: 0 0 .12em; color: inherit; text-decoration: none;
}
.eb-pfeil:hover, .eb-datum:hover { background: var(--eb-hauch); color: inherit; }
.eb-kopf .eb-datum {
  position: relative; display: inline-block; margin: 0; padding: .3em .45em; border-radius: .5em;
  font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit;
  white-space: nowrap; cursor: pointer;
}
.eb-kopf .eb-datum input[type="date"] {   /* unsichtbar über dem Datum: Antippen öffnet den Kalender */
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  opacity: 0; cursor: pointer;
}
.eb-lang { display: none; }
@media (min-width: 480px) { .eb-kurz { display: none; } .eb-lang { display: inline; } }

/* Weitere Texte des Tages (Gedenktag, zweite Fassung): Knöpfe. Hier stehen Form und Schrift.
   In der Kopfzeile sind sie weiß und schweben wie der Menüknopf; im Menü sind sie grau wie die
   Knöpfe dort (Teil 4). Die Bewegung beim Überfahren und Drücken steht in Teil 6. */
.eb-weitere { display: flex; flex-wrap: wrap; gap: .35em .5em; }
.eb-alternative {
  display: inline-block; padding: .4em .9em; border-radius: 1.3em;
  line-height: 1.3; color: var(--eb-tinte); text-decoration: none;
}
.eb-alternative:hover, .eb-alternative:focus { color: var(--eb-tinte); }
.eb-kopf .eb-alternative {
  background: var(--eb-glas); border: 1px solid var(--eb-glasrand); box-shadow: var(--eb-schatten);
}
@media (min-width: 640px) {   /* neben dem Menüknopf: gleiche Höhe wie er (44 px) */
  .eb-kopf .eb-alternative { display: inline-flex; align-items: center; min-height: 44px; padding: .15em .9em; }
}

/* Blättern am Textende */
.eb-fuss {
  display: flex; justify-content: space-between; gap: 1em;
  margin-top: 2.6em; padding-top: .9em; border-top: 1px solid var(--eb-violett); font-size: .9em;
}
.eb-fuss a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .5em .7em; border-radius: .5em;
  color: inherit; text-decoration: none;
}
.eb-fuss a:hover { background: var(--eb-hauch); color: inherit; }


/* ---------- 3. Die Texte ---------- */
/* Klassen aus den HTML-Bausteinen (Skripte/pages_nach_html.py):
   b Block · titel erste Zeile · z zentriert · re rechts · e eingerückt · h hängender Einzug ·
   v Verszeile · pr Fließtext · ruf Zeile mit Marke davor · rechts Quelle am rechten Rand ·
   kc Kapitälchen · m fett-kursiv */

.eb-text { border-top: 1px solid var(--eb-violett); padding-top: 1em; }   /* violette Trennlinie zwischen Kopfzeile und Text */
.eb-text p { margin: 0; font-size: inherit; line-height: inherit; }
.eb-text .b { margin-top: 1.5em; }
.eb-text .b:first-child { margin-top: 0; }
.eb-text .titel {
  margin: 0; font-family: inherit; font-size: 1em; font-weight: inherit; line-height: 1.4;
  color: inherit; text-align: center; text-wrap: balance;
}
.eb-text b { font-weight: 700; }
.eb-text i { font-style: italic; }
.eb-text .m { font-style: italic; font-weight: 600; }
.eb-text .kc { font-variant-caps: small-caps; letter-spacing: .04em; }
.eb-text .z { text-align: center; text-wrap: balance; }
.eb-text .re { text-align: right; }
.eb-text .pr { text-align: left; -webkit-hyphens: auto; hyphens: auto; }   /* Flattersatz mit Silbentrennung */
.eb-text .e { padding-left: var(--eb-einzug); }
.eb-text .h { padding-left: var(--eb-einzug); text-indent: calc(-1 * var(--eb-einzug)); }
.eb-text .v { padding-left: 1.3em; text-indent: -1.3em; }                  /* umbrochene Verszeile hängt ein */
.eb-text .e.v { padding-left: calc(var(--eb-einzug) + 1.3em); }
.eb-text .ruf {                                                             /* Marke (R:, G:, Lied) + Text */
  display: grid; grid-template-columns: minmax(var(--eb-einzug), max-content) 1fr; column-gap: .3em;
}
.eb-text .rechts { float: right; margin-left: 1em; }
/* Passt der Zusatz am rechten Rand nicht mehr in die letzte Zeile, rutscht er eine Zeile tiefer.
   Der nächste Absatz beginnt dann darunter, nicht daneben; der Block endet erst unter dem Zusatz. */
.eb-text p { clear: both; }
.eb-text .b::after { content: ""; display: block; clear: both; }
.eb-text sup { font-size: .7em; line-height: 0; }


/* ---------- 4. Menüknopf und Menü ---------- */
/* Gebaut im Stacks-Projekt (Brevier-Layout) aus Foundation-Stacks. Hier steht nur, was die
   Einstellungen der Stacks nicht können. Die Farbe der Knöpfe (Primary) und die Rundung (Radius)
   kommen aus den Einstellungen des Foundation-Themes. */

/* Menüknopf: Stack „Hamburger" (button.menu-icon) mit der Klasse eb-knopf.
   Runde Glasscheibe, schwebt oben rechts – auf breiten Bildschirmen am rechten Rand der
   Seitenspalte (--eb-spalte), nicht am Fensterrand. Die drei Striche zeichnet Foundation;
   hier stehen ihre Maße und ihre Lage in der Mitte der Scheibe. */
.menu-icon.eb-knopf {
  --hamburger-width: 18px; --hamburger-height: 13.5px; --hamburger-weight: 1.5px;
  position: fixed; z-index: 10;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: max(calc(env(safe-area-inset-right, 0px) + 10px), calc((100% - var(--eb-spalte)) / 2 + var(--eb-rand)));
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--eb-glasrand); background: var(--eb-glas);
  -webkit-backdrop-filter: blur(9px) saturate(1.6); backdrop-filter: blur(9px) saturate(1.6);
  box-shadow: var(--eb-schatten);
}
.menu-icon.eb-knopf::after {
  top: calc(50% - var(--hamburger-height) / 2); left: calc(50% - var(--hamburger-width) / 2);
  width: var(--hamburger-width);
}

/* Pfeil nach oben: Stack „Scroll Page" im Brevier-Layout. Form, Größe (40 px, ohne Rand), Farbe des Winkels
   und der Punkt, ab dem er erscheint (300 px), stehen in den Einstellungen des Stacks. Hier steht nur, was
   der Stack nicht kann:
   - Glas und Schatten wie beim Menüknopf (der Stack kennt keine durchscheinenden Farben),
   - die Höhe über dem Fensterrand (--eb-pfeil-unten, Teil 1),
   - die Mitte: der Stack setzt den Pfeil 10 px zu weit nach rechts (er rechnet den Innenabstand nicht mit),
   - die Ebene: der Stack legt ihn sonst über das geöffnete Menü.
   Wer im Stack Size oder Padding ändert, muss hier die 10 px und in Teil 1 die 20 px (halbe Größe) anpassen. */
#ncd-sp-arrow.bc {
  z-index: 9; left: calc(50% - 10px); margin-bottom: var(--eb-pfeil-unten);
  background: var(--eb-glas);
  -webkit-backdrop-filter: blur(9px) saturate(1.6); backdrop-filter: blur(9px) saturate(1.6);
  box-shadow: var(--eb-schatten); cursor: pointer;
}

/* Menü: Stack „Off Canvas Panel" mit der Klasse eb-menue. Breite, Richtung und das Schließen
   beim Antippen der Seite stehen in den Einstellungen der Stacks. */
.off-canvas.eb-menue {
  padding: calc(env(safe-area-inset-top, 0px) + 12px) calc(env(safe-area-inset-right, 0px) + 16px) 24px 20px;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-size: 18px; line-height: 1.35;
}
.off-canvas.eb-menue.is-open { box-shadow: -6px 0 24px rgba(0, 0, 0, .14); }
/* Farbe der Menü-Knöpfe beim Überfahren. Das Theme macht sie auf zwei Wegen dunkler, für beide gibt es
   keine Einstellung: Es errechnet aus „Primary" einen dunkleren Ton (#D3D3D1) und legt in Knopfgruppen
   zusätzlich einen Filter darüber (85 % Helligkeit). Hier derselbe Ton wie bei den anderen Knöpfen, ohne Filter. */
.eb-menue { --primary-dark: var(--eb-hauch-dunkel); }
.eb-menue .button-group .button:hover, .eb-menue .button-group .button:focus { filter: none; }
.js-off-canvas-overlay { background: rgba(0, 0, 0, .2); }   /* Schleier über der Seite */

/* Menükopf (Container eb-m-kopf): Logo, Name und Schließen-Knopf in einer Zeile */
.eb-m-kopf { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.eb-m-name { flex: 1; font-weight: 600; }
.close-button.eb-m-zu {
  position: static; width: 44px; height: 44px; margin-right: -6px; border-radius: 50%;
  font-size: 26px; color: var(--eb-tinte);
}
.close-button.eb-m-zu:hover { background: var(--eb-hauch); }

/* Abschnitte des Menüs: feine violette Linie darüber */
.eb-m-tag, .eb-m-seiten, .eb-m-schrift { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--eb-violett); }

/* Knöpfe im Menü (Stack „Button Group"): einzeln mit Abstand statt aneinandergesetzt */
.eb-menue .button-group { gap: 8px; }
.eb-menue .button-group::before, .eb-menue .button-group::after { display: none; }   /* sonst zählen sie beim Abstand mit */
.eb-menue .button-group .button {
  min-height: 44px; margin: 0; padding: 8px 10px; border-radius: var(--radius); white-space: nowrap;
}

/* Datum wählen und die weiteren Texte des Tages (HTML-Stack im Menü; die Knöpfe setzt brevier.js ein) */
.eb-m-datum {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 8px 0; font-size: 16px; line-height: 1.35; color: var(--eb-grau);
}
.eb-m-datum input[type="date"] {
  width: auto; height: auto; min-height: 44px; margin: 0; padding: 8px 10px;
  border: 1px solid var(--eb-linie); border-radius: var(--radius); box-shadow: none; color: var(--eb-tinte);
}
.eb-m-weitere { display: flex; flex-direction: column; gap: 8px; }
.eb-m-weitere .eb-alternative { padding: 11px 14px; border-radius: var(--radius); font-size: 16px; background: var(--eb-hauch); }
.eb-m-weitere .eb-alternative:hover, .eb-m-weitere .eb-alternative:focus { background: var(--eb-hauch-dunkel); }

/* Seitenliste (Stack „Menu" mit der Klasse eb-m-seiten) */
.eb-m-seiten a { padding: 13px 6px; border-radius: 8px; }
.eb-m-seiten a:hover { background: var(--eb-hauch); }

/* Schriftgröße (Container eb-m-schrift): Wort links, die beiden Knöpfe rechts */
.eb-m-schrift { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.eb-m-schrift p { color: var(--eb-grau); }
.eb-m-schrift .button-group { flex-grow: 0; }
.eb-m-schrift .button { width: 52px; }


/* ---------- 5. Unterseiten und Listen ---------- */

/* Inhalt der Unterseiten: Container mit der Klasse eb-seite. Schmale Spalte wie die Tagesseite;
   die Überschrift lässt rechts Platz für den Menüknopf. */
.eb-seite {
  max-width: var(--eb-spalte); margin-left: auto; margin-right: auto; padding-top: 14px;
  padding-bottom: calc(var(--eb-pfeil-unten) + 40px + 1rem);   /* Platz für den Pfeil nach oben unter der letzten Zeile */
}
.eb-seite h1 { padding-right: 50px; }
/* Zwischenüberschriften im Text wie im Tagestext: fett in Textgröße (nicht die Kopfzeilen der SqueezeBox) */
.eb-seite :not(.sb-item) > h2, .eb-seite :not(.sb-item) > h3, .eb-seite :not(.sb-item) > h4 { margin-top: 1.4em; font-weight: 700; }

/* Listen auf den Seiten Wochen und Gedenktage (kommen aus seite.php) */

.eb-liste { margin: 0; padding: 0; list-style: none; }
.eb-woche { margin: 0 0 .9em; }
.eb-woche p { margin: 0; }
.eb-woche-name { font-weight: 700; }
.eb-tage a, .eb-gedenktage a {
  display: inline-block; margin: .2em .25em .1em 0; padding: .2em .7em;
  background: var(--eb-hauch); border-radius: 999px; color: var(--eb-tinte); text-decoration: none;
}
.eb-tage a:hover, .eb-gedenktage a:hover { background: var(--eb-hauch-dunkel); color: var(--eb-tinte); }
@media (min-width: 640px) { .eb-tage { font-size: .85em; } }   /* die sieben Wochentage passen in eine Zeile */
.eb-gedenktage li { margin: 0; }
.eb-gedenktage a { display: block; border-radius: 10px; margin: 0 0 .35em; padding: .35em .8em; }
.eb-wann { color: var(--eb-grau); margin-right: .4em; }


/* ---------- 6. Bewegung der Knöpfe ---------- */
/* Gilt für die Knöpfe der weiteren Texte, den Menüknopf und die Knöpfe im Menü:
   Maus darüber = der Knopf hebt sich, der Schatten wird größer; gedrückt = er sinkt zurück. */

.eb-alternative, .menu-icon.eb-knopf, .eb-menue .button-group .button {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
@media (hover: hover) {   /* nur mit Maus; am Handy bliebe der Zustand nach dem Antippen hängen */
  .eb-alternative:hover, .menu-icon.eb-knopf:hover, .eb-menue .button-group .button:hover {
    transform: translateY(-1px); box-shadow: var(--eb-schatten-hoch);
  }
}
.eb-alternative:active, .menu-icon.eb-knopf:active, .eb-menue .button-group .button:active {
  transform: scale(.97); box-shadow: var(--eb-schatten-gedrueckt); transition-duration: .06s;
}
@media (prefers-reduced-motion: reduce) {   /* wer am Gerät „Bewegung reduzieren" eingestellt hat */
  .eb-alternative, .menu-icon.eb-knopf, .eb-menue .button-group .button { transition: none; }
}


/* ---------- 7. Titelbild ---------- */
/* Erscheint beim Antippen von Logo oder Name im Menükopf (baut brevier.js): weiße Fläche über allem,
   in der Mitte Logo, Name, Linie und Untertitel – wie das Vorschaubild für Suchmaschinen und Messenger.
   Alle Maße hängen an einer einzigen Breite (--eb-tb): am Handy die Bildschirmbreite mit schmalem Rand,
   am Handy quer richtet sie sich nach der Höhe, auf großen Bildschirmen wächst sie nur bis 640 px. */

.eb-m-kopf .eb-logo, .eb-m-kopf .eb-m-name { cursor: pointer; }

.eb-titelbild {
  --eb-tb: min(100vw - 40px, 105vh, 640px);
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: #fff; color: var(--eb-tinte); cursor: pointer;
  font-size: calc(var(--eb-tb) / 8.3);           /* Größe des Namens; er füllt damit die Breite --eb-tb */
  line-height: 1.2; text-align: center; white-space: nowrap;
  opacity: 0; transition: opacity .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.eb-titelbild.eb-offen { opacity: 1; }
.eb-titelbild svg { display: block; width: 3.6em; height: auto; margin: 0 auto .45em; }
@media (orientation: portrait) and (max-width: 520px) {   /* Handy hochkant: Logo und Untertitel größer */
  .eb-titelbild svg { width: 4.8em; }
  .eb-titelbild-unter { font-size: .44em; }
}
.eb-titelbild-name { margin: 0; font-size: 1em; font-weight: 350; line-height: 1.2; }
.eb-titelbild-name::after {                      /* violette Linie zwischen Name und Untertitel */
  content: ""; display: block; width: 6.7em; height: max(1px, .02em); margin: .42em auto .36em; background: var(--eb-violett);
}
.eb-titelbild-unter { margin: 0; font-size: .385em; line-height: 1.3; color: var(--eb-grau); }
@media (prefers-reduced-motion: reduce) { .eb-titelbild { transition: none; } }