/* ---------------------------------------------------------------
   VerseKit project page: the parts only this site has.
   Shared look (colours, type, buttons, header, footer, FAQ, switch)
   is in basis.css, which every page loads first.
   The only outside request is api.github.com for version, size and
   download count; if it fails, those lines just stay hidden.
   --------------------------------------------------------------- */

/* ---------- Start: headline ----------
   Desktop: text and buttons left, fact sheet right, video below.
   Phone: the video comes right after the headline, so there is something
   to see at once; the buttons follow, and none of them is filled, because
   VerseKit does not run on a phone. */
.hero{padding:64px 0 24px}
.hero-raster{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:56px;
  grid-template-areas:"text blatt" "aktion blatt" "film film";
}
.hero-text{grid-area:text}
.hero-aktion{grid-area:aktion}
.datenblatt{grid-area:blatt;align-self:end}
.film{grid-area:film}
.hero .zeichen{width:88px;height:88px;margin:0 0 20px -6px}
.hero h1{margin:0}
.hero h1 .name{display:block;font-size:clamp(52px,8vw,84px);line-height:1;font-weight:700;letter-spacing:-.02em}
.hero h1 .zeile{display:block;margin-top:14px;font-size:clamp(23px,2.6vw,30px);line-height:1.25;font-weight:400}
.hero .unter{font-size:19px;color:var(--leise);max-width:34em;margin:18px 0 6px}
.hero .fruehername{font-size:15px;color:var(--leise);margin:0 0 28px}
.hero .anderes{margin:12px 0 0;font-size:15px}
.hero .klein{margin:14px 0 0;font-size:15px;color:var(--leise)}
.hero .am-pc{display:none;margin:0 0 14px;font-size:15px;color:var(--leise)}

/* Fact sheet next to the headline. Version, size and downloads come
   from GitHub through the script; until then their rows stay hidden. */
.datenblatt{margin:0;padding:8px 22px;background:var(--flaeche)}
.datenblatt .zeile{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--linie)}
.datenblatt .zeile:first-child{border-top:0}
.datenblatt .zeile[hidden]{display:none}
.datenblatt dt{color:var(--leise);font-size:15px}
.datenblatt dd{margin:0;font-weight:700;font-size:15px;text-align:right;font-variant-numeric:tabular-nums}
#kz-version-wert,#downloads-zahl{color:var(--neon)}

/* The introduction video: muted, loops by itself; a click or Space
   pauses it. With reduced motion it waits with controls. */
.film{margin-top:48px}
.film video{aspect-ratio:16/9;background:var(--feld);cursor:pointer}
.film video:focus-visible{outline-offset:4px}
.film figcaption{margin-top:10px;font-size:14px;color:var(--leise)}
.hero + section{border-top:0;padding-top:120px}

/* ---------- Features ----------
   Two large rows for what VerseKit is known for, then six smaller ones. */
.gross{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:56px}
.gross.andersrum{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.gross.andersrum figure{order:2}
.gross h3{font-size:26px;line-height:1.25;margin:0 0 12px}
.gross p{color:var(--leise);font-size:18px;margin:0 0 12px;max-width:30em}
.klein-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 36px;margin-top:88px}
.klein-raster h3{font-size:20px;line-height:1.3;margin:20px 0 6px}
.klein-raster p{color:var(--leise);font-size:16px;margin:0}

/* ---------- In the game ---------- */
.spielbild{display:grid;grid-template-columns:minmax(0,518fr) minmax(0,425fr);gap:40px;align-items:start;max-width:1000px}
.spielbild figcaption,.ansichten figcaption{color:var(--leise);font-size:15px;margin-top:14px}

/* ---------- Further pages, from the start page ----------
   Three ways on, side by side, separated by lines rather than boxes. */
.weiter{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--linie)}
.weiter li{padding:28px 28px 8px 0}
.weiter li + li{padding-left:28px;border-left:1px solid var(--linie)}
.weiter h3{margin:0 0 6px;font-size:20px}
.weiter h3 a{color:var(--text);display:inline-flex;align-items:center;gap:8px}
.weiter h3 a::after{content:"";width:18px;height:18px;background:var(--neon);
  -webkit-mask:url(symbole/chevron-right.svg) center/contain no-repeat;mask:url(symbole/chevron-right.svg) center/contain no-repeat}
