:root {
  /* Motion tokens — strong custom curves. The built-in CSS easings are too
     weak to read as intentional. ease-out for enter/feedback, ease-in-out for
     on-screen movement. Never ease-in on UI: it delays the first frame, which
     is exactly the moment the user is watching. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --gold: #d4af37;
  --copper: #b87333;
  --dark: #1a1a1a;
  --bg-base: #1a1a1a;
  --text: #ffffff;
  --muted: #f7f7f7;
  --card: rgba(16, 16, 16, 0.82);
  --line: rgba(212, 175, 55, 0.24);
  --nav-bg: rgba(26, 26, 26, 0.62);
  --shadow-pop: rgba(255, 255, 255, 0.06);

  /* Professional type system (site-wide, both themes, both languages) */
  --font-head: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Apply the professional fonts everywhere, overriding the old scattered
   Sora / Space Grotesk / Manrope declarations across every component.
   !important so it wins over the later legacy font-family rules. */
body,
input, textarea, select, button,
.card p, .panel p, li, p, span, a, label, small, td, th, div {
  font-family: var(--font-body) !important;
}
h1, h2, h3, h4, h5, h6,
.brand, .kicker, .eyebrow, .btn,
.cfg-h2, .cfg-feat-name, .cfg-mod-name, .mb-amount, .mb-cap,
.recommended-badge, .todo, .badge, .lang-links a, .nav-links a,
.hero h1, .hero h2, .price-hero h1, h3.section {
  font-family: var(--font-head) !important;
}
/* Prices / tabular numbers stay in the body font but tabular for alignment */
.tier-card .price, .cfg-feat-prices, .cfg-mod-price, .roi-results .big,
.cfg-chip .delta, table.account-table td {
  font-family: var(--font-body) !important;
  font-variant-numeric: tabular-nums;
}

html[data-theme="light"] {
  --bg-base: #c8bda8;
  --text: #1b1b1b;
  --muted: #2a2a2a;
  --card: rgba(248, 243, 233, 0.68);
  --line: rgba(184, 115, 51, 0.28);
  --nav-bg: rgba(200, 189, 168, 0.92);
  --shadow-pop: rgba(0, 0, 0, 0.1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: "Sora", "Space Grotesk", "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg-base);
  overflow-x: hidden;
  line-height: 1.55;
  isolation: isolate;
}

html[data-font="classic"] body {
  font-family: "Space Grotesk", "Sora", "Segoe UI", sans-serif;
}

body {
  animation: pageFadeIn 300ms ease-out both;
}

@keyframes pageFadeIn {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

#particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 12%, rgba(212, 175, 55, 0.2), transparent 32%),
    radial-gradient(circle at 84% 82%, rgba(184, 115, 51, 0.26), transparent 49%),
    linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, rgba(26, 26, 26, 0) 65%);
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(10px);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--line);
}

