/* Verkaufsseite im Funnel (Vorlage resources/views/funnel_verkauf.antlers.html,
 * Rahmen resources/views/layouts/funnel_verkauf.antlers.html), DESIGN.md Stand 2c.
 * Kein Build-Schritt: die Seite muss auch ohne Vite-Manifest rendern (wie
 * layouts/schlicht-2c.blade.php). Alle Werte sind Tokens aus DESIGN.md, keine eigenen.
 * Angelegt 10.10.2026. */

:root {
  --paper: #F7F3EA;
  --hi: #FCFAF5;
  --ink: #1E1A16;
  --ink2: #4F473E;
  --ink3: #6B6259;
  --gold: #E8B931;
  --bronze: #7A5A0C;
  --on-dark: #D0CCC4;
  --on-dark2: #C7C3BB;
  --line: rgba(30, 26, 22, .16);
  --line-dark: rgba(247, 243, 234, .22);
  --f: 'Alegreya Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --sc: 'Alegreya Sans SC', 'Alegreya Sans', sans-serif;
  --hand: 'Caveat', 'Alegreya Sans', cursive;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-brush: cubic-bezier(.4, .1, .2, 1);
  --pad-x: 56px;
}

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

body.v {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 19px/1.55 var(--f);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.v ::selection { background: var(--gold); color: var(--ink); }
.v-main { flex: 1 0 auto; }
.v-in { max-width: 1328px; margin: 0 auto; }

/* :where, damit der Reset keine Spezifitaet hat und jede Klasse unten ihn schlaegt. */
:where(.v) :is(h1, h2, h3, p, ul, ol, dl, dd) { margin: 0; }
:where(.v) :is(h1, h2, h3) { text-wrap: balance; hyphens: manual; }
:where(.v) p { text-wrap: pretty; }

.v a:focus-visible, .v button:focus-visible, .v summary:focus-visible {
  outline: 1.5px solid var(--bronze);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Kopf (Wortmarke auf Gold) ---------- */
.v-kopf {
  background: var(--gold);
  padding: 26px max(var(--pad-x), calc((100vw - 1328px) / 2)) 0;
  --logo-akzent: var(--ink);
  --logo-schrift: var(--gold);
}
/* 44px Tippflaeche (Logo ist 24px hoch), das Logo selbst bleibt oben buendig. */
.v-logo { display: inline-flex; align-items: flex-start; min-height: 44px; color: var(--ink); line-height: 0; }
.v-logo svg { width: 210px; height: auto; display: block; }

/* ---------- Label, Marker ---------- */
.v-label {
  font: 700 18px/1.3 var(--sc);
  letter-spacing: .04em;
  color: var(--bronze);
}
.v-hero .v-label { color: var(--ink); }

.v-brush {
  position: relative;
  display: inline-block;
  isolation: isolate;
  white-space: nowrap;
}
.v-brush::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: -.16em; right: -.14em; top: .34em; bottom: -.02em;
  background: var(--paper);
  -webkit-mask: url(/images/2c/brush_stroke_1-stretch.svg) center / 100% 100% no-repeat;
  mask: url(/images/2c/brush_stroke_1-stretch.svg) center / 100% 100% no-repeat;
  animation: v-pinsel .7s var(--ease-brush) .5s both;
}
@keyframes v-pinsel { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Knopf (button-ink / button-gold aus DESIGN.md) ---------- */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  font: 700 19px/1 var(--f);
  padding: 17px 26px;
  border: 0; border-radius: 6px; cursor: pointer;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(122, 90, 12, .3), inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(92, 64, 12, .16), 0 12px 24px -16px rgba(122, 90, 12, .65);
  transition: background-color 320ms cubic-bezier(.2, .8, .2, 1), color 320ms cubic-bezier(.2, .8, .2, 1), box-shadow 360ms cubic-bezier(.2, .8, .2, 1), transform 120ms ease;
}
.v-btn--ink { background-color: var(--ink); color: var(--paper); }
/* Auf Gold wird Ink beim Hover Papier mit Ink-Schrift (Papier-Marker-Regel aus DESIGN.md). */
.v-btn--ink:is(:hover, :focus-visible) { background-color: var(--hi); color: var(--ink); }
.v-btn:active { transform: translateY(1px); }
.v-btn:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.v-ba {
  width: 16px; height: 16px; margin-left: 12px; flex: none;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
.v-btn:is(:hover, :focus-visible) .v-ba { transform: translateX(5px); }

.v-klein { font-size: 17px; line-height: 1.4; color: var(--ink2); }

/* ---------- Hinweise aus dem Funnel (Fehler, Zahlung laeuft) ---------- */
.v .funnel-hinweis {
  background: var(--hi);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink);
  border-radius: 3px;
  padding: 14px 18px;
  margin: 0 0 20px;
  max-width: 34em;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink);
}
.v .funnel-hinweis__titel { font-weight: 700; }
.v .funnel-hinweis__liste { padding-left: 1.2em; margin-top: 6px; }

