/* ══════════════════════════════════════════════════════════════
   aymiz — AI Picture to Text
   Zurückhaltend, präzise, viel Luft. Ein dunkles Kopfband gibt
   Rhythmus, gedecktes Gold ist der einzige Akzent.
   Mobil zuerst, Breakpoints nach oben.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:       #FDFBF7;
  --bg-2:     #F6F1E7;
  --dark:     #14151A;
  --dark-2:   #1E1F26;
  --ink:      #14151A;
  --ink-2:    #5B5D67;
  --ink-3:    #93959E;
  --on-dark:  #F4F3EF;
  --on-dark-2:#9A9BA4;
  --gold:     #C07C1E;
  --gold-lt:  #EBB44E;
  --gold-soft:#FBEBCB;
  --line:     #EAE3D6;
  --line-2:   #DCD3C2;
  --line-dark:rgba(244,243,239,.14);
  --bad:      #B3243F;
  --good:     #16704A;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r:   16px;
  --r-s: 11px;
  --pad: 20px;
  --bar: 58px;
  --safe: env(safe-area-inset-bottom, 0px);
  --lift: 0 1px 2px rgba(78,56,20,.05), 0 14px 40px -10px rgba(78,56,20,.13);
}
@media (min-width:760px){ :root{ --pad:32px; --bar:66px; } }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}

img{ max-width:100%; display:block; }
a{ color:var(--ink); text-underline-offset:3px; }
button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2.5px; border-radius:4px; }
input, textarea, select{ font-size:16px; font-family:inherit; }

.shell{ width:100%; max-width:1140px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.shell--narrow{ max-width:680px; }

.hidden{ display:none !important; }
.stack > * + *{ margin-top:12px; }

/* ── Wortmarke ──────────────────────────────────────────────
   Ein feiner Goldstrich unter dem Wort. Zurückhaltend.        */
.logo{
  position:relative; display:inline-block;
  font-weight:650; font-size:21px; letter-spacing:-.035em; line-height:1;
  text-decoration:none; color:inherit; padding-bottom:5px;
}
.logo::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--gold);
}

/* ── Kopfleiste ─────────────────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:40; height:var(--bar);
  background:rgba(253,251,247,.88);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
.bar--dark{
  background:rgba(20,21,26,.82); border-bottom-color:var(--line-dark); color:var(--on-dark);
}
.bar__in{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bar__nav{ display:flex; align-items:center; gap:3px; }

.tab{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:0 11px; border:0; background:none; cursor:pointer;
  border-radius:8px; font-size:14px; font-weight:500; color:var(--ink-2);
  text-decoration:none; white-space:nowrap;
}
.tab:hover{ background:rgba(20,21,26,.05); color:var(--ink); }
.tab[aria-current="page"]{ color:var(--ink); font-weight:600; }
.bar--dark .tab{ color:var(--on-dark-2); }
.bar--dark .tab:hover{ background:rgba(244,243,239,.09); color:var(--on-dark); }

/* Sprachumschalter */
.lang{ display:inline-flex; border:1px solid var(--line-2); border-radius:8px; overflow:hidden; margin-left:4px; }
.lang button{
  min-height:32px; padding:0 9px; border:0; background:none; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.lang button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.bar--dark .lang{ border-color:var(--line-dark); }
.bar--dark .lang button{ color:var(--on-dark-2); }
.bar--dark .lang button[aria-pressed="true"]{ background:var(--on-dark); color:var(--dark); }

.credits{
  display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:0 12px;
  border-radius:99px; background:var(--gold-soft); color:#6B4E10;
  font-size:13.5px; font-weight:600; white-space:nowrap;
}
.credits.is-low{ background:transparent; box-shadow:inset 0 0 0 1px var(--bad); color:var(--bad); }

/* ── Knöpfe ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 22px; border-radius:var(--r-s);
  border:1px solid transparent; background:var(--ink); color:var(--bg);
  font-size:15.5px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer; text-decoration:none;
  transition:opacity .14s ease, transform .08s ease, background .14s ease;
}
.btn:active{ transform:scale(.988); }
.btn:hover{ opacity:.88; color:var(--bg); }
.btn[disabled]{ opacity:.3; cursor:not-allowed; transform:none; }

.btn--gold{ background:var(--gold); color:#fff; }
.btn--gold:hover{ color:#fff; }
.btn--line{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--line:hover{ background:rgba(20,21,26,.04); color:var(--ink); }
.btn--white{ background:#fff; color:var(--ink); border-color:var(--line-2); }
.btn--white:hover{ color:var(--ink); }
.btn--onDark{ background:var(--on-dark); color:var(--dark); }
.btn--onDark:hover{ color:var(--dark); }
.btn--lineDark{ background:transparent; color:var(--on-dark); border-color:var(--line-dark); }
.btn--lineDark:hover{ background:rgba(244,243,239,.08); color:var(--on-dark); }
.btn--wide{ width:100%; }
.btn--sm{ min-height:42px; padding:0 15px; font-size:14px; border-radius:8px; }

/* ── Flächen ────────────────────────────────────────────────── */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.card--pad{ padding:22px; }
@media (min-width:760px){ .card--pad{ padding:30px; } }
.card--lift{ box-shadow:var(--lift); border-color:rgba(20,21,26,.06); }

.band{ background:var(--dark); color:var(--on-dark); }
.band .kicker{ color:var(--gold-lt); }

.sec{ padding:64px 0; }
@media (min-width:760px){ .sec{ padding:96px 0; } }
.sec__head{ max-width:36ch; margin-bottom:32px; }
.sec__head h2{
  margin:10px 0 10px; font-size:clamp(26px,5.4vw,38px);
  font-weight:650; letter-spacing:-.035em; line-height:1.12;
}
.sec__head p{ margin:0; color:var(--ink-2); font-size:16.5px; }

.kicker{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
}

/* ── Formulare ──────────────────────────────────────────────── */
.field label{ display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--ink-2); }
.field input{
  width:100%; min-height:50px; padding:0 14px;
  border:1px solid var(--line-2); border-radius:var(--r-s);
  background:#fff; color:var(--ink);
}
.field input::placeholder{ color:var(--ink-3); }
.field input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); }