main {
  position: relative;
  z-index: 2;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.9rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.brand {
  font-family: "Manrope", "Sora", "Space Grotesk", sans-serif;
  letter-spacing: 0.005em;
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.32rem 0.7rem 0.32rem 2.2rem;
  border-radius: 14px;
  position: relative;
  isolation: isolate;
  color: transparent;
  background:
    linear-gradient(135deg, #fff3cf 0%, #ecc36a 28%, #d4af37 55%, #b87333 100%);
  -webkit-background-clip: text;
  background-clip: text;
  transition: transform 220ms ease, filter 220ms ease;
}

.brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 236, 177, 0.05), rgba(184, 115, 51, 0.02));
  border: 1px solid rgba(212, 175, 55, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 177, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 6px 18px -8px rgba(212, 175, 55, 0.35);
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.brand::after {
  content: "";
  position: absolute;
  left: 0.62rem;
  top: 50%;
  width: 1.35rem;
  height: 1.35rem;
  transform: translateY(-50%);
  /* Dog face — ears, eyes, snout, nose (gold on dark; overridden for light below) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3 L8.5 10 L5 11.5 Z' fill='%23d4af37'/%3E%3Cpath d='M20 3 L15.5 10 L19 11.5 Z' fill='%23d4af37'/%3E%3Cpath d='M12 5 C7.2 5 5 9 5 13 C5 18 8 21 12 21 C16 21 19 18 19 13 C19 9 16.8 5 12 5 Z' fill='%23d4af37'/%3E%3Cellipse cx='12' cy='16.2' rx='3.3' ry='2.7' fill='%23b87333'/%3E%3Ccircle cx='9.4' cy='11.6' r='1.15' fill='%231b1b1b'/%3E%3Ccircle cx='14.6' cy='11.6' r='1.15' fill='%231b1b1b'/%3E%3Cellipse cx='12' cy='15.2' rx='1.6' ry='1.15' fill='%231b1b1b'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.35));
  opacity: 0.98;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Light theme: darker copper dog so it reads on the cream nav pill */
html[data-theme="light"] .brand::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3 L8.5 10 L5 11.5 Z' fill='%237a4a16'/%3E%3Cpath d='M20 3 L15.5 10 L19 11.5 Z' fill='%237a4a16'/%3E%3Cpath d='M12 5 C7.2 5 5 9 5 13 C5 18 8 21 12 21 C16 21 19 18 19 13 C19 9 16.8 5 12 5 Z' fill='%237a4a16'/%3E%3Cellipse cx='12' cy='16.2' rx='3.3' ry='2.7' fill='%23b87333'/%3E%3Ccircle cx='9.4' cy='11.6' r='1.15' fill='%23fffaf0'/%3E%3Ccircle cx='14.6' cy='11.6' r='1.15' fill='%23fffaf0'/%3E%3Cellipse cx='12' cy='15.2' rx='1.6' ry='1.15' fill='%231b1b1b'/%3E%3C/svg%3E");
}

.brand:hover {
  transform: translateY(-1px);
  filter: brightness(1.08) saturate(1.1);
}

.brand:hover::before {
  border-color: rgba(212, 175, 55, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 236, 177, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 10px 26px -10px rgba(212, 175, 55, 0.55);
}

.brand:hover::after {
  transform: translateY(-50%) rotate(-8deg) scale(1.06);
}

html[data-font="classic"] .brand {
  font-family: "Space Grotesk", "Sora", sans-serif;
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.4rem 0.18rem 1.85rem;
}

html[data-font="classic"] .brand::before {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="light"] .brand {
  /* Solid dark-copper wordmark — the gradient-clip washed out on the cream pill. */
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #6b3d0f;
  color: #6b3d0f;
}

html[data-theme="light"] .brand::before {
  background:
    linear-gradient(135deg, rgba(255, 240, 208, 0.85), rgba(255, 226, 173, 0.55));
  border-color: rgba(154, 101, 28, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(124, 78, 23, 0.14),
    0 6px 16px -8px rgba(124, 78, 23, 0.3);
}

.nav-links {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.lang-links {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.lang-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.26rem 0.5rem;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.lang-links a:hover,
.lang-links a.active {
  color: var(--gold);
  border-color: var(--line);
  background: rgba(212, 175, 55, 0.1);
}

.lang-links a.active {
  border-color: rgba(212, 175, 55, 0.72);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.72), 0 0 10px rgba(212, 175, 55, 0.2);
}

.theme-toggle {
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.3rem 0.56rem;
  background: transparent;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
    transform 160ms var(--ease-out);
  animation: modePulse 0.5s ease-in-out infinite alternate;
}

.font-toggle {
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.3rem 0.56rem;
  background: transparent;
  font-family: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.theme-toggle:hover {
  color: var(--gold);
  border-color: var(--line);
  background: rgba(212, 175, 55, 0.1);
  transform: scale(1.03);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.24);
}

.cookie-banner {
  position: fixed;
  left: 1rem;
  /* reserve the bottom-right corner for the Tara mascot on desktop */
  right: 11rem;
  bottom: 1rem;
  z-index: 1000;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.9rem 1rem;
  background: rgba(15, 15, 18, 0.94);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

/* On narrow screens the mascot tucks away, so the banner can use full width. */
@media (max-width: 900px) {
  .cookie-banner { right: 1rem; }
}

.cookie-banner__text {
  font-size: 0.92rem;
  color: var(--text);
}

.cookie-banner__text a {
  color: var(--gold);
  margin-left: 0.3rem;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.6rem;
}

/* Light theme: the hardcoded dark banner left dark --text on a dark surface.
   Flip it to the same cream card surface the rest of the light theme uses. */
html[data-theme="light"] .cookie-banner {
  background: #fff8ec;
  border-color: rgba(184, 115, 51, 0.35);
  box-shadow: 0 10px 40px rgba(107, 61, 15, 0.18);
}

html[data-theme="light"] .cookie-banner__text {
  color: #1b1b1b;
}

html[data-theme="light"] .cookie-banner__text a {
  color: #6b3d0f;
}

@keyframes modePulse {
  from {
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.2);
  }
  to {
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.5);
  }
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.38rem 0.72rem;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--gold);
  border-color: var(--line);
  background: rgba(212, 175, 55, 0.1);
}

.nav-links a.active {
  border-color: rgba(212, 175, 55, 0.78);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.78), 0 0 12px rgba(212, 175, 55, 0.2);
}

/* Light theme: keep glowing gold border, label uses the same dark copper/gold
   shade as section headings ("Was Sie pro Monat sparen") for legibility on cream. */
html[data-theme="light"] .nav-links a.active,
html[data-theme="light"] .lang-links a.active {
  color: #6b3d0f;
  background: rgba(212, 175, 55, 0.22);
  border-color: rgba(154, 101, 28, 0.7);
  box-shadow: inset 0 0 0 1px rgba(154, 101, 28, 0.55), 0 0 10px rgba(212, 175, 55, 0.28);
}

.nav-links a:hover {
  transform: scale(1.03);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.24);
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2.2rem 1.2rem 5rem;
}

.hero {
  /* size to content — the old 60vh + centering left a big empty gap between
     the title/subtitle and the boxes below on every page. */
  min-height: auto;
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding-bottom: 0.5rem;
}

