/* ── Fonts (self-hosted, SIL OFL 1.1; licenses in ../fonts/) ─────────────
   Inter variable and Literata from @fontsource-variable/inter 5.2.8 and @fontsource/literata 5.2.8, latin subset
   (covers German umlauts, ß and typographic quotes). No Google Fonts request, so the Datenschutz page, which
   names only Matomo, stays accurate. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/literata-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/literata-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/literata-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────
   --er-* = the e-rhema design tokens of the default (purple) theme. This theme has no access to the app's SCSS,
   so the values are copied from src/theme/variables.scss (light) and src/theme/dark-theme.scss (dark); the
   gradients are the app's $gradient-background and its dark body gradient. Keep in sync by hand.
   --site-* = layout scale of this site (the app's 4px spacing grid and radius scale).
   Dark: the system scheme unless the nav toggle stored «light» ([data-theme="light"]), or the toggle's «dark»
   ([data-theme="dark"], ERH-334). CSS cannot share one block between a media query and a selector, so the two
   dark blocks below hold the same values: change both together. */
:root {
  color-scheme: light;
  --er-bg: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  --er-page: #f9f9f9;
  --er-panel: #ffffff;
  --er-tile: #f3f4f6;
  --er-ink: #1f2937;
  --er-ink-2: #6b7280;
  --er-ink-3: #9ca3af;
  --er-line: #e5e7eb;
  --er-acc: #667eea;
  --er-acc-ink: #4c5bd4;
  --er-on-acc: #ffffff;
  --er-acc-soft: rgba(102, 126, 234, 0.1);
  --er-chrome: rgba(255, 255, 255, 0.14);
  --er-chrome-line: rgba(255, 255, 255, 0.24);
  --er-hero-ink: #ffffff;
  --er-shadow: 0 8px 32px rgba(31, 41, 55, 0.12);
  --er-sync: rgba(245, 184, 0, 0.16);
  --er-sync-bar: #f5b800;
  --er-sync-ink: #6b4400;

  --site-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --site-font-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --site-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --site-space-xs: 4px;
  --site-space-sm: 8px;
  --site-space-md: 12px;
  --site-space-lg: 16px;
  --site-space-xl: 20px;
  --site-space-2xl: 24px;
  --site-space-3xl: 32px;
  --site-space-4xl: 48px;
  --site-radius-sm: 6px;
  --site-radius-md: 8px;
  --site-radius-lg: 12px;
  --site-radius-xl: 16px;
  --site-radius-sheet: 28px;
  --site-radius-full: 999px;
  --site-gutter: clamp(16px, 5vw, 72px);
  --site-max: 1200px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --er-bg: linear-gradient(135deg, #1a1f3a 0%, #2a1f3a 50%, #3a2f4a 100%);
    --er-page: #1f1a36;
    --er-panel: #262638;
    --er-tile: rgba(255, 255, 255, 0.06);
    --er-ink: #f1f5f9;
    --er-ink-2: #94a3b8;
    --er-ink-3: #64748b;
    --er-line: rgba(255, 255, 255, 0.1);
    --er-acc: #8b9cf6;
    --er-acc-ink: #a5b2fa;
    --er-on-acc: #14162b;
    --er-acc-soft: rgba(139, 156, 246, 0.14);
    --er-chrome: rgba(20, 22, 43, 0.35);
    --er-chrome-line: rgba(255, 255, 255, 0.1);
    --er-hero-ink: #f1f5f9;
    --er-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --er-sync: rgba(255, 204, 0, 0.14);
    --er-sync-bar: #facc15;
    --er-sync-ink: #f2e4b0;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --er-bg: linear-gradient(135deg, #1a1f3a 0%, #2a1f3a 50%, #3a2f4a 100%);
  --er-page: #1f1a36;
  --er-panel: #262638;
  --er-tile: rgba(255, 255, 255, 0.06);
  --er-ink: #f1f5f9;
  --er-ink-2: #94a3b8;
  --er-ink-3: #64748b;
  --er-line: rgba(255, 255, 255, 0.1);
  --er-acc: #8b9cf6;
  --er-acc-ink: #a5b2fa;
  --er-on-acc: #14162b;
  --er-acc-soft: rgba(139, 156, 246, 0.14);
  --er-chrome: rgba(20, 22, 43, 0.35);
  --er-chrome-line: rgba(255, 255, 255, 0.1);
  --er-hero-ink: #f1f5f9;
  --er-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --er-sync: rgba(255, 204, 0, 0.14);
  --er-sync-bar: #facc15;
  --er-sync-ink: #f2e4b0;
}

/* ── Base ───────────────────────────────────────────────────────────────
   The gradient shows behind the nav and above the rounded page sheet (#start); spectre's white body and
   grey text are replaced. */
html {
  background: var(--er-page);
}

body {
  font-family: var(--site-font);
  color: var(--er-ink);
  background-color: var(--er-page);
  background-image: var(--er-bg);
  background-repeat: no-repeat;
  background-size: 100% 520px;
}

a {
  color: var(--er-acc-ink);
}

a:hover,
a:focus {
  color: var(--er-acc);
}

h1,
h2,
h3 {
  font-family: var(--site-font);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--er-ink);
}

