/* ============================================================
   Selbstgehostete Schriften (Fontsource, nicht von Google geladen)
   Inter (400/500/600/700) + Instrument Serif (400 normal/italic)
   Subsets: latin, latin-ext, cyrillic, cyrillic-ext
   ============================================================ */

/* inter-latin-400-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-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;
}

/* inter-latin-ext-400-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-cyrillic-400-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-cyrillic-ext-400-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-cyrillic-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-latin-500-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-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;
}

/* inter-latin-ext-500-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-cyrillic-500-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-cyrillic-ext-500-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-cyrillic-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-latin-600-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-600-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;
}

/* inter-latin-ext-600-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-cyrillic-600-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-cyrillic-ext-600-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-cyrillic-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-latin-700-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin-700-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;
}

/* inter-latin-ext-700-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-cyrillic-700-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-cyrillic-ext-700-normal.woff2 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-cyrillic-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* instrument-serif-latin-400-normal.woff2 */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-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;
}

/* instrument-serif-latin-ext-400-normal.woff2 */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-serif-latin-400-italic.woff2 */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-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;
}

/* instrument-serif-latin-ext-400-italic.woff2 */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ============================================================
   Dinoray – Website
   Farben und Formen stammen direkt aus der App.
   ============================================================ */

:root, html, body {
  color-scheme: light;
  --paper:        #ffffff;
  --mist:         #f2f4fb;
  --ink:          #1b2447;
  --ink-soft:     #5a628a;
  --cobalt:       #6a77b1;
  --cobalt-light: #8e9ad2;
  --cobalt-text:  #4d5a95;   /* kontraststark für kleine Schrift */
  --cobalt-btn:   #5c69a6;   /* kontraststark hinter weißer Schrift */
  --sand:         #d7b25c;
  --sand-deep:    #846620;
  --line:         rgba(27, 36, 71, 0.10);
  --line-strong:  rgba(27, 36, 71, 0.16);

  /* Gestaffelte Schatten wirken hochwertiger als ein einzelner weicher Schatten */
  --shadow-s: 0 1px 2px rgba(27,36,71,0.06), 0 4px 12px rgba(27,36,71,0.06);
  --shadow-m: 0 1px 3px rgba(27,36,71,0.07), 0 12px 32px rgba(27,36,71,0.10);
  --shadow-l: 0 2px 6px rgba(27,36,71,0.06), 0 28px 64px rgba(27,36,71,0.13);

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1080px;
  --radius: 20px;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  color-scheme: dark;
  --paper:        #10152b;
  --mist:         #181e38;
  --ink:          #f4f5fb;
  --ink-soft:     #bbc2db;
  --cobalt:       #a8b3e8;
  --cobalt-light: #8f9cdb;
  --cobalt-text:  #c0c9f3;
  --cobalt-btn:   #7d89c9;
  --sand:         #dfbd69;
  --sand-deep:    #ebcf8c;
  --line:         rgba(238, 240, 255, 0.12);
  --line-strong:  rgba(238, 240, 255, 0.20);
  --shadow-s: 0 1px 2px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.18);
  --shadow-m: 0 1px 3px rgba(0,0,0,0.20), 0 12px 32px rgba(0,0,0,0.28);
  --shadow-l: 0 2px 6px rgba(0,0,0,0.22), 0 28px 64px rgba(0,0,0,0.38);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;   /* iOS vergrößert Text im Querformat sonst eigenmächtig */
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;   /* Sicherheitsnetz gegen waagerechtes Scrollen */
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--cobalt); }

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

/* ---------- Typografie ---------- */

h1, h2, h3 {
  font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; margin: 0;
  overflow-wrap: break-word; hyphens: auto;
}

h1 { font-size: clamp(2.15rem, 8.5vw, 4.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height: 1.15; }
h3 { font-size: 1.22rem; line-height: 1.3; }

p { margin: 0 0 1rem; }

.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cobalt-text);
  margin: 0 0 9px;
}

.lead { font-size: clamp(1.03rem, 1.6vw, 1.18rem); color: var(--ink-soft); max-width: 52ch; }

.seo-summary {
  max-width: 60ch;
  margin: -0.25rem 0 1.2rem;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.65;
}

.small { font-size: 0.86rem; color: var(--ink-soft); }

/* ---------- Sprungmarke (Barrierefreiheit) ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cobalt-btn);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 12px 0;
  font-size: 0.92rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Kopfzeile ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}

html[data-theme="dark"] .site-head {
  background: rgba(16, 21, 43, 0.88);
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.35rem;
}

.brand img {
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid var(--line);
}

.head-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 20px;
  font-size: 0.92rem;
}

.lang-picker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
}
.lang-picker svg { width: 17px; height: 17px; flex: 0 0 auto; }

.theme-toggle {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--mist);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.theme-toggle::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-s);
  transition: transform 0.2s ease;
}
.theme-toggle:hover { border-color: var(--cobalt); }
.theme-toggle:focus-visible { border-radius: 999px; }
.theme-icon {
  position: absolute;
  z-index: 1;
  top: 9px;
  width: 16px;
  height: 16px;
  transition: color 0.18s ease;
}
.theme-icon-sun { left: 9px; color: var(--sand-deep); }
.theme-icon-moon { right: 9px; color: var(--ink-soft); }
html[data-theme="dark"] .theme-toggle::before { transform: translateX(28px); }
html[data-theme="dark"] .theme-icon-sun { color: var(--ink-soft); }
html[data-theme="dark"] .theme-icon-moon { color: var(--cobalt-text); }

.head-links a {
  color: var(--ink-soft);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;      /* bequem mit dem Daumen zu treffen */
}
.head-links a:hover { color: var(--cobalt-text); }