.kicker {
  color: var(--gold);
  text-transform: uppercase;
  font-size: 0.84rem;
  letter-spacing: 0.18em;
  margin: 0;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.subtitle {
  max-width: 680px;
  color: var(--muted);
  text-shadow: 0 0 10px var(--shadow-pop);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1rem;
}

.btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.62rem 1rem;
  text-decoration: none;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.btn.primary {
  color: #19150c;
  background: linear-gradient(120deg, var(--gold), var(--copper));
  border-color: transparent;
}

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

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;        /* unified spacing token (both axes) */
  margin-top: 0;
}

/* Consistent vertical rhythm between stacked sections on every page.
   Replaces the ad-hoc mix of grid margin-top / bare panels that made
   spacing look random across pages. */
main > section {
  margin-bottom: 1.5rem;
}
main > section:last-child {
  margin-bottom: 0;
}
main > section > .panel + .panel,
main > section > .grid + .panel,
main > section > .panel + .grid {
  margin-top: 1.5rem;
}

.card,
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover,
.panel:hover {
  transform: scale(1.015);
  border-color: rgba(212, 175, 55, 0.52);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.22);
}

.card h3,
.panel h2 {
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.card p,
.panel p,
li {
  color: var(--muted);
  font-weight: 500;
  text-shadow: 0 0 8px var(--shadow-pop);
}

.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.todo {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  color: #f5d477;
  background: rgba(212, 175, 55, 0.12);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  border: 1px dashed rgba(212, 175, 55, 0.4);
}

section[data-reveal] {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease;
  will-change: auto;
}

section[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

section[data-reveal].exit-up {
  opacity: 1;
  transform: none;
  transition-duration: 0s;
}

footer {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.86rem;
  text-shadow: 0 0 8px var(--shadow-pop);
}

.legal-footer {
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}

.legal-footer a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}

.legal-footer a:hover,
.legal-footer a.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.92rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.72rem 0.8rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.66);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}

html[data-theme="light"] .field input,
html[data-theme="light"] .field select,
html[data-theme="light"] .field textarea {
  background: rgba(255, 248, 236, 0.95);
  color: #1b1b1b;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18);
}

.status-note {
  margin-top: 0.8rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.status-note.success {
  color: #b9f0c9;
}

.status-note.error {
  color: #ffb5b5;
}

/* Light theme: pale dark-mode greens/reds are unreadable on cream — use
   stronger Austrian-spec contrast colours instead. */
html[data-theme="light"] .status-note.success {
  color: #1d7a5b;
  font-weight: 600;
}
html[data-theme="light"] .status-note.error {
  color: #8a1a1a;
  font-weight: 600;
}

.list-inline {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mini {
  font-size: 0.88rem;
  opacity: 0.92;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  background: rgba(10, 10, 10, 0.52);
}

html[data-theme="light"] .table-wrap {
  background: rgba(255, 251, 244, 0.9);
}

table.account-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

table.account-table th,
table.account-table td {
  border-bottom: 1px solid var(--line);
  padding: 0.78rem 0.8rem;
  text-align: left;
  font-size: 0.98rem;
}

table.account-table th {
  color: var(--gold);
}

.badge {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
}

.split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0.9rem;
}

.chat-box {
  border: 1px solid var(--line);
  border-radius: 0.95rem;
  padding: 0.8rem;
  background: rgba(10, 10, 10, 0.58);
  min-height: 240px;
}

html[data-theme="light"] .chat-box {
  background: rgba(255, 250, 240, 0.9);
}

.chat-msg {
  margin-bottom: 0.6rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.75rem;
  border: 1px solid var(--line);
  background: rgba(212, 175, 55, 0.08);
}

.chat-msg.user {
  background: rgba(184, 115, 51, 0.12);
}

.tara-widget {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 95;
  cursor: grab;
  touch-action: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.tara-label {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(16, 16, 16, 0.78);
}

html[data-theme="light"] .tara-label {
  background: rgba(255, 248, 236, 0.95);
}

.tara-fab {
  width: 124px;
  height: 112px;
  border-radius: 20px;
  border: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  position: relative;
  overflow: visible;
}

.tara-face {
  width: 116px;
  height: 104px;
  position: relative;
}

.tara-neck {
  position: absolute;
  inset: 0;
  animation: taraNeckLift 8s ease-in-out infinite;
}

.tara-ear {
  position: absolute;
  top: 8px;
  width: 36px;
  height: 58px;
  border-radius: 65% 65% 16% 16%;
  background: #1f1f1f;
  border: 1px solid rgba(0, 0, 0, 0.45);
}

.tara-ear.left { left: 18px; transform: rotate(-16deg); }
.tara-ear.right { right: 18px; transform: rotate(16deg); }

.tara-ear::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 65% 65% 16% 16%;
  background: #f0aa4e;
}

.tara-head {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 84px;
  height: 58px;
  transform: translateX(-50%);
  border-radius: 56% 56% 48% 48%;
  background: linear-gradient(180deg, #f2b154 0%, #ce8737 62%, #2c2c2c 63%);
}

.tara-snout {
  position: absolute;
  left: 50%;
  top: 67px;
  width: 42px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 40% 40% 58% 58%;
  background: #262626;
}

.tara-eye {
  position: absolute;
  top: 57px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #070707;
}

.tara-eye.left { left: 40px; }
.tara-eye.right { right: 40px; }

.tara-eye::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
}

.tara-nose {
  position: absolute;
  left: 50%;
  top: 73px;
  width: 18px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 44% 44% 58% 58%;
  background: #1f150f;
}

.tara-mouth {
  position: absolute;
  left: 50%;
  top: 88px;
  width: 24px;
  height: 9px;
  transform: translateX(-50%);
  border-bottom: 2px solid #1f150f;
  border-radius: 0 0 999px 999px;
  animation: taraSmile 8s ease-in-out infinite;
}

.tara-eye.right {
  transform-origin: 50% 50%;
  animation: taraWink 8s ease-in-out infinite;
}

.tara-paw {
  position: absolute;
  bottom: 9px;
  width: 34px;
  height: 20px;
  border-radius: 60% 60% 38% 38%;
  background: #f0aa4e;
  border: 2px solid #141414;
  z-index: 2;
}

.tara-paw.left { left: 19px; }
.tara-paw.right { right: 19px; }

.tara-line {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 6px;
  height: 4px;
  border-radius: 99px;
  background: #131313;
}

.tara-tail {
  position: absolute;
  right: -8px;
  bottom: 22px;
  width: 30px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1f1f1f 0%, #3b3b3b 80%);
  transform-origin: 10% 50%;
  animation: taraTailWiggle 0.45s ease-in-out infinite;
  z-index: 0;
}

.tara-tail::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #3b3b3b;
}