.site-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-sm);
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
}

.site-brand img {
  width: 28px;
  height: 28px;
  flex: none;
}

/* ── Nav (all pages) ────────────────────────────────────────────────────
   Glass over the gradient; solid panel once the page is scrolled (.is-scrolled, inline script in base.html.twig). */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-sm) var(--site-space-xl);
  padding: var(--site-space-md) var(--site-gutter);
  color: var(--er-hero-ink);
  background: var(--er-chrome);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--er-chrome-line);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.site-nav.is-scrolled {
  color: var(--er-ink);
  background: var(--er-panel);
  border-bottom-color: var(--er-line);
  box-shadow: var(--er-shadow);
}

.site-nav a,
.site-nav a:hover,
.site-nav a:focus {
  color: inherit;
  text-decoration: none;
}

/* Brand and products sit left, the controls right: the anchor list between them changes per page, and pushing it all
   right made the Reader/Notes links jump between pages. */
.site-nav > .site-nav-group:last-child {
  margin-left: auto;
}

.site-nav-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-xs) var(--site-space-md);
}

.site-nav-product {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-xs);
  padding: var(--site-space-xs) var(--site-space-md);
  border-radius: var(--site-radius-full);
  font-size: 14px;
  font-weight: 600;
}

.site-nav-product:hover,
.site-nav-product.active {
  background: var(--er-chrome-line);
}

.site-nav.is-scrolled .site-nav-product:hover,
.site-nav.is-scrolled .site-nav-product.active {
  background: var(--er-acc-soft);
  color: var(--er-acc-ink);
}

.site-nav-link {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.85;
}

.site-nav-link:hover {
  opacity: 1;
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--site-space-xs);
}

.lang-switcher a,
.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--site-radius-full);
  border: 1px solid var(--er-chrome-line);
  font-size: 12px;
  font-weight: 700;
}

.site-nav.is-scrolled .lang-switcher a,
.site-nav.is-scrolled .site-theme-toggle {
  border-color: var(--er-line);
}

.site-nav .lang-switcher a.active,
.site-nav .lang-switcher a:hover,
.site-nav .site-theme-toggle:hover {
  color: var(--er-on-acc);
  background: var(--er-acc);
  border-color: var(--er-acc);
}

/* Light/dark toggle (ERH-334): the round pill of the language links as a button. It shows the scheme in use, like
   the reader's settings (sun = light, moon = dark). */
.site-theme-toggle {
  padding: 0;
  color: inherit;
  background: none;
  font: inherit;
  cursor: pointer;
}

.site-theme-toggle .site-icon {
  width: 16px;
  height: 16px;
}

/* An inline span sits the icon on the text baseline, 2px above the button's centre. */
.site-theme-toggle [data-theme-icon] {
  display: flex;
}

.site-theme-toggle [data-theme-icon="dark"],
:root[data-theme="dark"] .site-theme-toggle [data-theme-icon="light"] {
  display: none;
}

:root[data-theme="dark"] .site-theme-toggle [data-theme-icon="dark"] {
  display: flex;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-theme-toggle [data-theme-icon="light"] {
    display: none;
  }

  :root:not([data-theme="light"]) .site-theme-toggle [data-theme-icon="dark"] {
    display: flex;
  }
}

/* App menu: the grid button (styled like the theme toggle) opens the app tiles below it, as a panel in any nav
   state. */
.site-apps {
  position: relative;
}

.site-apps-menu {
  position: absolute;
  top: calc(100% + var(--site-space-sm));
  right: 0;
  width: 260px;
  padding: var(--site-space-sm);
  color: var(--er-ink);
  background: var(--er-panel);
  border: 1px solid var(--er-line);
  border-radius: var(--site-radius-xl);
  box-shadow: var(--er-shadow);
}