/* ---------- Knöpfe ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 26px;
  border-radius: 14px;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-primary {
  background: linear-gradient(180deg, #6b78b3 0%, var(--cobalt-btn) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(27,36,71,0.16), 0 12px 26px rgba(106,119,177,0.34);
}
.btn-primary:hover { background: #4f5c98; transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--cobalt); color: var(--cobalt); }

.btn .apple { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- Store-Badges (App Store + Google Play) ---------- */
.store-badges { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.store-badge-wrap { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.store-badge-caption {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(106, 119, 177, 0.12);
  color: var(--cobalt-text);
  border: 1px solid rgba(106, 119, 177, 0.20);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.store-badge { display: inline-block; line-height: 0; text-decoration: none; transition: transform 0.15s ease; }
.store-badge img { height: 52px; width: auto; display: block; border-radius: 10px; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge--disabled { cursor: default; opacity: 0.88; }
.store-badge--disabled:hover { transform: none; }
.store-badge--disabled img { filter: saturate(0.92); }
.store-badges--center { justify-content: center; margin-top: 6px; }

/* ---------- Abschnitte ---------- */

section { padding: clamp(44px, 6.2vw, 74px) 0; }
section.band { background: var(--mist); }

.section-head { max-width: 58ch; margin-bottom: 44px; }

/* ---------- Held ---------- */

.hero {
  padding-top: clamp(44px, 6vw, 76px);
  padding-bottom: clamp(28px, 4vw, 46px);
  background:
    radial-gradient(1100px 460px at 12% -8%, rgba(142,154,210,0.16), transparent 62%),
    radial-gradient(760px 380px at 92% 4%, rgba(215,178,92,0.13), transparent 60%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.hero-note { margin-top: 16px; font-size: 0.86rem; color: var(--ink-soft); }

/* ---------- App-Logo (Plakette) ---------- */

.app-mark {
  display: inline-block;
  border-radius: 24%;
  background: var(--paper);
  padding: 0;
  box-shadow: var(--shadow-m);
  position: relative;
  line-height: 0;
}
.app-mark img { border-radius: 24%; display: block; }
.app-mark::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 24%;
  border: 1px solid rgba(27,36,71,0.10);
  pointer-events: none;
}

.app-mark-lg img { width: 104px; height: 104px; }
.app-mark-md img { width: 78px;  height: 78px;  }

.mark-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 26px;
}
.mark-row .mark-text { line-height: 1.35; }
.mark-row .mark-name {
  font-family: var(--display);
  font-size: 1.7rem;
  color: var(--ink);
  display: block;
}
.mark-row .mark-claim { font-size: 0.9rem; color: var(--ink-soft); }

/* Logo-Kopf auf den Unterseiten */
.doc-mark {
  text-align: center;
  margin-bottom: 30px;
}
.doc-mark .app-mark { margin-bottom: 14px; }
.doc-mark .name {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--ink);
}

/* ---------- Signatur: Zähler-Karte ---------- */

.counter-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 30px 28px 26px;
  box-shadow: var(--shadow-l);
}

.counter-top {
  display: flex;
  align-items: center;
  gap: 24px;
}

.counter-figure { flex: 0 0 auto; width: 104px; }

.counter-readout { flex: 1 1 auto; min-width: 0; }

.counter-number {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(3.2rem, 8vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cobalt);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.18s ease;
}

.counter-label { font-size: 0.98rem; color: var(--ink-soft); margin-top: 6px; }

.counter-field {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.counter-field label { font-size: 0.9rem; color: var(--ink-soft); }

.counter-field input {
  font-family: var(--body);
  font-size: 0.98rem;
  color: var(--ink);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
}
.counter-field input:hover { border-color: var(--cobalt-light); }

/* ---------- Sanduhr (SVG) ---------- */

.grain { animation: fall 2.4s linear infinite; }
.grain-2 { animation-delay: 0.8s; }
.grain-3 { animation-delay: 1.6s; }

@keyframes fall {
  0%   { transform: translateY(0);   opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(58px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; opacity: 0; }
  html { scroll-behavior: auto; }
  .btn, .feature { transition: none; }
  .feature:hover { transform: none; }
}

/* ---------- Kategorien ---------- */

/* Seit 4.6: jede Kategorie mit ihrem Symbol aus der App, auf jedem Gerät
   drei je Zeile (3 × 3). Breite Fenster: Symbol neben dem Namen. Schmale
   Fenster: Symbol über dem Namen, damit drei nebeneinander passen. */
.chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
  max-width: 720px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  font-size: 0.93rem;
  font-weight: 500;
}
.chip > span:last-child {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Kreis in der Kategoriefarbe, Symbol in Weiß bzw. auf hellen Farben dunkel –
   wie in der App (Category.onColor). */
.cat-ico {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--c);
  color: var(--on);
  box-shadow: 0 2px 5px color-mix(in srgb, var(--c) 35%, transparent);
}
.cat-ico svg { width: 18px; height: 18px; fill: currentColor; display: block; }

@media (max-width: 600px) {
  .chips { gap: 8px; }
  .chip {
    flex-direction: column;
    justify-content: flex-start;
    gap: 7px;
    border-radius: 18px;
    padding: 12px 4px 10px;
    font-size: 0.8rem;
    line-height: 1.2;
    text-align: center;
  }
  .chip > span:last-child { max-width: 100%; }
  .cat-ico { width: 38px; height: 38px; }
  .cat-ico svg { width: 21px; height: 21px; }
}
@media (max-width: 380px) {
  .chips { gap: 6px; }
  .chip { font-size: 0.76rem; padding: 10px 3px 9px; }
}

/* Kategorie-Farben – identisch mit der App (Event.swift / Models.kt).
   Seit 4.3 im Hellmodus dieselben kräftigen Farben wie im Dunkelmodus. */
:root {
  --cat-1: #ff453a; /* Sucht */
  --cat-2: #bf5af2; /* Persönliches */
  --cat-3: #ff5c9a; /* Beziehung */
  --cat-4: #40c8e0; /* Gewohnheit */
  --cat-5: #ac8e68; /* Haustiere */
  --cat-6: #7775ff; /* Arbeit */
  --cat-7: #30d158; /* Gesundheit */
  --cat-8: #ffd60a; /* Geld */
  --cat-9: #3c9983; /* Plan */
  /* Farbe des Symbols auf dem Kreis – dieselbe Regel wie in der App:
     dunkel auf Türkis, Grün und Gelb, sonst weiß. In beiden Modi gleich. */
  --cat-on-1: #ffffff; --cat-on-2: #ffffff; --cat-on-3: #ffffff;
  --cat-on-4: #15161a; --cat-on-5: #ffffff; --cat-on-6: #ffffff;
  --cat-on-7: #15161a; --cat-on-8: #15161a; --cat-on-9: #ffffff;
}
html[data-theme="dark"] {
  --cat-1: #ff453a; /* Sucht */
  --cat-2: #bf5af2; /* Persönliches */
  --cat-3: #ff5c9a; /* Beziehung */
  --cat-4: #40c8e0; /* Gewohnheit */
  --cat-5: #ac8e68; /* Haustiere */
  --cat-6: #7775ff; /* Arbeit */
  --cat-7: #30d158; /* Gesundheit */
  --cat-8: #ffd60a; /* Geld */
  --cat-9: #3c9983; /* Plan */
}


/* ---------- Funktionen ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
}

.feature {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-s);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-m); }
.band .feature { background: var(--paper); }

.feature .tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-deep);
  margin-bottom: 12px;
}

.feature h3 { margin-bottom: 8px; }
.feature p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Preis ---------- */

.price-card {
  max-width: 560px;
  margin-inline: auto;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 44px 34px;
  box-shadow: var(--shadow-l);
}

.price-figure {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 4rem);
  line-height: 1;
  color: var(--ink);
  margin: 10px 0 4px;
}

.price-rule {
  width: 54px; height: 3px;
  background: var(--sand);
  border-radius: 2px;
  margin: 26px auto;
}

.price-list { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; display: inline-block; }
.price-list li { position: relative; padding-left: 28px; margin-bottom: 10px; font-size: 0.96rem; }
.price-list li::before {
  content: "";
  position: absolute; left: 6px; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sand);
}

/* ---------- Fußzeile ---------- */

/* --------------------------------------------------------------------
   Fußbereich mit Foto (Marlborough Sounds, Neuseeland)

   Das Foto ist nicht mehr randlos, sondern genau so breit wie der übrige
   Seiteninhalt (--wrap, also höchstens 1080 px). Das ist der Grund,
   warum der Fußbereich jetzt handlich bleibt: Bei einem randlosen Bild
   wuchs die Höhe mit der Monitorbreite mit – auf einem breiten Schirm
   auf über 1300 px. Jetzt hängt sie nur noch an der Inhaltsbreite und
   liegt bei höchstens 610 px – oben sind 15 Prozent Himmel
   weggeschnitten, das Bild ist dadurch flacher geworden.

   Das Bild ist dabei vollständig, unbeschnitten und in Originalfarben.
   Links und rechts steht der ruhige Seitenton --mist.

   Stellschraube ist --foot-w: kleinerer Wert = kleineres Bild und
   flacherer Fuß. Die Höhe folgt automatisch.

   Schrift auf halbtransparenter Tafel: Weiß 4.9:1, Gold 4.6:1.
   -------------------------------------------------------------------- */
.site-foot {
  --foot-w: min(100vw - 40px, 1080px);   /* Breite des Fotos = Inhaltsbreite */

  display: flex;
  flex-direction: column;
  justify-content: flex-end;             /* Inhalt unten, Landschaft darüber */
  width: 100%;
  min-height: calc(var(--foot-w) / 1.7709);   /* Höhe folgt dem Bildformat */
  border-top: 1px solid var(--line);
  padding: 0 0 clamp(16px, 2vh, 26px);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.94);
  background-color: var(--mist);         /* Flächen links und rechts */
  background-image: url("assets/foot-bg-1920.jpg");
  background-size: var(--foot-w) auto;   /* genau Inhaltsbreite, Höhe proportional */
  background-position: center top;
  background-repeat: no-repeat;
}

