/* ============================================================
   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; }

.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; }

/* Mehr Luft zwischen den drei zentralen Überschriften und ihrem Folgetext. */
.hero h1 + .lead,
#zyklen .section-head h2 + .lead,
#jetzt .section-head h2 + .lead {
  margin-top: 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 ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 11px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px 10px 14px;
  font-size: 0.93rem;
  font-weight: 500;
}

.dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }

/* ---------- 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-bottom: 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;
}

.example-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 12px 32px;
}

.example-list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.98rem;
  color: var(--ink);
}

.example-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--sand);
}

[dir="rtl"] .example-list li { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .example-list li::before { left: auto; right: 0; }

/* ---------- Ü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(3, minmax(0, 1fr));
  gap:clamp(20px, 3vw, 34px);
  margin-top:clamp(28px, 4vw, 44px);
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
.screenshots-band{
  background:linear-gradient(180deg, rgba(244,246,255,0.76), rgba(255,251,240,0.66));
}
.shot{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
/* Telefon-Rahmen um echte Screenshots, im Goldton der Sanduhr (--sand) */
.device{
  position:relative;
  width:100%;
  padding:2.8%;
  background:linear-gradient(155deg, var(--sand) 0%, var(--sand-deep) 100%);
  border-radius:16% / 7.4%;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.25),
    inset 0 0 0 3px rgba(0,0,0,0.25),
    var(--shadow-l);
  transition:transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s ease;
  will-change:transform;
}
.device img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12.5% / 5.8%;
  background:var(--paper);
}
.shot:hover .device,
.shot:focus-within .device{
  transform:scale(1.16) translateY(-8px);
  box-shadow:0 12px 30px rgba(27,36,71,0.18), 0 54px 110px rgba(27,36,71,0.30);
  z-index:5;
}
/* Lorbeer/Badge bleibt eine edle Karte, ohne Telefonrahmen */
.shot-badge img{
  width:100%;
  height:auto;
  border-radius:26px;
  box-shadow:var(--shadow-l);
  border:1px solid var(--line);
  background:var(--paper);
  transition:transform 0.35s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.35s ease;
  will-change:transform;
}
.shot-badge:hover img,
.shot-badge:focus-within img{
  transform:scale(1.16) translateY(-8px);
  box-shadow: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,
  .shot-badge:hover img{ transform:none; box-shadow:var(--shadow-l); }
}
.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; }
}

@media (min-width:521px) and (max-width:820px){
  .shots{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}


/* ---------- 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; }

/* ============================================================
   Advaita Ray – Ergänzungen
   Nur das Nötigste: der Zeiger-Satz in Serifenschrift, damit er
   gesprochen wirkt und nicht wie Bedienoberfläche.
   ============================================================ */

.doc-quote {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 18px 0 14px;
}

.band .doc-quote { margin-top: 26px; }

.counter-card .doc-quote { margin: 14px 0 12px; }

/* Die Karte in der Kopfzone trägt Text statt Zähler. */
.counter-card { text-align: left; }
.counter-card .counter-label { margin-bottom: 2px; }

/* Absätze im Fließtext der Abschnitte etwas ruhiger setzen. */
#ueber p { max-width: 68ch; line-height: 1.72; margin: 0 0 14px; }