.site-apps-menu[hidden] {
  display: none;
}

/* App tiles (partials/app-tiles.html.twig): icon tile + name + one line, in the nav's app menu and the home hero. */
.app-tiles {
  display: grid;
  gap: var(--site-space-xs);
}

.app-tile,
.app-tile:hover,
.app-tile:focus {
  display: flex;
  align-items: center;
  gap: var(--site-space-md);
  padding: var(--site-space-sm);
  border-radius: var(--site-radius-lg);
  color: inherit;
  text-decoration: none;
}

.app-tile:hover {
  background: var(--er-acc-soft);
}

.app-tile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-tile-text strong {
  font-size: 15px;
  font-weight: 700;
}

.app-tile-text span {
  font-size: 13px;
  line-height: 1.4;
  opacity: 0.75;
}

/* In the hero the tiles sit side by side as glass cards on the gradient. */
.home-hero .app-tiles {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--site-space-md);
  max-width: 520px;
  margin-top: var(--site-space-3xl);
}

.home-hero .app-tile {
  padding: var(--site-space-md);
  background: var(--er-chrome);
  border: 1px solid var(--er-chrome-line);
}

.home-hero .app-tile:hover {
  background: var(--er-chrome-line);
}

/* The anchor list is a shortcut within long pages; on phones the nav keeps only brand, products, language, the
   theme toggle and the app menu, which wrap onto two rows. */
@media (max-width: 720px) {
  .site-nav-anchors {
    display: none;
  }
}

/* ── Buttons ────────────────────────────────────────────────────────────
   Prefixed `site-btn` — plain `.btn` collides with spectre's own global `.btn` (the form plugin's submit
   button). */
.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-sm);
  border-radius: var(--site-radius-full);
  font-weight: 600;
  font-size: 15px;
  padding: var(--site-space-md) var(--site-space-2xl);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.site-btn:hover {
  transform: translateY(-1px);
}

/* Migrate banner above the nav (ERH-315): shown by the handoff script in base.html.twig while this origin still
   holds the old app's data. display: flex would override the hidden attribute, so [hidden] is restated. */
.site-migrate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-sm) var(--site-space-lg);
  padding: var(--site-space-sm) var(--site-gutter);
  font-size: 14px;
  color: var(--er-ink);
  background: var(--er-panel);
  border-bottom: 1px solid var(--er-line);
}

.site-migrate[hidden] {
  display: none;
}

.site-migrate .site-btn,
.site-migrate .site-btn:hover,
.site-migrate .site-btn:focus {
  padding: var(--site-space-xs) var(--site-space-lg);
  font-size: 14px;
  color: var(--er-on-acc);
  background: var(--er-acc);
}

/* Section buttons on the gradient (partials/section-actions.html.twig): panel fill for the main action, glass for
   the others. */
.site-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-md);
  margin: var(--site-space-3xl) 0 0;
}

.site-btn-light,
.site-btn-light:hover,
.site-btn-light:focus {
  color: var(--er-acc-ink);
  background: var(--er-panel);
  box-shadow: var(--er-shadow);
}

.site-btn-glass,
.site-btn-glass:hover,
.site-btn-glass:focus {
  color: var(--er-hero-ink);
  background: var(--er-chrome);
  border: 1px solid var(--er-chrome-line);
}

/* «Bald verfügbar / Coming soon»: inline code in the wiki Markdown (page_sections(), theme.php). */
.site-soon {
  display: inline-block;
  padding: 0 var(--site-space-sm);
  border-radius: var(--site-radius-full);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--er-acc-ink);
  background: var(--er-acc-soft);
}

/* ── Page sheet and text-page card ──────────────────────────────────────
   #start / #body-wrapper / .container come from quark's base.html.twig. */
#start {
  margin-top: var(--site-space-3xl);
  background: var(--er-page);
  border-radius: var(--site-radius-sheet) var(--site-radius-sheet) 0 0;
}

#body-wrapper {
  padding-top: 0;
}

#body-wrapper .container {
  max-width: var(--site-max);
  padding: var(--site-space-3xl) var(--site-gutter) var(--site-space-4xl);
}