.tara-tongue {
  position: absolute;
  right: 28px;
  bottom: 16px;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: #ff9cab;
  opacity: 0;
  animation: taraLick 8s ease-in-out infinite;
}

@keyframes taraSmile {
  0%, 24%, 66%, 100% {
    height: 10%;
    border-bottom-width: 2px;
  }
  36%, 45%, 62% {
    height: 16%;
    border-bottom-width: 3px;
  }
}

@keyframes taraWink {
  0%, 38%, 100% {
    transform: scaleY(1);
  }
  41% {
    transform: scaleY(0.14);
  }
  44% {
    transform: scaleY(1);
  }
}

@keyframes taraNeckLift {
  0%, 20%, 100% {
    transform: translateY(16px);
  }
  30%, 54% {
    transform: translateY(0);
  }
  62.5%, 70% {
    transform: translateY(-10px);
  }
}

@keyframes taraTailWiggle {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(14deg); }
}

@keyframes taraLick {
  0%, 60%, 100% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  64% {
    width: 12px;
    height: 6px;
    opacity: 0.9;
  }
  72% {
    width: 0;
    height: 0;
    opacity: 0;
  }
}

.tara-chat {
  position: fixed;
  right: 1rem;
  bottom: 5.7rem;
  z-index: 85;
  width: min(360px, calc(100vw - 2rem));
  border-radius: 14px;
  border: 1px solid var(--line);
  /* Fully opaque + explicit text colour so the box is always readable on any
     background, in both themes, at any screen size (esp. small phones). */
  background: #16130d;
  color: #f4ecdd;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(212, 175, 55, 0.2);
  padding: 0.75rem;
  display: none;
}

html[data-theme="light"] .tara-chat {
  background: #fff8ec;
  color: #1b1b1b;
  border-color: rgba(184, 115, 51, 0.35);
}

.tara-chat.open {
  display: block;
  /* Sit above Tara's widget/greeting so the Send button is never covered
     (matters for longer labels like RU "Отправить", DE "Senden", NL "Versturen"). */
  z-index: 120;
}

.tara-chat-log {
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 0.55rem;
}

.tara-chat-controls {
  display: flex;
  gap: 0.45rem;
}

.tara-chat-controls input {
  flex: 1;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0d0b07;
  color: #f4ecdd;
  padding: 0.55rem 0.6rem;
  font-family: inherit;
}
.tara-chat-controls input::placeholder { color: rgba(244, 236, 221, 0.55); }

html[data-theme="light"] .tara-chat-controls input {
  background: #ffffff;
  color: #1b1b1b;
  border-color: rgba(184, 115, 51, 0.35);
}
html[data-theme="light"] .tara-chat-controls input::placeholder { color: rgba(27, 27, 27, 0.5); }

@media (max-width: 900px) {
  .col-4,
  .col-6,
  .col-8 {
    grid-column: span 12;
  }

  .nav-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .nav-actions {
    width: 100%;
  }

  h1 {
    line-height: 1.08;
  }

  .field-grid,
  .split {
    grid-template-columns: 1fr;
  }
}