.weiter h3 a:hover{color:var(--neon);text-decoration:none}
.weiter p{margin:0;color:var(--leise);font-size:16px}

/* ---------- Referral code (same block as on xharig.com) ---------- */
.empfehlung{max-width:760px;padding:28px 32px;background:var(--flaeche)}
.empfehlung h2{font-size:26px}
.empfehlung p{color:var(--leise);margin:0 0 12px}
.empfehlung code{color:var(--neon);font-size:16px;white-space:nowrap}
.empfehlung .knopfreihe{margin-top:20px}
.ref-meldung{margin:12px 0 0;font-size:15px;color:var(--neon);min-height:1.5em;overflow-wrap:anywhere}

/* ---------- Two views ---------- */
.ansichten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}

/* ---------- Tour ----------
   Sidebar like the program's: selected row with dark accent fill and a
   3 px accent bar on the left. */
.tour{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:start}
.reiter{
  background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund);
  padding:8px;max-height:660px;overflow:auto;overscroll-behavior:contain;
}
.reiter .gruppe{font-size:13px;font-weight:700;color:var(--leise);padding:14px 10px 4px}
.reiter .gruppe:first-child{padding-top:6px}
.reiter button{
  display:block;width:100%;text-align:left;background:none;border:0;
  border-left:3px solid transparent;border-radius:0 6px 6px 0;
  color:var(--text);font:inherit;font-size:15px;padding:7px 10px;cursor:pointer;
}
.reiter button:hover{background:var(--hover);border-left-color:var(--linie-hell)}
.reiter button.an{background:var(--neon-dunkel);border-left-color:var(--neon);color:var(--neon);font-weight:700}
.tourbild .rahmen{aspect-ratio:1400/860;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tourbild .rahmen img{width:auto;max-width:100%;max-height:100%;object-fit:contain}
.tourbild .bu{color:var(--leise);font-size:16px;margin:14px 0 0;min-height:3.2em;max-width:44em}
/* Colour schemes under "Appearance": one button per scheme, the dot shows
   accent on background. Fixed 3 + 3 (phone 2 + 2 + 2); free wrapping gave 5 + 1. */
.farben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.farben[hidden]{display:none}
.farben button{display:flex;align-items:center;gap:9px;background:var(--flaeche);border:1px solid var(--linie-hell);
  color:var(--text);font:inherit;font-size:14px;padding:7px 12px;border-radius:6px;cursor:pointer;text-align:left}
.farben button:hover{border-color:var(--neon);background:var(--hover)}
.farben button.an{border-color:var(--neon);background:var(--neon-dunkel);color:var(--neon);font-weight:700}
.farben .punkt{width:12px;height:12px;border-radius:50%;flex:none}

/* ---------- Download in three steps ----------
   A real sequence, so the steps carry numbers. */
.schritte{list-style:none;margin:0;padding:0;counter-reset:schritt}
.schritte > li{position:relative;padding:0 0 44px 76px;counter-increment:schritt}
.schritte > li::before{
  content:counter(schritt);position:absolute;left:0;top:-2px;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--neon);border-radius:var(--rund);color:var(--neon);font-weight:700;font-size:20px;
}
.schritte > li:not(:last-child)::after{content:"";position:absolute;left:22px;top:50px;bottom:6px;width:1px;background:var(--linie-hell)}
.schritte h2{font-size:24px;line-height:1.3;margin:4px 0 8px}
.schritte > li > p{color:var(--leise);margin:0 0 8px;max-width:40em}
.dateien{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:20px 0 16px;max-width:780px}
.datei{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--rund);padding:22px}
.datei h3{margin:0;font-size:20px}
.datei .art{margin:0 0 6px;color:var(--leise);font-size:15px}
/* display:block: otherwise the file name sits NEXT TO the button at large
   text sizes or zoom (seen at 150 %, 30.09.2026). */