@media (max-width: 760px) {
  .site-foot { background-image: url("assets/foot-bg-1200.jpg"); }
}

/* Die Tafel unter dem Inhalt. Beide .wrap-Blöcke im Fußbereich teilen
   sie sich und stoßen nahtlos aneinander. */
.site-foot > .wrap {
  /* Rund ein Viertel dünner als zuvor: 19,5 statt 26 Prozent Deckung,
     und der Ton nochmals heller angesetzt (14,24,46). Das Foto steht
     damit deutlich im Vordergrund.

     Damit die Schrift trotzdem trägt, ist die Unschärfe von 32 auf 44 px
     gestiegen: Sie mittelt die hellen Stellen im Foto heraus, wodurch der
     Kontrast steigt, obwohl weniger Farbe darüberliegt.

     Gemessen an der hellsten Stelle darunter: 4.9:1 für weiße Schrift –
     über dem Richtwert 4.5:1. Das ist die Untergrenze; dünner geht nur
     noch auf Kosten der Lesbarkeit. Die Links tragen zusätzlich dieselbe
     Aura wie der Anspruch darüber. */
  background: rgba(14, 24, 46, 0.195);
  -webkit-backdrop-filter: blur(44px) saturate(1.1);
  backdrop-filter: blur(44px) saturate(1.1);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.66);
  padding-inline: clamp(18px, 3vw, 32px);
}