.site-card {
  max-width: 820px;
  margin: 0 auto;
  padding: var(--site-space-3xl) clamp(var(--site-space-lg), 4vw, var(--site-space-4xl));
  font-size: 16px;
  line-height: 1.7;
  color: var(--er-ink);
  background: var(--er-panel);
  border: 1px solid var(--er-line);
  border-radius: var(--site-radius-xl);
  box-shadow: var(--er-shadow);
  overflow-wrap: break-word;
}

.site-card > :first-child {
  margin-top: 0;
}

.site-card h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15;
  margin: 0 0 var(--site-space-xl);
}

.site-card h2 {
  font-size: 24px;
  line-height: 1.25;
  margin: var(--site-space-3xl) 0 var(--site-space-md);
}

.site-card h3 {
  font-size: 19px;
  line-height: 1.3;
  margin: var(--site-space-2xl) 0 var(--site-space-sm);
}

.site-card p,
.site-card ul,
.site-card ol,
.site-card table,
.site-card blockquote {
  margin: 0 0 var(--site-space-lg);
}

.site-card ul,
.site-card ol {
  list-style-position: outside;
  padding-left: var(--site-space-2xl);
}

.site-card li {
  margin-top: var(--site-space-xs);
}

.site-card em {
  color: var(--er-ink-2);
}

.site-card code {
  padding: 0 var(--site-space-xs);
  font-size: 0.9em;
  color: var(--er-ink);
  background: var(--er-tile);
  border-radius: var(--site-radius-sm);
}

.site-card blockquote {
  padding: var(--site-space-xs) var(--site-space-lg);
  font-family: var(--site-font-serif);
  font-style: italic;
  color: var(--er-ink-2);
  border-left: 3px solid var(--er-acc);
}

.site-card table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.site-card th,
.site-card td {
  padding: var(--site-space-sm) var(--site-space-md);
  text-align: left;
  border-bottom: 1px solid var(--er-line);
}

.site-card hr {
  margin: var(--site-space-2xl) 0;
  border: 0;
  border-top: 1px solid var(--er-line);
}

/* Kontakt form (Grav form plugin markup, spectre classes). */
.site-card .form-group {
  margin-bottom: var(--site-space-lg);
}

.site-card .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--er-ink);
}

.site-card .form-label .required {
  color: var(--er-acc-ink);
}

.site-card .form-input {
  width: 100%;
  height: auto;
  padding: var(--site-space-sm) var(--site-space-md);
  font: inherit;
  color: var(--er-ink);
  background: var(--er-page);
  border: 1px solid var(--er-line);
  border-radius: var(--site-radius-lg);
}

/* spectre marks an empty required field without a placeholder as invalid (orange) before anything is typed. */
.site-card .form-input:invalid {
  border-color: var(--er-line);
}

.site-card .form-input:focus,
.site-card .form-input:invalid:focus {
  background: var(--er-page);
  border-color: var(--er-acc);
  outline: 2px solid var(--er-acc);
  outline-offset: 1px;
  box-shadow: none;
}

.site-card textarea.form-input {
  min-height: 160px;
}

.site-card .btn,
.site-card .btn:hover,
.site-card .btn:focus {
  height: auto;
  padding: var(--site-space-md) var(--site-space-2xl);
  font: inherit;
  font-weight: 600;
  color: var(--er-on-acc);
  background: var(--er-acc);
  border: none;
  border-radius: var(--site-radius-full);
  box-shadow: var(--er-shadow);
}

/* Form messages (spectre .toast: captcha error, «Danke» after sending) and the Kontakt captcha (form plugin
   basic-captcha: image, reload button, answer field in one row). No red token exists, so an error reads through its
   text and the accent bar, like the theme's other notices. */
.site-card .toast {
  margin: 0 0 var(--site-space-lg);
  padding: var(--site-space-md) var(--site-space-lg);
  font-size: 15px;
  color: var(--er-ink);
  background: var(--er-acc-soft);
  border: 0;
  border-left: 3px solid var(--er-acc);
  border-radius: var(--site-radius-lg);
}

/* Flash messages (partials/messages.html.twig): toasts centred just below the sticky nav, above every page. */
.site-toasts {
  position: fixed;
  top: calc(var(--site-space-4xl) + var(--site-space-2xl));
  left: 50%;
  z-index: 20;
  display: grid;
  gap: var(--site-space-sm);
  width: min(420px, calc(100vw - 2 * var(--site-space-lg)));
  transform: translateX(-50%);
}