.seg{ display:flex; padding:3px; gap:3px; background:rgba(20,21,26,.05); border-radius:11px; }
.seg button{
  flex:1; min-height:40px; border:0; background:none; cursor:pointer;
  border-radius:8px; font-size:14px; font-weight:600; color:var(--ink-2);
}
.seg button[aria-selected="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(20,21,26,.09); }

.rule{ display:flex; align-items:center; gap:12px; font-size:12.5px; color:var(--ink-3); }
.rule::before, .rule::after{ content:""; flex:1; height:1px; background:var(--line); }

.note{ font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.note.is-bad{ color:var(--bad); }
.note.is-good{ color:var(--good); }

.msg{
  border-radius:var(--r-s); padding:12px 15px; margin-bottom:16px;
  font-size:14.5px; background:#fff; border:1px solid var(--line);
}
.msg--good{ border-color:rgba(22,112,74,.4); background:rgba(22,112,74,.05); }
.msg--bad{ border-color:rgba(179,36,63,.4); background:rgba(179,36,63,.04); }

/* ── Preise ─────────────────────────────────────────────────── */
.packs{ display:grid; gap:16px; }
@media (min-width:760px){ .packs{ grid-template-columns:1fr 1fr; gap:22px; } }
.pack{ position:relative; display:flex; flex-direction:column; }
.pack--top{ border-color:var(--ink); }
.pack__flag{
  position:absolute; top:-10px; left:22px; background:var(--gold); color:#fff;
  border-radius:99px; padding:3px 11px; font-size:11px; font-weight:600; letter-spacing:.02em;
}
.pack h3{ margin:0; font-size:16px; font-weight:600; color:var(--ink-2); }
.pack__price{
  display:flex; align-items:baseline; gap:9px; margin:8px 0 2px;
  font-size:42px; font-weight:650; letter-spacing:-.045em;
}
.pack__price small{ font-size:13px; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.pack__blurb{ margin:10px 0 18px; color:var(--ink-2); font-size:14.5px; }
.pack ul{ list-style:none; margin:0 0 22px; padding:0; flex:1; }
.pack li{ position:relative; padding-left:22px; margin-bottom:8px; font-size:14.5px; }
.pack li::before{
  content:""; position:absolute; left:1px; top:10px; width:8px; height:2px; background:var(--gold);
}

/* ── Tabellen ───────────────────────────────────────────────── */
.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table th{
  text-align:left; padding:7px 8px; border-bottom:1px solid var(--line-2);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; white-space:nowrap;
}
.table td{ padding:10px 8px; border-bottom:1px solid var(--line); }
.table tr:last-child td{ border-bottom:0; }
.table .num{ font-family:var(--mono); font-size:12.5px; white-space:nowrap; }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.blank{ padding:26px 6px; text-align:center; color:var(--ink-3); font-size:14px; }

/* ── Fuß ────────────────────────────────────────────────────── */
.foot{
  border-top:1px solid var(--line); margin-top:52px;
  padding:24px 0 calc(32px + var(--safe));
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:13px; color:var(--ink-3);
}
.foot a{ color:var(--ink-3); text-decoration:none; margin-right:15px; }
.foot a:hover{ color:var(--ink); text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}