/* Browser ohne Milchglas-Unschärfe bekommen eine kräftigere Fläche,
   sonst stünde die Schrift dort auf dem blanken Foto. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-foot > .wrap { background: rgba(14, 24, 46, 0.56); }
}

/* Der obere Block – Logo, Marke und Anspruch – steht ohne Tafel direkt
   auf dem Foto. Getragen wird die Lesbarkeit dort allein vom Schatten:
   eine dunkle Aura in drei Stufen, die auch über hellem Wasser greift.
   Ohne sie wäre weiße Schrift auf der Bucht kaum zu entziffern. */
.site-foot > .wrap:first-child {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  padding-top: clamp(18px, 2.6vw, 26px);
  padding-bottom: clamp(14px, 2vw, 20px);
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 10px rgba(0, 0, 0, 0.75),
    0 0 30px rgba(0, 0, 0, 0.55);
}

/* Auch das App-Symbol bekommt einen Schatten, sonst schwebt es haltlos. */
.site-foot .foot-brand img {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}

/* Die Linkzeile behält ihre Tafel – jetzt rundum abgerundet, weil sie
   nicht mehr an einen Block darüber stößt. */
/* Der Streifen soll die Zeile nur umschließen, nicht weit darunter
   liegen. Seine Höhe entstand vorher fast ganz aus der Mindesthöhe der
   Links (44 px als bequeme Fingerfläche) plus großzügiger Polsterung.
   Am Zeigegerät genügen 32 px; auf Tastflächen bleiben die 44 px – siehe
   die Regel für (pointer: coarse) weiter unten. */
.site-foot > .wrap:last-child {
  border-radius: 16px;
  padding-block: 5px;
}
.site-foot .foot-grid a,
.site-foot .foot-grid #ck-settings { min-height: 32px; }

/* Auf Geräten, die mit dem Finger bedient werden, bleibt die volle
   Trefferfläche erhalten – dort ist der Streifen dann etwas höher. */
@media (pointer: coarse) {
  .site-foot .foot-grid a,
  .site-foot .foot-grid #ck-settings { min-height: 44px; }
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}
.foot-brand img {
  width: 44px; height: 44px;
  border-radius: 11px;
  box-shadow: var(--shadow-s);
}
/* Der Schriftzug „Dinoray" trägt dieselbe Aura wie der Anspruch darunter
   und die Links – die ganze Fußzeile ist damit einheitlich gesetzt.
   Der Schatten steht hier eigens, weil der übergeordnete Block einen
   schwächeren hat und die Serifenschrift dünnere Striche zieht. */
.foot-brand .fb-name {
  font-family: var(--display);
  font-size: 1.28rem;
  color: #ffffff;
  display: block;
  line-height: 1.2;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 16px rgba(0, 0, 0, 0.85),
    0 0 38px rgba(0, 0, 0, 0.6);
}
/* Der Anspruch ist die kleinste Schrift ohne Tafel und steht damit am
   ungeschütztesten auf dem Foto. Er bekommt deshalb volles Weiß statt
   82 Prozent, eine Spur mehr Gewicht und eine dichtere, weiter
   auslaufende Aura als die Marke darüber. */
.foot-brand .fb-claim {
  font-size: 0.85rem;
  color: #ffffff;
  font-weight: 500;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 16px rgba(0, 0, 0, 0.85),
    0 0 38px rgba(0, 0, 0, 0.6);
}

.foot-grid { display: flex; flex-wrap: wrap; gap: 2px 28px; align-items: center; }
/* Impressum, Datenschutz, Support und Cookie-Einstellungen tragen jetzt
   dasselbe volle Weiß und dieselbe vierstufige Aura wie der Anspruch
   über ihnen. Das Cremegold entfällt damit – die Fußzeile spricht mit
   einer Stimme. */
.site-foot a {
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 16px rgba(0, 0, 0, 0.85),
    0 0 38px rgba(0, 0, 0, 0.6);
}
.site-foot a:hover { color: #ffffff; text-decoration: underline; }
/* Die Jahreszeile steht in derselben Reihe und bekommt dasselbe Bild,
   damit die Zeile einheitlich wirkt. */
.foot-right {
  margin-left: auto;
  color: #ffffff;
  font-weight: 500;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 16px rgba(0, 0, 0, 0.85),
    0 0 38px rgba(0, 0, 0, 0.6);
}

/* ---------- Rechtstexte ---------- */

.doc { padding: clamp(48px, 7vw, 80px) 0; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); margin-bottom: 6px; }
.doc h2 { font-size: 1.28rem; margin-top: 40px; margin-bottom: 8px; }
.doc .updated { font-size: 0.86rem; color: var(--ink-soft); margin-bottom: 28px; }
.doc .callout {
  background: var(--mist);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 8px;
}
.doc code {
  background: var(--mist);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.9em;
}
.doc hr { border: none; border-top: 1px solid var(--line); margin: 56px 0; }
.doc .fill-me {
  background: #fff6d9;
  border: 1px dashed var(--sand-deep);
  border-radius: 10px;
  padding: 2px 8px;
}

/* ---------- Schmal ---------- */