.site-toast {
  padding: var(--site-space-md) var(--site-space-lg);
  font-size: 15px;
  font-weight: 500;
  color: var(--er-ink);
  background: var(--er-panel);
  border: 1px solid var(--er-line);
  border-left: 3px solid var(--er-acc);
  border-radius: var(--site-radius-lg);
  box-shadow: var(--er-shadow);
  cursor: pointer;
  animation: site-toast-in 0.25s ease-out;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.site-toast.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

@keyframes site-toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-toast {
    animation: none;
    transition: none;
  }
}

.site-card .form-group.has-errors {
  margin: 0 0 var(--site-space-lg);
  padding: 0;
  background: none;
  border: 0;
}

.site-card .has-errors .form-input {
  border-color: var(--er-acc);
}

.site-card .basic-captcha .form-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--site-space-sm);
  border: 0;
}

/* quark moves the border from the input to the wrapper of a prepended field; it goes back on the input. */
.site-card .basic-captcha .form-input-wrapper .form-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--er-line);
}

.site-card .basic-captcha .form-input-addon {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--site-space-xs);
  padding: 0;
  background: none;
  border: 0;
}

.site-card .basic-captcha img {
  height: 42px;
  border: 1px solid var(--er-line);
  border-radius: var(--site-radius-lg);
}

.site-card .reload-captcha-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: var(--site-space-sm);
  color: var(--er-ink-2);
  background: var(--er-panel);
  border: 1px solid var(--er-line);
  border-radius: var(--site-radius-full);
  cursor: pointer;
}

.site-card .basic-captcha .reload-captcha-button svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
}

.site-card .reload-captcha-button:hover {
  color: var(--er-acc-ink);
}

/* Login plugin pages (the login gate of dev.e-rhema.ch): a narrow form in the text card, the same fields and
   button as the Kontakt form. «Passwort vergessen» is a text link under the full-width submit button. */
.site-card:has(#grav-login) {
  max-width: 440px;
}

.site-card #grav-login h1 {
  font-size: 28px;
}

.site-card #grav-login,
.site-card #grav-login .form-input {
  text-align: left;
}

.site-card #grav-login .fa {
  display: none;
}

.site-card .button-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-md);
}

.site-card .rememberme {
  align-self: flex-start;
}

.site-card .rememberme label {
  margin-left: var(--site-space-sm);
  font-size: 14px;
  color: var(--er-ink-2);
}

.site-card .button-wrapper .btn {
  order: 1;
}

.site-card .button-wrapper a.btn,
.site-card .button-wrapper a.btn:hover,
.site-card .button-wrapper a.btn:focus {
  order: 2;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--er-acc-ink);
  background: none;
  box-shadow: none;
}

/* ── Home page (templates/home.html.twig) ───────────────────────────────
   The hero sits on the gradient above the page sheet, which overlaps its lower edge by the sheet radius. */
.home-hero {
  color: var(--er-hero-ink);
  background: var(--er-bg);
}

.home-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--site-space-4xl);
  align-items: center;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--site-space-4xl) var(--site-gutter) calc(var(--site-space-4xl) + var(--site-radius-sheet));
}

.home-badge {
  display: inline-block;
  margin: 0 0 var(--site-space-xl);
  padding: var(--site-space-xs) var(--site-space-md);
  border: 1px solid var(--er-chrome-line);
  border-radius: var(--site-radius-full);
  font-size: 13px;
  font-weight: 600;
  background: var(--er-chrome);
}

.home-badge em {
  font-style: normal;
}

.home-hero h1 {
  margin: 0;
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--er-hero-ink);
}

.home-hero-lead p {
  max-width: 52ch;
  margin: var(--site-space-xl) 0 0;
  font-size: 17px;
  line-height: 1.65;
  opacity: 0.9;
}

.home-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--site-radius-xl);
  box-shadow: var(--er-shadow);
}

.site-home #start,
.site-reader #start,
.site-notes #start {
  position: relative;
  margin-top: calc(-1 * var(--site-radius-sheet));
}

/* Minimal landing (home.html.twig): no sections, so no sheet; one body gradient runs from the nav to the footer. */
body.site-landing {
  background-size: 100% 100%;
}

.site-landing .home-hero {
  background: none;
}

.site-landing #start {
  display: none;
}

.home-section {
  padding: var(--site-space-4xl) 0;
}

.home-section:first-child {
  padding-top: var(--site-space-2xl);
}

.home-kicker {
  margin: 0 0 var(--site-space-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--er-acc-ink);
}

.home-kicker em {
  font-style: normal;
}