/* ---------- 1. Kopf auf Gold ---------- */
.v-hero { background: var(--gold); padding: 0 var(--pad-x); }
.v-hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: end;
}
.v-hero__text { padding: 56px 0 96px; }
.v-hero h1 {
  font: 800 clamp(50px, 6.67vw, 96px)/1.02 var(--f);
  letter-spacing: -.022em;
  margin: 18px 0 28px;
}
.v-lead { font: 400 23px/1.5 var(--f); color: var(--ink2); max-width: 30em; }
.v-hero .v-lead { color: var(--ink); max-width: 32ch; }
.v-hero .v-lead + .v-lead, .v-hero .v-lead + .v-sub { margin-top: 16px; }
.v-sub { font: 400 19px/1.5 var(--f); color: var(--ink2); max-width: 34em; }
.v-kauf { margin-top: 36px; }
.v-kauf .v-klein { margin-top: 16px; }

.v-fakten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: 0 clamp(24px, 3.3vw, 48px);
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(30, 26, 22, .22);
}
.v-fakten dt { font: 800 28px/1.1 var(--f); letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.v-fakten dd { font-size: 17px; line-height: 1.35; color: var(--ink2); margin-top: 4px; max-width: 13em; }

.v-hero__bild img {
  display: block; width: 100%;
  height: 560px; max-height: 50svh; min-height: 320px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}

/* ---------- Platzhalter: [FOTO] und [TEXT FOLGT] ---------- */
.v-platz {
  position: relative;
  border: 2px dashed rgba(122, 90, 12, .6);
  border-radius: 3px;
  background:
    repeating-linear-gradient(135deg, rgba(232, 185, 49, .16) 0 12px, transparent 12px 24px),
    var(--hi);
  text-align: center;
  color: var(--ink);
}
.v-platz__kopf { font: 800 28px/1.15 var(--f); letter-spacing: -.01em; }
.v-platz__text { font-size: 17px; color: var(--ink3); margin-top: 6px; }
.v-stempel {
  display: inline-block;
  font: 700 15px/1 var(--sc);
  letter-spacing: .04em;
  background: var(--ink);
  color: var(--paper);
  border-radius: 3px;
  padding: 7px 10px 8px;
}
.v-platz--foto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 560px; max-height: 50svh; min-height: 320px;
  padding: 24px;
}
.v-platz--foto .v-stempel { position: absolute; top: 16px; left: 16px; }
.v-platz--hoch { height: auto; max-height: none; min-height: 0; aspect-ratio: 4 / 5; }
.v-platz--text { padding: 36px 32px 40px; text-align: left; }
.v-platz--text .v-stempel { margin-bottom: 16px; }
.v-hero .v-platz {
  border-color: rgba(30, 26, 22, .6);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background:
    repeating-linear-gradient(135deg, rgba(30, 26, 22, .06) 0 12px, transparent 12px 24px),
    rgba(252, 250, 245, .55);
}