@media (max-width: 620px) {
  /* Sprungziele der Startseite ausblenden – sie stehen auch in der Fußzeile */
  .head-links a[data-nav="1"], .head-links a[data-nav="2"],
  .head-links a[href^="#"] { display: none; }
  .site-head .wrap { min-height: 60px; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .counter-card { order: 2; }
  .head-links { gap: 16px; font-size: 0.86rem; }
  .foot-right { margin-left: 0; width: 100%; }
}

/* Auf schmalen Geräten sollen Impressum, Datenschutz, Support und
   Cookie-Einstellungen in einer Zeile bleiben. Schrift und Abstände
   schrumpfen dafür mit; Umbruch bleibt als Notausgang erlaubt. */
@media (max-width: 620px) {
  .site-foot .foot-grid { gap: 2px 16px; font-size: 0.8rem; }
  .site-foot .foot-grid a,
  .site-foot .foot-grid #ck-settings { min-height: 38px; }
}
@media (max-width: 440px) {
  .site-foot .foot-grid { gap: 2px 9px; font-size: 0.7rem; }
  .site-foot > .wrap { padding-inline: 16px; }
}
@media (max-width: 380px) {
  .site-foot .foot-grid { gap: 2px 8px; font-size: 0.64rem; }
  .site-foot > .wrap { padding-inline: 13px; }
}

@media (max-width: 480px) {
  .counter-top { gap: 16px; }
  .counter-figure { width: 78px; }
  .btn { width: 100%; }
  .store-badge img { height: 48px; }
  .store-badge-caption { min-height: 26px; padding: 5px 11px; font-size: 0.74rem; }
}


/* ============================================================
   Vorteile-Seite: senkrechte Liste mit feiner Linie
   ============================================================ */

.doc .benefit-group {
  padding: 0; /* überschreibt den großen allgemeinen section-Abstand */
  margin-bottom: clamp(30px, 4vw, 44px);
}

.benefit-group > h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  margin-bottom: 6px;
}

.benefit-group > .group-note {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 18px;
  max-width: 54ch;
}

.benefit-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  position: relative;
  border-left: 1px solid var(--line-strong);
}

.benefit-list li {
  position: relative;
  padding: 0 0 16px 0;
}
.benefit-list li:last-child { padding-bottom: 0; }

/* Goldene Markierung auf der Linie */
.benefit-list li::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 0.52em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sand);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px rgba(215,178,92,0.35);
}

.benefit-list b {
  display: block;
  font-weight: 600;
  font-size: 1.04rem;
  color: var(--ink);
  margin-bottom: 3px;
  letter-spacing: -0.005em;
}

.benefit-list span {
  display: block;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 58ch;
}

/* Abschluss-Karte */
.benefit-cta {
  text-align: center;
  padding: clamp(34px, 5vw, 52px) 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-l);
  margin-top: 10px;
}
.benefit-cta h2 { margin: 0 0 10px; }
.benefit-cta p { color: var(--ink-soft); }
.benefit-store-badges { margin-top: 22px; }

@media (max-width: 480px) {
  .doc .benefit-group { margin-bottom: 28px; }
  .benefit-list { padding-left: 24px; }
  .benefit-list li { padding-bottom: 14px; }
  .benefit-list li::before { left: -30px; }
}


/* ---------- Preis-Hinweis unter den Download-Knöpfen ---------- */

.price-note {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(215, 178, 92, 0.13);
  border: 1px solid rgba(215, 178, 92, 0.42);
  font-size: 0.9rem;
  color: var(--ink);
}
.price-note strong { font-weight: 600; }
.price-note .sep { color: var(--sand-deep); }

.hero .price-note { margin-top: 20px; }

/* Hero: Download-Badges mittig zur Preis-Kapsel ausrichten */
.hero .store-badges {
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hero .price-note {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* ---------- Sprachumschalter ---------- */

.lang-select {
  min-height: 44px;
  font-family: var(--body);
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  cursor: pointer;
  max-width: 148px;
}
.lang-select:hover { border-color: var(--cobalt); }

/* ---------- Rechts-nach-links (Arabisch, Urdu) ---------- */

[dir="rtl"] .head-links { margin-left: 0; margin-right: auto; }
[dir="rtl"] .foot-right { margin-left: 0; margin-right: auto; }
[dir="rtl"] .benefit-list { border-left: none; border-right: 1px solid var(--line-strong); padding-left: 0; padding-right: 30px; }
[dir="rtl"] .benefit-list li::before { left: auto; right: -36px; }
[dir="rtl"] .price-list li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .price-list li::before { left: auto; right: 6px; }
[dir="rtl"] .price-list { text-align: right; }

@media (max-width: 640px) {
  .lang-select { max-width: 120px; }
}

/* ---------- Beispiele unter den Kategorien ---------- */

.examples {
  margin-top: clamp(30px, 4vw, 44px);
  padding-top: clamp(26px, 3vw, 34px);
  border-top: 1px solid var(--line);
}

.examples-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand-deep);
  margin: 0 0 18px;
}

/* Seit 4.6: neun Beispiele, auf jedem Gerät drei je Zeile (3 × 3),
   davor ein goldener, mittiger Punkt. */
.example-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 32px;
}

.example-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.example-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(0.725em - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sand);
}
[dir="rtl"] .example-list li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .example-list li::before { left: auto; right: 2px; }

@media (max-width: 760px) {
  .example-list { gap: 14px 14px; }
  .example-list li { font-size: 0.86rem; padding-left: 16px; }
  .example-list li::before { left: 0; width: 7px; height: 7px; top: calc(0.725em - 3.5px); }
  [dir="rtl"] .example-list li { padding-left: 0; padding-right: 16px; }
  [dir="rtl"] .example-list li::before { left: auto; right: 0; }
}
@media (max-width: 420px) {
  .example-list { gap: 12px 10px; }
  .example-list li { font-size: 0.78rem; padding-left: 13px; }
  .example-list li::before { width: 6px; height: 6px; top: calc(0.725em - 3px); }
  [dir="rtl"] .example-list li { padding-right: 13px; }
}