.home-section h2,
.home-closing h2 {
  margin: 0 0 var(--site-space-lg);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.2;
}

.home-lead p {
  max-width: 60ch;
  margin: 0 0 var(--site-space-lg);
  font-size: 16px;
  line-height: 1.65;
  color: var(--er-ink-2);
}

/* Werkzeuge: Reader and Notes cards, then the «more tools» box. */
.home-products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--site-space-2xl);
  margin-top: var(--site-space-2xl);
}

.home-product,
.home-more,
.home-together li,
.home-faq-item {
  background: var(--er-panel);
  border: 1px solid var(--er-line);
  border-radius: var(--site-radius-xl);
  box-shadow: var(--er-shadow);
}

.home-product {
  display: flex;
  flex-direction: column;
  padding: var(--site-space-3xl);
}

.home-product-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--site-radius-lg);
  color: var(--er-on-acc);
  background: var(--er-acc);
}

.home-product-icon .site-icon {
  width: 24px;
  height: 24px;
}

.home-product-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--site-radius-lg);
}

.home-product h3,
.home-more h3 {
  margin: var(--site-space-lg) 0 var(--site-space-sm);
  font-size: 22px;
}

.home-product p,
.home-more p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--er-ink-2);
}

.home-product ul {
  margin: var(--site-space-lg) 0 var(--site-space-2xl);
  padding-left: var(--site-space-xl);
  font-size: 15px;
  line-height: 1.6;
  color: var(--er-ink);
}

.home-product li + li {
  margin-top: var(--site-space-xs);
}

.home-product-link {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-xs);
  margin-top: auto;
  font-weight: 600;
  text-decoration: none;
}

.home-more {
  display: flex;
  gap: var(--site-space-lg);
  align-items: flex-start;
  margin-top: var(--site-space-2xl);
  padding: var(--site-space-2xl);
  border-style: dashed;
  box-shadow: none;
}

.home-more h3 {
  margin-top: 0;
  font-size: 18px;
}

/* Zusammenspiel: lead, then the three points as tiles. */
.home-together ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--site-space-lg);
  margin: var(--site-space-2xl) 0 0;
  padding: 0;
  list-style: none;
}

.home-together li {
  margin: 0;
  padding: var(--site-space-2xl);
  font-size: 15px;
  line-height: 1.6;
  color: var(--er-ink-2);
}

.home-together li strong {
  display: block;
  margin-bottom: var(--site-space-xs);
  font-size: 16px;
  color: var(--er-ink);
}

/* Über: serif reading text on the accent tint, the list as pills. */
.home-about {
  margin: var(--site-space-2xl) 0;
  padding: var(--site-space-4xl) clamp(var(--site-space-lg), 5vw, var(--site-space-4xl));
  border-radius: var(--site-radius-xl);
  background: var(--er-acc-soft);
}

.home-about-text p {
  max-width: 68ch;
  margin: 0 0 var(--site-space-lg);
  font-family: var(--site-font-serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--er-ink);
}

.home-about-text ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-sm);
  margin: var(--site-space-2xl) 0 0;
  padding: 0;
  list-style: none;
}

.home-about-text li {
  margin: 0;
  padding: var(--site-space-sm) var(--site-space-lg);
  border-radius: var(--site-radius-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--er-acc-ink);
  background: var(--er-panel);
}

/* FAQ: native <details>, so it opens without script. */
.home-faq-item {
  max-width: 820px;
  margin-top: var(--site-space-md);
  box-shadow: none;
}

.home-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-lg);
  padding: var(--site-space-lg) var(--site-space-2xl);
  font-size: 16px;
  font-weight: 700;
  color: var(--er-ink);
  cursor: pointer;
  list-style: none;
}

.home-faq-item summary::-webkit-details-marker {
  display: none;
}

.home-faq-item summary .site-icon {
  color: var(--er-ink-3);
  transition: transform 0.2s ease;
}

.home-faq-item[open] summary .site-icon {
  transform: rotate(180deg);
}

.home-faq-answer {
  padding: 0 var(--site-space-2xl) var(--site-space-lg);
}

.home-faq-answer p {
  margin: 0 0 var(--site-space-sm);
  font-size: 15px;
  line-height: 1.65;
  color: var(--er-ink-2);
}

/* Closing band: the gradient again, with the two product buttons. */
.home-closing {
  margin: var(--site-space-2xl) 0 0;
  padding: var(--site-space-4xl) var(--site-space-2xl);
  border-radius: var(--site-radius-xl);
  text-align: center;
  color: var(--er-hero-ink);
  background: var(--er-bg);
}