.datei code{display:block;color:var(--neon);font-size:14px;overflow-wrap:anywhere}
.datei .knopf{margin-top:18px}
.fassung{color:var(--leise);font-size:15px;margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.fassung strong{color:var(--neon)}
.fassung strong:empty{display:none}
.pruefsumme{margin:0 0 0 76px;max-width:780px;padding:22px;background:var(--feld);border:1px solid var(--linie);border-radius:var(--rund)}
.pruefsumme h2{margin:0 0 6px;font-size:18px}
.pruefsumme p{margin:0 0 10px;color:var(--leise);font-size:15px}
.pruefsumme p.sys{margin:14px 0 4px;color:var(--text);font-weight:700;font-size:14px}
.pruefsumme code{display:block;color:var(--neon);font-size:14px;overflow-wrap:anywhere;padding:8px 12px;background:var(--grund);border-radius:6px}
.pruefsumme p.vt{margin:16px 0 0}

/* ---------- Is it safe? ---------- */
.vertrauen{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.vertrauen li{padding:22px 0;border-top:1px solid var(--linie)}
.vertrauen h3{display:flex;align-items:center;gap:12px;font-size:20px;margin:0 0 6px}
.vertrauen h3::before{content:"";width:24px;height:24px;flex:none;background:var(--neon);
  -webkit-mask:url(symbole/shield-check.svg) center/contain no-repeat;mask:url(symbole/shield-check.svg) center/contain no-repeat}
.vertrauen p{margin:0 0 0 36px;color:var(--leise);font-size:16px}

/* ---------- FAQ page ---------- */
.faq-gruppe{font-size:28px;margin:64px 0 8px}
.faq-gruppe:first-child{margin-top:0}
.faq-untergruppe{font-size:17px;margin:32px 0 6px;color:var(--text)}
.checkliste{color:var(--leise);font-size:16px;margin:0 0 6px;padding-left:22px;max-width:46em}
.checkliste li{margin-bottom:6px}

/* ---------- Changelog page ----------
   Texts come from CHANGELOG.md / CHANGELOG.en.md in this repository; the
   page lives on the same server, there is no second copy. */
.verlauf-leiste{display:flex;gap:16px 28px;align-items:center;flex-wrap:wrap;margin-bottom:18px;max-width:860px}
/* Own clear button: the built-in one only shows in Chrome and Safari,
   Firefox has none (reported 22.09.2026). The built-in one is hidden so it
   does not appear twice in Chrome. */
.suchfeld{position:relative;flex:1 1 260px;display:flex}
.verlauf-leiste input[type=search]{
  flex:1;min-width:0;background:var(--feld);border:1px solid var(--linie-hell);
  border-radius:var(--rund);color:var(--text);font:inherit;font-size:16px;padding:10px 46px 10px 14px;
}
.verlauf-leiste input[type=search]::placeholder{color:var(--leise)}
.verlauf-leiste input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.verlauf-leiste input[type=search]:focus-visible{outline:none;border-color:var(--neon);box-shadow:inset 0 0 0 1px var(--neon)}
.suchfeld .leeren{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:6px;background:none;color:var(--leise);cursor:pointer;
}
.suchfeld .leeren[hidden]{display:none}
.suchfeld .leeren:hover{color:var(--neon);background:var(--hover);border-color:var(--linie-hell)}
.verlauf-zahl{color:var(--leise);font-size:14px;margin:0 0 12px}
#verlauf{max-width:860px}
/* Up to 290 versions: closed ones are not laid out until seen. */
.version{border-top:1px solid var(--linie);content-visibility:auto;contain-intrinsic-size:auto 52px}
.version:last-child{border-bottom:1px solid var(--linie)}
.version summary{cursor:pointer;padding:14px 0;display:flex;gap:14px;align-items:center;list-style:none;flex-wrap:wrap}
.version summary::-webkit-details-marker{display:none}
.version summary::before{content:"";width:18px;height:18px;flex:none;background:var(--neon);
  -webkit-mask:url(symbole/chevron-right.svg) center/contain no-repeat;mask:url(symbole/chevron-right.svg) center/contain no-repeat}
.version[open] summary::before{transform:rotate(90deg)}
@media (prefers-reduced-motion:no-preference){.version summary::before{transition:transform .25s}}
.version summary:hover .nummer{color:var(--neon)}
.version .nummer{font-weight:700;font-size:18px;color:var(--text);font-variant-numeric:tabular-nums}
.version .datum{color:var(--leise);font-size:15px}
.version .test{font-size:12px;font-weight:700;color:var(--leise);border:1px solid var(--linie-hell);border-radius:4px;padding:1px 8px}
.version .inhalt{padding:0 0 20px 32px;font-size:16px}
.version .inhalt h3{margin:18px 0 6px;font-size:15px;color:var(--neon)}
.version .inhalt ul{margin:0;padding-left:20px}
.version .inhalt li{margin:6px 0}
.version .inhalt p{margin:8px 0}
.version .inhalt code{background:var(--feld);border:1px solid var(--linie);border-radius:4px;padding:0 5px;font-size:14px;overflow-wrap:anywhere}
.version .vorspann{color:var(--text);border-left:2px solid var(--neon);padding-left:14px;margin:4px 0 6px}
.version .kasten{border:1px solid var(--linie);border-radius:var(--rund);padding:4px 14px;margin:10px 0;background:var(--feld)}
.verlauf-mehr{margin-top:20px}

/* ---------- Closing download ---------- */
.los{padding:72px 0 96px}
.los-innen{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding:32px;background:var(--flaeche)}
.los-innen img{width:72px;height:72px}
.los h2{font-size:28px;margin:0 0 4px}
.los p{margin:0;color:var(--leise)}

/* ---------- Narrower screens ---------- */
@media (max-width:1000px){
  .hero-raster{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "aktion" "blatt" "film"}
  .datenblatt{max-width:520px;margin-top:40px}
  .klein-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .weiter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .weiter li:nth-child(3){padding-left:0;border-left:0}
  .weiter li:nth-child(n+3){border-top:1px solid var(--linie)}
}
@media (max-width:860px){
  .gross,.gross.andersrum{grid-template-columns:minmax(0,1fr);gap:24px}
  .gross.andersrum figure{order:0}
  .tour{grid-template-columns:minmax(0,1fr)}
  /* More than 40 tabs would push the picture far down, so the list scrolls
     within itself on phones too. */
  .reiter{max-height:320px}
  .reiter button{padding:12px 10px}
  .weiter h3 a{min-height:44px}
  .spielbild,.ansichten,.vertrauen,.weiter{grid-template-columns:minmax(0,1fr)}
  .weiter li,.weiter li + li{padding:22px 0 18px;border-left:0}
  .weiter li + li{border-top:1px solid var(--linie)}
  .los-innen{grid-template-columns:auto minmax(0,1fr)}
  .los-innen .knopfreihe{grid-column:1 / -1}
}
@media (max-width:640px){
  .hero{padding-top:36px}
  .hero-raster{grid-template-areas:"text" "film" "aktion" "blatt"}
  /* The header already shows the logo right above. */
  .hero .zeichen,.los-innen img{display:none}
  .hero .unter{font-size:17px}
  .hero .fruehername{margin-bottom:0}
  .film{margin:28px 0 32px}
  .hero .am-pc{display:block}
  .hero .knopf.voll{background:none;border-color:var(--linie-hell);color:var(--text)}
  .hero .knopf.voll:hover{border-color:var(--neon);color:var(--neon);background:var(--neon-dunkel)}
  .hero + section{padding-top:72px}
  .gross p{font-size:17px}
  .klein-raster{grid-template-columns:minmax(0,1fr);gap:44px;margin-top:64px}
  .dateien{grid-template-columns:minmax(0,1fr)}
  .datei{padding:18px}
  .datei .knopf{width:100%;justify-content:center;padding:12px 16px}
  .schritte > li{padding-left:60px}
  .schritte > li::before{width:40px;height:40px;font-size:18px}
  .schritte > li:not(:last-child)::after{left:20px}
  .pruefsumme{margin-left:0}
  .farben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vertrauen p{margin-left:0}
  .empfehlung{padding:22px}
  .los-innen{grid-template-columns:minmax(0,1fr);padding:24px}
}