/* ---------- Über den Entwickler ---------- */

.developer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  max-width: 860px;
  margin-inline: auto;
  padding: clamp(30px, 4vw, 44px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-l);
}

.dev-photo {
  width: clamp(112px, 16vw, 168px);
  height: clamp(112px, 16vw, 168px);
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--paper);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-m);
}

.developer h2 { margin-bottom: 14px; }
.developer p { color: var(--ink-soft); }
.developer p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .developer {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .developer .dev-text { text-align: left; }
}

[dir="rtl"] .developer .dev-text { text-align: right; }

/* ===================== SCREENSHOTS GALLERY ===================== */
.shots{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:clamp(20px, 3vw, 34px);
  margin-top:clamp(28px, 4vw, 44px);
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
.shot{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
/* Telefon-Rahmen im Stil des iPhone 18 Pro: dunkelblauer Metallrahmen,
   dünner, gleichmäßiger schwarzer Displayrand, seitliche Tasten */
.device{
  --frame-hi:#3d5a8c;
  --frame-mid:#1b2c52;
  --frame-lo:#0c1630;
  position:relative;
  width:100%;
  padding:1.6%;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 7%, rgba(255,255,255,0) 93%, rgba(255,255,255,0.14) 100%),
    linear-gradient(160deg, var(--frame-hi) 0%, var(--frame-mid) 45%, var(--frame-lo) 100%);
  border-radius:15.5% / 7.2%;
  box-shadow:
    inset 0 0 0 1px rgba(160,190,240,0.35),
    inset 0 0 0 2.5px rgba(5,10,25,0.55),
    var(--shadow-l);
  transition:transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s ease;
  will-change:transform;
}
/* schwarzer Displayrand */
.device-screen{
  position:relative;
  padding:2.2%;
  background:#05070c;
  border-radius:14% / 6.5%;
}
.device img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12.2% / 5.6%;
  background:var(--paper);
}
/* Dynamic Island nur für Bilder ohne eigene Statusleiste */
.device-island{
  position:absolute;
  z-index:1;
  top:2.4%;
  left:50%;
  width:26%;
  height:3%;
  transform:translateX(-50%);
  background:#000;
  border-radius:999px;
}
/* Seitentasten: links Action-Taste und Lautstärke, rechts Seitentaste und Kamerasteuerung */
.device::before,
.device::after{
  content:"";
  position:absolute;
  width:1.1%;
  border-radius:2px;
  background:linear-gradient(90deg, var(--frame-lo), var(--frame-hi));
}
.device::before{
  left:-1%;
  top:17%;
  height:5%;
}
.device-screen::before{
  content:"";
  position:absolute;
  left:-4.1%;
  top:25%;
  width:1.2%;
  height:18.5%;
  border-radius:2px;
  background:
    linear-gradient(var(--frame-mid), var(--frame-mid)) top / 100% 43% no-repeat,
    linear-gradient(var(--frame-mid), var(--frame-mid)) bottom / 100% 43% no-repeat;
}
.device::after{
  right:-1%;
  top:26%;
  height:10%;
  background:linear-gradient(270deg, var(--frame-lo), var(--frame-hi));
}
.device-screen::after{
  content:"";
  position:absolute;
  right:-4.1%;
  top:55%;
  width:1.2%;
  height:6%;
  border-radius:2px;
  background:var(--frame-mid);
}
.shot:hover .device,
.shot:focus-within .device{
  transform:scale(1.16) translateY(-8px);
  box-shadow:
    inset 0 0 0 1px rgba(160,190,240,0.35),
    inset 0 0 0 2.5px rgba(5,10,25,0.55),
    0 12px 30px rgba(27,36,71,0.18), 0 54px 110px rgba(27,36,71,0.30);
  z-index:5;
}
@media (hover:none){
  /* Auf Touch-Geräten keine Vergrößerung */
  .shot:hover .device{ transform:none; }
}
.shot figcaption{
  margin-top:16px;
  font-size:0.95rem;
  line-height:1.45;
  color:var(--cobalt-text);
  font-weight:500;
  max-width:26ch;
}
@media (max-width:520px){
  .shots{ grid-template-columns:repeat(2, 1fr); gap:16px; }
  .shot figcaption{ font-size:0.85rem; margin-top:10px; }
}


/* ---------- Cookie-/Einwilligungsbanner ---------- */
.cookie-banner {
  display: none;
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 9999;
}
.cookie-banner.show { display: block; }
.cookie-inner {
  max-width: 720px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-l);
  padding: 18px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.cookie-text {
  margin: 0;
  flex: 1 1 300px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
}
.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.cookie-link {
  color: var(--cobalt-text);
  text-decoration: underline;
  font-size: 0.88rem;
  white-space: nowrap;
}
.cookie-link:hover { color: var(--ink); }
.btn-cookie {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 12px;
  padding: 11px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-cookie-primary {
  background: linear-gradient(180deg, #6b78b3 0%, var(--cobalt-btn) 100%);
  color: #fff;
  box-shadow: 0 1px 2px rgba(27,36,71,0.16), 0 8px 18px rgba(106,119,177,0.30);
}
.btn-cookie-primary:hover { background: #4f5c98; transform: translateY(-1px); }
.btn-cookie-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-cookie-ghost:hover { border-color: var(--cobalt); color: var(--cobalt-text); }

/* Widerruf-Link im Footer sieht aus wie die übrigen Footer-Links */
#ck-settings {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: #ffffff;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 0.95),
    0 0 16px rgba(0, 0, 0, 0.85),
    0 0 38px rgba(0, 0, 0, 0.6);
}
#ck-settings:hover { color: #ffffff; text-decoration: underline; }

@media (max-width: 560px) {
  .cookie-inner { padding: 16px; }
  .cookie-actions { width: 100%; }
  .cookie-actions .btn-cookie { flex: 1 1 auto; }
  .cookie-link { width: 100%; }
}

/* ===================== UNTERSTÜTZEN (Entwicklerseite) ===================== */
.support-dev {
  max-width: 860px;
  margin: clamp(28px, 5vw, 52px) auto 0;
  padding: clamp(30px, 4vw, 44px);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 26px;
}

.support-dev h2 { margin: 0 0 14px; }

/* Fließtext bewusst wie bei .developer p: Grundschriftgröße, kein .lead */
.support-lead {
  margin: 0 0 1rem;
  color: var(--ink-soft);
  max-width: none;
}
.support-lead:last-child { margin-bottom: 0; }

.support-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: clamp(24px, 3vw, 32px);
}

.support-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 22px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-s);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