.home-closing h2 {
  color: var(--er-hero-ink);
}

.home-closing .site-actions {
  justify-content: center;
  margin-top: var(--site-space-2xl);
}

@media (max-width: 860px) {
  .home-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--site-space-3xl);
  }
}

/* ── Reader page (templates/reader.html.twig) ───────────────────────────
   Reuses the home hero, section, card, FAQ and closing classes; only the verse mock-up, the feature and translation
   grids and the screenshot band are its own. */
.reader-mock {
  padding: var(--site-space-lg);
  color: var(--er-ink);
  background: var(--er-panel);
  border-radius: var(--site-radius-xl);
  box-shadow: var(--er-shadow);
}

.reader-mock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-md);
  margin-bottom: var(--site-space-md);
  font-size: 14px;
  font-weight: 700;
}

/* The Reader's header buttons for advanced mode and sync mode, both switched on. */
.reader-mock-tools {
  display: inline-flex;
  gap: var(--site-space-xs);
}

.reader-mock-tool {
  display: inline-flex;
  padding: var(--site-space-xs);
  color: var(--er-acc-ink);
  background: var(--er-acc-soft);
  border-radius: var(--site-radius-sm);
}

.reader-mock-tool.is-on {
  color: var(--er-sync-ink);
  background: var(--er-sync);
}

.reader-mock-tool .site-icon {
  width: 16px;
  height: 16px;
}

.reader-mock-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--site-space-md);
}

.reader-mock-col {
  padding: var(--site-space-md);
  background: var(--er-tile);
  border-radius: var(--site-radius-lg);
}

.reader-mock-name {
  margin: 0 0 var(--site-space-sm);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--er-ink-2);
}

.reader-mock-verse {
  margin: 0;
  padding: var(--site-space-xs) var(--site-space-sm);
  border-radius: var(--site-radius-sm);
  font-size: 15px;
  line-height: 1.6;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.reader-mock-verse.is-synced {
  background: var(--er-sync);
  box-shadow: inset 3px 0 0 var(--er-sync-bar);
}

.reader-mock-num {
  margin-right: var(--site-space-xs);
  padding: 0 var(--site-space-xs);
  font-family: var(--site-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--er-acc-ink);
  background: none;
  border: none;
  border-radius: var(--site-radius-sm);
  cursor: pointer;
}

.reader-mock-verse.is-synced .reader-mock-num {
  color: var(--er-sync-ink);
}

/* The Reader's Details icon (tabler vocabulary) beside a verse. */
.reader-mock-details {
  display: inline-flex;
  margin-left: var(--site-space-xs);
  padding: var(--site-space-xs);
  vertical-align: middle;
  color: var(--er-acc-ink);
  background: var(--er-acc-soft);
  border: none;
  border-radius: var(--site-radius-sm);
  cursor: pointer;
}

.reader-mock-details .site-icon {
  width: 16px;
  height: 16px;
}

.reader-mock-details[aria-expanded='true'] {
  color: var(--er-on-acc);
  background: var(--er-acc);
}

.reader-mock-lexicon {
  margin-top: var(--site-space-md);
  padding: var(--site-space-md) var(--site-space-lg);
  border: 1px solid var(--er-line);
  border-left: 3px solid var(--er-acc);
  border-radius: var(--site-radius-lg);
}

.reader-mock-lexicon p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--er-ink-2);
}

.reader-mock-lexicon .reader-mock-lexicon-head {
  margin-bottom: var(--site-space-xs);
  font-size: 16px;
  color: var(--er-ink);
}

.reader-mock-lexicon-head span {
  font-family: var(--site-font-serif);
}

.reader-mock-lexicon .reader-mock-lexicon-source {
  margin-top: var(--site-space-xs);
  font-size: 12px;
  color: var(--er-ink-3);
}

/* Funktionen: any number of cards (ERH-322 adds more), three per row on desktop. */
.reader-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--site-space-2xl);
  margin-top: var(--site-space-2xl);
}

.reader-feature {
  padding: var(--site-space-2xl);
}

.reader-feature h3 {
  font-size: 19px;
}

/* Screenshot band: text left, picture right; stacked on phones. */
.reader-shot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--site-space-4xl);
  align-items: center;
}