/* Tara v2 natural motion override */
.tara-fab {
  width: 128px;
  height: 116px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.tara-face {
  width: 118px;
  height: 108px;
}

.tara-neck {
  animation: taraNeckLiftV2 8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.tara-ear {
  top: 6px;
  width: 37px;
  height: 60px;
  border-radius: 65% 65% 15% 15%;
  background: #1e1e1e;
  border: 1px solid #111;
}

.tara-ear.left { left: 18px; transform: rotate(-15deg); }
.tara-ear.right { right: 18px; transform: rotate(15deg); }

.tara-ear::after {
  inset: 8px;
  border-radius: 65% 65% 15% 15%;
  background: #f0aa4e;
}

.tara-head {
  left: 50%;
  top: 40px;
  width: 86px;
  height: 60px;
  transform: translateX(-50%);
  border-radius: 56% 56% 44% 44%;
  background: linear-gradient(180deg, #f2b154 0%, #cc8536 60%, #2e2e2e 61%);
}

.tara-snout {
  left: 50%;
  top: 66px;
  width: 44px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 42% 42% 60% 60%;
  background: linear-gradient(180deg, #2d2d2d 0%, #171717 100%);
}

.tara-eye {
  top: 56px;
  width: 11px;
  height: 11px;
}

.tara-eye.left { left: 40px; }
.tara-eye.right { right: 40px; }

.tara-glasses {
  position: absolute;
  left: 50%;
  top: 56px;
  width: 46px;
  height: 14px;
  transform: translateX(-50%);
  border-top: 2px solid #111;
  z-index: 4;
}

.tara-glass {
  position: absolute;
  top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #111;
  background: rgba(255, 255, 255, 0.08);
}

.tara-glass.left { left: 0; }
.tara-glass.right { right: 0; }

.tara-nose {
  top: 72px;
  width: 18px;
  height: 14px;
  border-radius: 44% 44% 58% 58%;
  background: #17100c;
  z-index: 3;
}

.tara-mouth {
  top: 84px;
  width: 28px;
  height: 12px;
  background: #3a1717;
  border: 2px solid #17100c;
  border-top: 0;
  border-radius: 0 0 999px 999px;
  overflow: hidden;
  z-index: 2;
  animation: taraSmileV2 8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.tara-mouth::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 72%;
  height: 38%;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: #f7f1e5;
}

.tara-eye.right {
  animation: taraWinkV2 8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.tara-paw {
  bottom: 10px;
  width: 34px;
  height: 20px;
  border-radius: 60% 60% 36% 36%;
  border: 2px solid #141414;
  z-index: 5;
}

.tara-paw.left { left: 18px; }
.tara-paw.right { right: 18px; }

.tara-desk {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 4px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a2a2a 0%, #0f0f0f 100%);
  box-shadow: 0 -1px 0 rgba(255, 216, 160, 0.26) inset;
  z-index: 6;
}

.tara-tail {
  right: -7px;
  bottom: 26px;
  width: 30px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #222 0%, #404040 80%);
  animation: taraTailWiggleV2 1s ease-in-out infinite;
}

.tara-tail::after {
  right: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #404040;
}

.tara-tongue {
  right: 16px;
  bottom: 22px;
  width: 24px;
  height: 10px;
  border-radius: 999px;
  opacity: 0;
  transform: rotate(26deg) scale(0.2);
  transform-origin: 20% 50%;
  z-index: 7;
  animation: taraLickV2 8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

@keyframes taraNeckLiftV2 {
  0%, 16%, 100% { transform: translateY(16px); }
  24%, 54% { transform: translateY(0); }
  60%, 70% { transform: translateY(-12px); }
  76% { transform: translateY(6px); }
}

@keyframes taraSmileV2 {
  0%, 20%, 60%, 100% { transform: translateX(-50%) scaleY(0.95); }
  30%, 44%, 66% { transform: translateX(-50%) scaleY(1.28); }
}

@keyframes taraWinkV2 {
  0%, 32%, 100% { transform: scaleY(1); }
  35% { transform: scaleY(0.14); }
  39% { transform: scaleY(1); }
}

@keyframes taraTailWiggleV2 {
  0%, 100% { transform: rotate(-14deg); }
  50% { transform: rotate(12deg); }
}

@keyframes taraLickV2 {
  0%, 59%, 100% { opacity: 0; transform: rotate(26deg) scale(0.2); }
  63% { opacity: 0.92; transform: rotate(8deg) scale(1); }
  70% { opacity: 0.88; transform: rotate(2deg) scale(1.08); }
  76% { opacity: 0; transform: rotate(26deg) scale(0.2); }
}

/* Tara v4 — German Shepherd peeking puppy, two-frame loop */
.tara-fab {
  width: 160px;
  height: 160px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tara-real-svg {
  width: 160px;
  height: 160px;
  overflow: visible;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));
}

.tara-head-group {
  transform-origin: 110px 130px;
  animation: taraBob 4s ease-in-out infinite;
}

.tara-ear-outer { fill: #1c1c1c; stroke: #0a0a0a; stroke-width: 3; stroke-linejoin: round; }
.tara-ear-inner { fill: #f0a44a; stroke: none; }
.tara-head-tan { fill: #f0a44a; stroke: #0a0a0a; stroke-width: 3.5; stroke-linejoin: round; }
.tara-head-mask { fill: #1c1c1c; stroke: none; }
.tara-cheek-fluff { fill: #f0a44a; stroke: #0a0a0a; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }

/* Open-eyes (neutral) state */
.tara-eyes-open { animation: taraFrameNeutral 4s ease-in-out infinite; transform-origin: 110px 120px; }
.tara-eye-ball { fill: #0a0a0a; }
.tara-eye-shine { fill: #fff; }

/* Closed-happy eyes (^ ^) */
.tara-eyes-happy { fill: none; stroke: #0a0a0a; stroke-width: 4; stroke-linecap: round; animation: taraFrameHappy 4s ease-in-out infinite; }

/* Neutral mouth (small) */
.tara-mouth-neutral { animation: taraFrameNeutral 4s ease-in-out infinite; }
.tara-nose { fill: #0a0a0a; stroke: #0a0a0a; stroke-width: 1; }
.tara-mouth-line { fill: none; stroke: #0a0a0a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Happy mouth — big open laugh + tongue */
.tara-mouth-happy { animation: taraFrameHappy 4s ease-in-out infinite; transform-origin: 110px 165px; }
.tara-laugh { fill: #1c1c1c; stroke: #0a0a0a; stroke-width: 3; stroke-linejoin: round; }
.tara-tongue-out { fill: #f48ea0; stroke: #0a0a0a; stroke-width: 3; stroke-linejoin: round; }
.tara-tongue-line { fill: none; stroke: #c0617a; stroke-width: 1.6; stroke-linecap: round; }

.tara-glass-ring,
.tara-glass-bridge {
  fill: none;
  stroke: #0a0a0a;
  stroke-width: 3;
  stroke-linecap: round;
}

.tara-desk-real {
  fill: #1c1c1c;
  stroke: #0a0a0a;
  stroke-width: 2;
}

.tara-paw-shape {
  fill: #f0a44a;
  stroke: #0a0a0a;
  stroke-width: 3;
  stroke-linejoin: round;
}
.tara-paw-toe-line {
  fill: none;
  stroke: #0a0a0a;
  stroke-width: 2.5;
  stroke-linecap: round;
}

@keyframes taraBob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-4px) rotate(1.5deg); }
}

@keyframes taraFrameNeutral {
  0%, 38%   { opacity: 1; }
  48%, 88%  { opacity: 0; }
  100%      { opacity: 1; }
}
@keyframes taraFrameHappy {
  0%, 38%   { opacity: 0; }
  48%, 88%  { opacity: 1; transform: scale(1); }
  60%       { transform: scale(1.04); }
  100%      { opacity: 0; }
}

/* Contact scheduler */
.scheduler {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1rem;
  margin-top: 0.8rem;
}

.scheduler-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.scheduler-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.45rem;
  opacity: 0.92;
}

.scheduler-weekdays span {
  text-align: center;
  font-size: 0.76rem;
  text-transform: uppercase;
  color: var(--muted);
}

.scheduler-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}

.scheduler-day {
  border: 1px solid var(--line);
  background: rgba(20, 20, 20, 0.65);
  color: var(--text);
  min-height: 40px;
  border-radius: 9px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.92rem;
}

.scheduler-day.muted {
  opacity: 0.35;
  cursor: default;
}

.scheduler-day.selected {
  border-color: rgba(212, 175, 55, 0.82);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.7) inset, 0 0 16px rgba(212, 175, 55, 0.2);
  background: rgba(212, 175, 55, 0.14);
}

/* Today (Europe/Vienna) — golden glow ring so it's obvious even when not picked. */
.scheduler-day.is-today {
  border-color: rgba(212, 175, 55, 0.95);
  color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.55) inset, 0 0 18px rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.08);
}
.scheduler-day.is-today.selected {
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.95) inset, 0 0 22px rgba(212, 175, 55, 0.55);
  background: rgba(212, 175, 55, 0.22);
}

/* Past dates — visibly disabled. */
.scheduler-day.is-past {
  opacity: 0.30;
  cursor: not-allowed;
  text-decoration: line-through;
  box-shadow: none;
}

.scheduler-times {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.slot-btn {
  border: 1px solid var(--line);
  background: rgba(20, 20, 20, 0.65);
  color: var(--text);
  border-radius: 9px;
  padding: 0.5rem 0.4rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.86rem;
}

.slot-btn:hover {
  border-color: rgba(212, 175, 55, 0.8);
  background: rgba(212, 175, 55, 0.14);
}

.slot-btn.selected {
  border-color: rgba(212, 175, 55, 0.86);
  background: rgba(212, 175, 55, 0.2);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.8);
}

.slot-empty {
  font-size: 0.9rem;
  color: var(--muted);
}

html[data-theme="light"] .scheduler-day,
html[data-theme="light"] .slot-btn {
  background: rgba(255, 252, 246, 0.92);
  color: #1b1b1b;
}

@media (max-width: 900px) {
  .scheduler {
    grid-template-columns: 1fr;
  }

  .scheduler-times {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   ACCESSIBILITY — visible keyboard focus, skip link, reduced
   motion. Applies to both themes (gold on dark, copper on cream).
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
html[data-theme="light"] :focus-visible { outline-color: #b87333; }

.skip-link {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 2000;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--gold);
  color: #1a1206;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: top 0.16s ease;
}
.skip-link:focus { top: 12px; }

/* Respect the OS "reduce motion" setting site-wide. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Inline SVG icons sit on the text baseline at the local font size. */
.hb-visit-counter svg, .tara-chat .emoji svg, .emoji svg { vertical-align: -0.15em; }

/* ---- Trust strip (factual proof row under the hero) ---- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1rem;
  margin: 0.2rem auto 0.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(212, 175, 55, 0.05);
}
html[data-theme="light"] .trust-strip { background: rgba(184, 115, 51, 0.06); }
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}
.trust-item svg { color: var(--gold); flex: none; }
html[data-theme="light"] .trust-item svg { color: #b87333; }
@media (max-width: 640px) {
  .trust-strip { gap: 0.55rem 1rem; padding: 0.8rem; }
  .trust-item { font-size: 0.84rem; }
}

/* ============================================================
   MOBILE NAVIGATION (hamburger) + small-screen polish.
   Burger is hidden on desktop; on <=900px the nav collapses
   to brand + burger, and the full menu drops down when open.
   ============================================================ */
.nav-burger { display: none; }

@media (max-width: 900px) {
  .nav-inner {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }
  .brand { margin-right: auto; }

  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 44px; height: 40px; padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
  }
  .nav-burger span {
    display: block; width: 20px; height: 2px;
    background: var(--gold); border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .site-nav.nav-open .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-nav.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
  .site-nav.nav-open .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Full menu is hidden until the burger is tapped. */
  .nav-actions {
    display: none;
    width: 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 0.5rem;
  }
  .site-nav.nav-open .nav-actions { display: flex; }

  .nav-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.25rem;
    flex-wrap: nowrap;
  }
  .nav-links a {
    display: block;
    width: 100%;
    padding: 0.8rem 0.9rem;   /* >=44px tap target */
    font-size: 1rem;
  }
  .lang-links { justify-content: flex-start; gap: 0.5rem; }
  .lang-links a { padding: 0.5rem 0.7rem; }
}

/* ---- Small-screen polish (all pages) ---- */
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 640px) {
  h1 { hyphens: auto; -webkit-hyphens: auto; }
  main { padding: 1.4rem 1rem 3.5rem; }
  .hero { min-height: auto; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { text-align: center; }
  /* Tara stays available on phones — smaller, tucked bottom-left, draggable,
     and kept clear of the top-right ⋮ menu. Her chat fits the small screen. */
  .tara-widget {
    left: 0.75rem !important;
    right: auto !important;
    bottom: 0.75rem !important;
    z-index: 90;
  }
  .tara-photo { width: 64px; height: 64px; border-width: 2px; }
  .tara-greeting { max-width: 180px; font-size: 0.82rem; }
  .tara-chat {
    /* Anchor near Tara (bottom-left) by default; no !important on position so
       the drag-to-follow inline styles still win when she is moved. */
    left: 0.75rem;
    right: auto;
    bottom: 5.2rem;
    width: min(92vw, 360px) !important;
    max-height: 60vh !important;
  }
}

/* Highlighted phrase inside headings — theme-safe (gold on dark, copper on cream) */
.gradient-text {
  background: linear-gradient(135deg, #fff3cf 0%, #d4af37 55%, #b87333 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="light"] .gradient-text {
  background: none;
  -webkit-text-fill-color: #7a4a16;
  color: #7a4a16;
}

/* ---------- Tara mascot: real circular photo avatar ---------- */
.tara-photo {
  display: block;
  width: 92px;                 /* smaller, less obtrusive */
  height: 92px;
  border-radius: 50%;          /* circular avatar frame */
  object-fit: cover;           /* cutout dog fills the circle, transparent bg */
  border: 3px solid var(--gold);
  background: radial-gradient(circle at 50% 40%, rgba(255,248,236,0.10), rgba(20,15,10,0.18));
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 3px rgba(212,175,55,0.12);
  transition: transform 200ms ease, box-shadow 200ms ease;
  animation: taraFloat 3.4s ease-in-out infinite;   /* gentle idle bob */
}
@keyframes taraFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .tara-photo { animation: none; } }
.tara-fab:hover .tara-photo { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 0 5px rgba(212,175,55,0.18); }
.tara-fab:active .tara-photo { transform: scale(0.96); }
/* When the photo is present the drawn SVG face is hidden (photo is the mascot). */
.tara-real-svg { display: none; }

/* =====================================================================
   PROFESSIONAL TYPE SYSTEM — Poppins (headings) + Open Sans (body).
   Applied sitewide, both languages, both themes. Replaces the previous
   Sora / Space Grotesk / Manrope stack so the site reads as a polished
   product, not a dev-tool template.
   ===================================================================== */
:root {
  --font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Open Sans", "Segoe UI", system-ui, sans-serif;
}
html body,
html body input, html body textarea, html body select, html body button {
  font-family: var(--font-body);
}
body h1, body h2, body h3, body h4, body h5, body h6,
.brand, .kicker, .hero h1, .hero h2, .price-hero h1, .price-hero .kicker,
.card h3, .panel h2, .tier-card h4, .tier-card .price, .btn {
  font-family: var(--font-head);
}
/* honour the classic-font toggle without reverting to the techy stack */
html[data-font="classic"] body { font-family: var(--font-body); }
html[data-font="classic"] .brand { font-family: var(--font-head); }

/* ---------- Tara: draggable + greeting speech bubble ---------- */
.tara-widget.is-dragging { cursor: grabbing; }
.tara-greeting {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  max-width: 220px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px 14px 4px 14px;
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  white-space: normal;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.tara-greeting.show { opacity: 1; transform: none; }
html[data-theme="light"] .tara-greeting {
  background: #fffaf0;
  color: #3a2a12;
  border-color: rgba(184,115,51,0.35);
}

/* Tara: move instantly while dragging (no float/transition lag); chat follows her */
.tara-widget { transition: none; }
.tara-widget.is-dragging { cursor: grabbing; }
.tara-widget.is-dragging .tara-photo { animation: none !important; transition: none !important; }
.tara-chat { transition: opacity 0.15s ease; }

/* #2 Remove the dog icon from the brand wordmark — keep just "HilfBuddy" */
.brand::after { content: none !important; }
.brand { padding-left: 0.7rem !important; }
html[data-font="classic"] .brand { padding-left: 0.4rem !important; }

/* =====================================================================
   Unified hero title system — same size & base colour on EVERY page,
   both languages, both themes. Gold accents come only from
   <span class="gradient-text">…</span>, which is theme-safe.
   ===================================================================== */
.hero h1, .price-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em !important;
  color: var(--text) !important;
  max-width: 22ch;
}
.hero .kicker, .hero .eyebrow, .price-hero .kicker {
  color: var(--gold) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}
html[data-theme="light"] .hero .kicker,
html[data-theme="light"] .hero .eyebrow,
html[data-theme="light"] .price-hero .kicker { color: var(--copper-deep) !important; }

/* Tara must never select page text or trigger native image-drag while dragging */
.tara-widget, .tara-widget * { user-select: none; -webkit-user-select: none; }
.tara-photo { -webkit-user-drag: none; user-drag: none; pointer-events: auto; }

/* Visit counter (injected into the footer by analytics.js) */
.hb-visit-counter {
  display: inline-block;
  margin-left: 0.8rem;
  font-size: 0.8rem;
  color: var(--muted);
  opacity: 0.75;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* =====================================================================
   MOTION POLISH — press feedback, pointer-gated hover, honest reduced
   motion. Everything below is additive and lives at the end of the file
   so it can be removed in one block if it ever needs to come out.
   ===================================================================== */

/* ---- 1. Pressable things must feel pressed ----------------------------
   Instant, subtle scale on :active tells the user the interface heard
   them. Applies to every pill/button in the nav, hero and forms. */
.btn:active,
.nav-links a:active,
.lang-links a:active,
.theme-toggle:active,
.font-toggle:active,
.nav-burger:active,
.cookie-banner button:active,
button:active {
  transform: scale(0.97);
}

/* The primary CTA already lifts on hover — keep the lift while pressing so
   it presses *into* the hovered position instead of snapping back down. */
.btn:hover:active {
  transform: translateY(-2px) scale(0.97);
}

/* ---- 2. Hover effects only for real pointers --------------------------
   On touch, :hover latches after a tap and the card stays stuck in its
   hovered state. Gate anything that moves behind a fine pointer. */
@media (hover: none), (pointer: coarse) {
  .card:hover,
  .panel:hover,
  .btn:hover,
  .brand:hover,
  .theme-toggle:hover,
  .tara-fab:hover .tara-photo {
    transform: none;
  }
}

/* ---- 3. Durations ------------------------------------------------------
   The brand mark is hovered constantly during navigation; 320ms with an
   overshoot curve reads as lag there. Cards and the mascot are big enough
   to carry 200ms, so they stay. */
.brand::after {
  transition: transform 200ms var(--ease-out);
}

/* ---- 4. The mode toggle should glow, not blink ------------------------
   A 0.5s infinite pulse in the nav is visible on every page, all the time.
   Same attention cue, four times slower and half the amplitude. */
.theme-toggle {
  animation: modePulse 2.4s ease-in-out infinite alternate;
}
@keyframes modePulse {
  from { box-shadow: 0 0 6px rgba(212, 175, 55, 0.14); }
  to   { box-shadow: 0 0 12px rgba(212, 175, 55, 0.34); }
}

/* ---- 5. Tara's greeting scales from her, not from its own middle ------
   The bubble is anchored to the mascot's top-left, so that is where it
   should grow from. Exit is faster than enter: slow where the user is
   reading, fast where the system is responding. */
.tara-greeting {
  transform-origin: bottom right;
  transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out);
}
.tara-greeting.show {
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}

/* ---- 6. Reduced motion means gentler, not dead ------------------------
   The blanket 0.001ms rule above also kills opacity and colour fades, which
   aid comprehension and cause no motion sickness. Put those back; keep all
   movement and looping animation off. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-property: opacity, color, background-color, border-color, box-shadow, filter !important;
    transition-duration: 160ms !important;
    animation: none !important;
  }
  .card:hover,
  .panel:hover,
  .btn:hover,
  .brand:hover,
  .btn:active,
  button:active,
  .tara-photo,
  .tara-greeting {
    transform: none !important;
  }
}