a.support-card:hover,
a.support-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--cobalt);
  box-shadow: var(--shadow-m);
}

.support-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(106, 119, 177, 0.12);
  color: var(--cobalt-text);
  flex: 0 0 auto;
}
.support-icon svg { width: 26px; height: 26px; }
.support-icon img { width: 26px; height: 26px; object-fit: contain; }

/* Überweisung: Dinorays eigener Sand-Akzent, damit sich die beiden
   Kacheln klar unterscheiden und PayPal-Blau als Fremdmarke lesbar bleibt. */
.support-icon--bank {
  background: rgba(215, 178, 92, 0.18);
  color: var(--sand-deep);
}

/* PayPal: offizielles PayPal-Blau (#0070E0). Farbe unverändert übernommen. */
.support-icon--paypal {
  background: rgba(0, 112, 224, 0.11);
  color: #0070E0;
}
html[data-theme="dark"] .support-icon--paypal {
  background: rgba(0, 112, 224, 0.22);
  color: #7FBEFF;
}

.support-t { font-weight: 600; font-size: 1rem; color: var(--ink); }
.support-d { margin: 0; font-size: 0.87rem; line-height: 1.55; color: var(--ink-soft); }

.support-iban {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  user-select: all;
  direction: ltr;
  text-align: left;
}

.support-holder { margin: 2px 0 0; font-size: 0.87rem; color: var(--ink-soft); }
.support-holder b { color: var(--ink); font-weight: 600; }

.support-copy {
  margin-top: 4px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--cobalt-text);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.support-copy:hover { border-color: var(--cobalt); background: rgba(106, 119, 177, 0.10); }
.support-copy.is-done { border-color: var(--sand); color: var(--sand-deep); }

.support-note {
  margin: clamp(22px, 3vw, 28px) 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .support-dev { text-align: left; }
}

[dir="rtl"] .support-card { align-items: flex-start; }


/* ---------- Blauer Schimmer im Kopfbereich ----------
   Nimmt den kühlen Weiß-Lavendel-Verlauf des Vorschaubilds (og-image.png)
   auf. Nur hier, damit er selten bleibt und wie ein Morgenlicht wirkt. */

.hero {
  background:
    radial-gradient(860px 540px at 100% 0%, rgba(142,154,210,0.30), transparent 68%),
    linear-gradient(135deg, #ffffff 0%, #f8f9fd 42%, #e9ecf8 100%);
}

html[data-theme="dark"] .hero {
  background:
    radial-gradient(700px 440px at 100% 0%, rgba(143,156,219,0.20), rgba(143,156,219,0.06) 45%, transparent 72%),
    radial-gradient(1100px 460px at 12% -8%, rgba(142,154,210,0.10), transparent 62%);
}

/* Der kurze goldene Strich aus dem Vorschaubild, zwischen Überschrift
   und Einleitung. */
.hero h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 28px;
  border-radius: 2px;
  background: var(--sand);
}
.hero h1 + .lead { margin-top: 26px; }
[dir="rtl"] .hero h1::after { margin-right: 0; margin-left: auto; }

/* Store-Knöpfe auf derselben Kante wie der Text darüber. */
.hero .store-badges {
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
}

/* ---------- Blauer Schimmer auch auf den Unterseiten ----------
   Benefits, Developer, Support, Impressum und Datenschutz bekommen oben
   denselben Schein wie der Kopfbereich der Startseite: von rechts oben
   blau, nach links flach ins Weiße auslaufend. Er liegt als eigene
   Fläche hinter dem Inhalt und läuft nach unten weich in den
   Seitenhintergrund aus, damit lange Seiten keine harte Kante bekommen. */