/* Übersetzungen: one card per language, the translations as pills. */
.reader-langs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--site-space-lg);
  margin-top: var(--site-space-2xl);
}

.reader-lang {
  padding: var(--site-space-2xl);
  background: var(--er-panel);
  border: 1px solid var(--er-line);
  border-radius: var(--site-radius-xl);
}

.reader-lang h3 {
  margin: 0 0 var(--site-space-md);
  font-size: 16px;
}

.reader-lang ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.reader-lang li {
  margin: 0;
  padding: var(--site-space-xs) var(--site-space-md);
  border-radius: var(--site-radius-full);
  font-size: 14px;
  font-weight: 600;
  color: var(--er-acc-ink);
  background: var(--er-acc-soft);
}

@media (max-width: 860px) {
  .reader-shot {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--site-space-2xl);
  }
}

@media (max-width: 480px) {
  .reader-mock-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Notes page (templates/notes.html.twig) ────────────────────────────
   Reuses the home and Reader page classes (hero, sections, tiles, cards, account tint, FAQ, closing, the mock-up
   frame .reader-mock); only the note mock-up's toggle and its two views are its own. */
/* Four feature cards: two per row on desktop, one on phones. */
.notes-features {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}

.notes-mock-file {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-sm);
  min-width: 0;
}

.notes-mock-file .site-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--er-acc-ink);
}

.notes-mock-toggle {
  display: inline-flex;
  flex: none;
  padding: var(--site-space-xs);
  border-radius: var(--site-radius-full);
  background: var(--er-tile);
}

.notes-mock-toggle button {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-xs);
  padding: var(--site-space-xs) var(--site-space-md);
  font-family: var(--site-font);
  font-size: 12px;
  font-weight: 700;
  color: var(--er-ink-2);
  background: none;
  border: none;
  border-radius: var(--site-radius-full);
  cursor: pointer;
}

.notes-mock-toggle button[aria-pressed='true'] {
  color: var(--er-on-acc);
  background: var(--er-acc);
}

.notes-mock-toggle .site-icon {
  width: 14px;
  height: 14px;
}

.notes-mock-read,
.notes-mock-source {
  min-height: 220px;
  padding: var(--site-space-lg);
  background: var(--er-tile);
  border-radius: var(--site-radius-lg);
}

.notes-mock-read h3 {
  margin: 0 0 var(--site-space-md);
  font-size: 18px;
}

.notes-mock-read blockquote {
  margin: 0 0 var(--site-space-md);
  padding: var(--site-space-xs) 0 var(--site-space-xs) var(--site-space-md);
  border-left: 3px solid var(--er-acc);
  font-family: var(--site-font-serif);
  font-size: 15px;
  line-height: 1.6;
  color: var(--er-ink);
}

.notes-mock-read ul {
  margin: 0;
  padding-left: var(--site-space-xl);
  font-size: 14px;
  line-height: 1.6;
  color: var(--er-ink-2);
}

.notes-mock-read li strong {
  color: var(--er-ink);
}

.notes-mock-ref {
  font-family: var(--site-font);
  font-size: 13px;
  font-weight: 700;
  color: var(--er-acc-ink);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* The Markdown source wraps instead of scrolling sideways, so the hero never overflows on phones. */
.notes-mock-source {
  margin: 0;
  font-family: var(--site-font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--er-ink);
  border: none;
}


/* ── Footer (all pages) ─────────────────────────────────────────────────
   Continues the page sheet: brand + tagline and three link columns, two columns on phones. */
.site-footer {
  color: var(--er-ink-2);
  background: var(--er-page);
  border-top: 1px solid var(--er-line);
}

.site-footer-inner {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--site-space-2xl);
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--site-space-4xl) var(--site-gutter) var(--site-space-2xl);
}

.site-footer .site-brand,
.site-footer .site-brand:hover {
  color: var(--er-ink);
}

.site-footer-brand p {
  max-width: 32ch;
  margin: var(--site-space-md) 0 0;
  font-size: 14px;
  line-height: 1.6;
}

.site-footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-sm);
}

.site-footer-heading {
  margin: 0 0 var(--site-space-xs);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--er-ink);
}

.site-footer-col a {
  font-size: 14px;
  color: var(--er-ink-2);
  text-decoration: none;
}

.site-footer-col a:hover {
  color: var(--er-acc-ink);
}

.site-footer-copy {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--site-gutter) var(--site-space-2xl);
  font-size: 13px;
}

@media (max-width: 720px) {
  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }
}