/* ---------- Sektionen ---------- */
.v-sec { padding: 96px var(--pad-x) 104px; }
.v-sec--linie { border-top: 1px solid var(--line); }
.v-sec--ink { background: var(--ink); color: var(--paper); }
.v h2:not(.v-label, .v-statement) {
  font: 800 clamp(34px, 4.45vw, 64px)/1.02 var(--f);
  letter-spacing: -.015em;
}
.v-zwei {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.v-zwei > :first-child { position: sticky; top: 56px; }
.v-text p { font: 400 21px/1.5 var(--f); color: var(--ink2); max-width: 34em; margin-bottom: 16px; }
.v-text--lead p { font-size: 23px; color: var(--ink); max-width: 28em; }
.v-text a { color: var(--ink); font-weight: 700; text-decoration: none; background: url(/images/2c/link-strich-1.svg) 0 100% / 100% .42em no-repeat; padding-bottom: .12em; }
.v-text ul, .v-text ol { padding-left: 1.2em; font-size: 21px; color: var(--ink2); max-width: 34em; margin-bottom: 16px; }

/* ---------- 3. Die zehn Tage ---------- */
.v-sec__h { margin-bottom: 56px; }
/* Spaltenweise gelesen (Tag 1 bis 5 links, 6 bis 10 rechts), aber als Raster, damit die Linien
   beider Spalten auf einer Hoehe liegen. Die Zeilenzahl setzt die Vorlage aus der Zahl der Tage
   (--v-zeilen), so bleibt es richtig, wenn im CP ein Tag dazukommt. */
.v-tage {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--v-zeilen, 5), auto);
  grid-auto-flow: column;
  column-gap: 72px;
  border-top: 1px solid var(--line-dark);
}
.v-tage li {
  padding: 28px 0 32px;
  border-bottom: 1px solid var(--line-dark);
}
.v-tag { display: block; font: 700 18px/1.3 var(--sc); letter-spacing: .04em; color: var(--gold); }
.v-tage h3 { font: 700 28px/1.2 var(--f); margin: 6px 0 8px; color: var(--paper); } /* headline-h4 */
.v-tage p { font-size: 19px; line-height: 1.5; color: var(--on-dark); max-width: 30em; }

/* ---------- 4. Was jeden Tag drin ist ---------- */
.v-hand {
  font: 600 28px/1.15 var(--hand);
  color: var(--bronze);
  transform: rotate(-1.5deg);
  transform-origin: left center;
  margin-top: 20px;
}
.v-haken { list-style: none; padding: 0; border-top: 1.5px solid var(--ink); }
.v-haken li {
  position: relative;
  padding: 22px 0 22px 56px;
  border-bottom: 1px solid var(--line);
  font: 500 22px/1.35 var(--f);
  color: var(--ink);
}
.v-haken li::before {
  content: '';
  position: absolute; left: 6px; top: 25px;
  width: 28px; height: 22px;
  background-color: var(--bronze);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 50' fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 27c6 5 11 11 15 18C30 28 44 14 59 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 50' fill='none' stroke='black' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 27c6 5 11 11 15 18C30 28 44 14 59 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- 5. Bonus ---------- */
.v-bonus {
  background: var(--hi);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 96px var(--pad-x) 104px;
}
/* Dasselbe 5 : 7 wie jeder andere Abschnitt: H2 links, Text rechts oben buendig. */
.v-bonus__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 72px;
  align-items: start;
}
.v-bonus__raster .v-badge { margin-bottom: 20px; }
.v-bonus .v-lead { color: var(--ink); max-width: 28em; }
.v-badge {
  display: inline-block;
  font: 700 15px/1 var(--sc);
  letter-spacing: .04em;
  background: var(--gold); color: var(--ink);
  border-radius: 3px;
  padding: 7px 10px 8px;
}

/* ---------- 6. Ueber Adrian ---------- */
.v-ueber {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 80px;
  align-items: center;
}
.v-ueber__bild img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 30px 60px -30px rgba(92, 64, 12, .5); }
.v-ueber .v-label { margin-bottom: 22px; }
/* Ein Satz, kein Titel: Stufe headline-h3 der Skala (38px, 800), mobil 28px. */
.v-statement {
  font: 800 clamp(28px, 2.64vw, 38px)/1.1 var(--f);
  letter-spacing: -.01em;
  color: var(--ink);
  max-width: 24em;
  text-wrap: balance;
}

/* ---------- 8. Fragen und Antworten ---------- */
.v-faq { border-top: 1.5px solid var(--ink); }
.v-faq details { border-bottom: 1px solid var(--line); }
.v-faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  font: 700 24px/1.25 var(--f);
}
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after {
  content: '+'; flex: none;
  font: 400 34px/1 var(--f); color: var(--bronze);
  transition: transform 250ms var(--ease-out);
}
.v-faq details[open] summary::after { transform: rotate(45deg); }
.v-faq details[open] { background: color-mix(in oklch, var(--gold) 9%, transparent); border-radius: 3px; padding: 0 16px; }
.v-faq p { font-size: 20px; color: var(--ink2); padding: 0 0 26px; max-width: 34em; }