main.doc {
  position: relative;
  isolation: isolate;
}
main.doc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 640px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(860px 540px at 100% 0%, rgba(142,154,210,0.30), transparent 68%),
    linear-gradient(135deg, #ffffff 0%, #f8f9fd 42%, #e9ecf8 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
html[data-theme="dark"] main.doc::before {
  background:
    radial-gradient(700px 440px at 100% 0%, rgba(143,156,219,0.20), rgba(143,156,219,0.06) 45%, transparent 72%),
    radial-gradient(1100px 460px at 12% -8%, rgba(142,154,210,0.10), transparent 62%);
}


/* ============================================================
   Mehr Farbe (Okt 2026)
   Statt reinem Weiß trägt die Seite die Farben des Dinoray-Logos,
   im selben Verhältnis wie dort: etwa vier Fünftel Blau (mit einem
   Hauch Lavendel, damit es nicht kalt wirkt) und ein Fünftel
   Sandgold aus der Sanduhr – als warmes Licht im Kopfbereich und
   im Preis-Band. Karten bleiben fast weiß, damit sie sich abheben.
   Die Abschnitte gehen weich ineinander über: Jedes Band beginnt
   und endet im Grundton, statt mit einer harten Kante.
   ============================================================ */

:root, html, body {
  --paper:        #eeedfb;   /* helles Blau mit Hauch Lavendel */
  --card:         #fbfaff;   /* Karten: fast weiß, leicht bläulich */
  --mist:         #e1e0f6;   /* Bänder: Logo-Blau, leicht lavendel */
  --head-bg:      rgba(238, 237, 251, 0.86);
  --ink-soft:     #4f5781;   /* etwas dunkler, gut lesbar auf Blau */
  --sand-deep:    #6e5417;   /* Sand-Schrift, gut lesbar auf Blau */
  --line:         rgba(77, 90, 149, 0.14);
  --line-strong:  rgba(77, 90, 149, 0.22);
  --shadow-s: 0 1px 2px rgba(52,64,120,0.07), 0 4px 12px rgba(52,64,120,0.08);
  --shadow-m: 0 1px 3px rgba(52,64,120,0.08), 0 12px 32px rgba(52,64,120,0.12);
  --shadow-l: 0 2px 6px rgba(52,64,120,0.08), 0 28px 64px rgba(52,64,120,0.16);
}
html[data-theme="dark"],
html[data-theme="dark"] body {
  --card:         #19203f;
  --head-bg:      rgba(16, 21, 43, 0.88);
}

/* Kopfzeile im selben Blau wie der Grund */
.site-head { background: var(--head-bg); }

/* Karten und Felder heben sich hell vom farbigen Grund ab */
.counter-card,
.counter-field input,
.chip,
.feature,
.band .feature,
.price-card,
.doc .callout,
.doc code,
.benefit-cta,
.lang-select,
.developer,
.cookie-inner,
.support-dev,
.support-card,
.theme-toggle::before {
  background: var(--card);
}
.app-mark { background: var(--card); }
.dev-photo { border-color: var(--card); }

/* Kopfbereich: Logo-Blau von rechts oben, Sandschein links unten;
   nach unten läuft er weich in den Grundton aus. */
.hero {
  background:
    linear-gradient(180deg, transparent 62%, var(--paper) 100%),
    radial-gradient(620px 420px at 62% 78%, rgba(215,178,92,0.26), transparent 70%),
    radial-gradient(900px 560px at 100% 0%, rgba(106,119,177,0.28), transparent 68%),
    radial-gradient(700px 460px at 6% 72%, rgba(215,178,92,0.24), transparent 70%),
    radial-gradient(700px 380px at 0% -10%, rgba(255,255,255,0.70), transparent 62%),
    linear-gradient(135deg, #f8f6fe 0%, #eeedfb 46%, #d9d8f3 100%);
}
html[data-theme="dark"] .hero {
  background:
    linear-gradient(180deg, transparent 62%, var(--paper) 100%),
    radial-gradient(760px 480px at 100% 0%, rgba(143,156,219,0.24), rgba(143,156,219,0.07) 45%, transparent 72%),
    radial-gradient(520px 420px at 76% 62%, rgba(223,189,105,0.08), transparent 70%),
    radial-gradient(620px 380px at 4% 100%, rgba(223,189,105,0.07), transparent 70%),
    linear-gradient(160deg, #141a35 0%, #10152b 100%);
}

/* Bänder: beginnen und enden im Grundton, dazwischen Logo-Blau */
section.band {
  background:
    radial-gradient(900px 420px at 100% 30%, rgba(106,119,177,0.11), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--mist) 26%, var(--mist) 74%, var(--paper) 100%);
}
#screenshots.band {
  background:
    radial-gradient(800px 420px at 0% 30%, rgba(215,178,92,0.16), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--mist) 26%, var(--mist) 60%, var(--paper) 100%);
}
/* Das Preis-Band läuft unten in den Fußbereich aus (gleicher Ton) */
#price.band {
  background:
    radial-gradient(760px 440px at 50% 40%, rgba(215,178,92,0.30), transparent 72%),
    radial-gradient(900px 420px at 100% 40%, rgba(106,119,177,0.10), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--mist) 34%, var(--mist) 100%);
}
.site-foot { border-top-color: transparent; }

html[data-theme="dark"] section.band {
  background:
    radial-gradient(900px 420px at 100% 30%, rgba(143,156,219,0.08), transparent 70%),
    linear-gradient(180deg, var(--paper) 0%, var(--mist) 26%, var(--mist) 74%, var(--paper) 100%);
}
html[data-theme="dark"] #screenshots.band {
  background: linear-gradient(180deg, var(--paper) 0%, var(--mist) 26%, var(--mist) 60%, var(--paper) 100%);
}
html[data-theme="dark"] #price.band {
  background:
    radial-gradient(640px 360px at 50% 32%, rgba(223,189,105,0.07), transparent 72%),
    linear-gradient(180deg, var(--paper) 0%, var(--mist) 34%, var(--mist) 100%);
}

/* Unterseiten: derselbe Schein oben */
main.doc::before {
  background:
    radial-gradient(900px 560px at 100% 0%, rgba(106,119,177,0.28), transparent 68%),
    radial-gradient(560px 380px at 0% 40%, rgba(215,178,92,0.18), transparent 70%),
    radial-gradient(700px 380px at 0% -10%, rgba(255,255,255,0.70), transparent 62%),
    linear-gradient(135deg, #f8f6fe 0%, #eeedfb 46%, #d9d8f3 100%);
}

/* Merkmal-Karten: dünne Logo-Linie oben als Farbakzent */
.feature { border-top: 3px solid rgba(106,119,177,0.45); }
html[data-theme="dark"] .feature { border-top-color: rgba(168,179,232,0.45); }