/* ---------- 9. Schluss auf Gold ---------- */
.v-schluss { background: var(--gold); padding: 96px var(--pad-x) 104px; }
.v-schluss__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 72px;
  align-items: center;
}
.v-schluss .v-lead { color: var(--ink); margin-top: 24px; max-width: 24em; }
.v-schluss__kauf { border-left: 1.5px solid rgba(30, 26, 22, .22); padding-left: 56px; }
.v-preis {
  font: 800 clamp(72px, 7.2vw, 104px)/.9 var(--f);
  letter-spacing: -.02em;
  font-feature-settings: 'lnum', 'tnum';
  color: var(--ink);
  margin-bottom: 14px;
}
.v-schluss__kauf .v-klein { margin-bottom: 28px; }

/* ---------- Fuss ---------- */
.v-fuss { background: #16130F; color: #E4DFD6; padding: 56px var(--pad-x) 48px; }
.v-fuss .v-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; align-items: baseline; }
.v-fuss nav { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.v-fuss a {
  display: inline-block; padding: 10px 0;
  color: #E4DFD6; text-decoration: none; font-size: 17px;
  background: url(/images/2c/link-strich-1.svg) 0 calc(100% - 8px) / 0% .42em no-repeat;
  transition: background-size .45s cubic-bezier(.35, .1, .25, 1);
}
.v-fuss a:is(:hover, :focus-visible) { background-size: 100% .42em; }
.v-fuss nav { gap: 0 32px; }
.v-fuss a:focus-visible { outline-color: var(--gold); }
.v-fuss p { font-size: 15px; color: #ADA9A2; }

/* ---------- Einblenden beim Einscrollen ---------- */
.v-js [data-v-zeigen] { opacity: 0; transform: translateY(12px); transition: opacity 400ms cubic-bezier(.23, 1, .32, 1), transform 400ms cubic-bezier(.23, 1, .32, 1); }
.v-js [data-v-zeigen].ist-da { opacity: 1; transform: none; }

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1023px) {
  .v-hero__raster, .v-zwei, .v-bonus__raster, .v-ueber, .v-schluss__raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .v-zwei > :first-child { position: static; }
  .v-hero__text { padding: 40px 0 8px; }
  .v-tage { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .v-schluss__kauf { border-left: 0; padding-left: 0; border-top: 1.5px solid rgba(30, 26, 22, .22); padding-top: 32px; }
  .v-ueber__bild { max-width: 420px; }
}

@media (max-width: 767px) {
  :root { --pad-x: 20px; }
  body.v { font-size: 19px; }
  .v-kopf { padding-top: 24px; }
  .v-logo svg { width: 168px; }
  .v-hero__text { padding-top: 32px; }
  .v-hero h1 { margin: 14px 0 22px; }
  .v-lead { font-size: 20px; }
  .v-kauf { margin-top: 28px; }
  .v-btn { width: 100%; font-size: 18px; padding: 16px 22px; }
  .v-ba { display: none; }
  .v-fakten { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 36px; padding-top: 0; }
  .v-fakten div { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(30, 26, 22, .22); }
  .v-fakten dt { font-size: 24px; flex: none; }
  .v-fakten dd { margin-top: 0; max-width: none; }
  .v-hero__bild { margin-top: 32px; }
  .v-hero__bild img, .v-platz--foto { height: 300px; min-height: 0; }
  .v-sec { padding: 56px var(--pad-x) 64px; }
  .v-sec__h { margin-bottom: 32px; }
  .v-tage li { padding: 22px 0 24px; }
  .v-text p { font-size: 20px; }
  .v-text--lead p { font-size: 21px; }
  .v-haken li { font-size: 20px; padding: 18px 0 18px 48px; }
  .v-haken li::before { top: 21px; }
  .v-hand { font-size: 24px; }
  .v-bonus { padding: 56px var(--pad-x) 64px; }
  .v-faq summary { font-size: 21px; padding: 20px 0; }
  .v-schluss { padding: 56px var(--pad-x) 64px; }
  .v-schluss__kauf { padding-top: 28px; }
  .v-fuss { padding: 40px var(--pad-x) 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .v-js [data-v-zeigen] { opacity: 1; transform: none; }
}