/* =========================================================
   Finanznavigator Marvin – Unterseiten
   Nutzt die Design-Tokens aus style.css (wird nicht auf der Startseite geladen).
   ========================================================= */

.fn-page { overflow-x: hidden; background: var(--color-bg); color: var(--color-ink); }
.fn-page [hidden] { display: none !important; }
.fn-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- Typografie ---------- */
.fn-h1 { font-size: clamp(2.75rem, 7vw, 4.5rem); font-weight: 600; line-height: .92; }
.fn-h1-sm { font-size: clamp(2.6rem, 6vw, 3.75rem); font-weight: 600; line-height: 1; }
.fn-h2 { font-size: clamp(2.25rem, 4.5vw, 3rem); font-weight: 600; line-height: .95; }
.fn-h2-lg { font-size: clamp(2.6rem, 5.5vw, 3.75rem); font-weight: 600; line-height: 1; }
.fn-h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.fn-accent { color: var(--color-warm); }
.fn-lead { margin-top: 1.25rem; max-width: 36rem; font-size: .875rem; line-height: 1.75; color: var(--color-muted-fg); }
.fn-small { font-size: .75rem; line-height: 1.6; color: var(--color-muted-fg); }
.fn-xs { font-size: .68rem; line-height: 1.5; color: var(--color-muted-fg); }
.fn-hand { font-family: var(--font-hand); }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; }

/* ---------- Flächen ---------- */
.fn-dark { background: var(--color-dark); color: var(--color-dark-fg); }
.fn-dark h1, .fn-dark h2, .fn-dark h3 { color: var(--color-dark-fg); }
.fn-dark .fn-lead, .fn-dark .fn-small { color: rgba(248, 245, 239, .72); }
.fn-dark .fn-xs { color: rgba(248, 245, 239, .62); }
.fn-dark .fn-accent { color: var(--color-warm); }
.fn-muted { background: var(--color-surface-muted); }
.fn-surface { background: var(--color-surface); }
.fn-warm { background: var(--color-warm); color: var(--color-ink); }
.fn-warm h2 { color: var(--color-ink); }

.fn-section { padding: 5rem 0; }
@media (min-width: 640px) { .fn-section { padding: 7rem 0; } }
.fn-section-md { padding: 3.5rem 0; }
@media (min-width: 640px) { .fn-section-md { padding: 4rem 0; } }
.fn-section-sm { padding: 2.5rem 0; }
.fn-hero { padding: 4.5rem 0 4rem; }
@media (min-width: 640px) { .fn-hero { padding: 6rem 0 5rem; } }
.bt { border-top: 1px solid var(--color-border); }
.bb { border-bottom: 1px solid var(--color-border); }

/* ---------- Raster ---------- */
.fn-split { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .fn-split { grid-template-columns: var(--cols, .8fr 1.2fr); } }
.fn-split.center { align-items: center; }
.fn-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .fn-grid.sm-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fn-grid.sm-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .fn-grid.md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fn-grid.md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Buttons (Ergänzungen) ---------- */
.btn-conversion { background: var(--color-conversion); color: #fff; box-shadow: var(--shadow-sm); }
.btn-conversion:hover { background: #bf1f28; }
.btn-ink { background: var(--color-primary); color: var(--color-dark-fg); }
.btn-ink:hover { background: var(--color-dark-muted); }
.btn-outline { background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-border); }
.btn-outline:hover { border-color: var(--color-warm); }
.btn-outline.is-selected { border-color: var(--color-warm); background: rgba(205,153,86,.1); box-shadow: 0 0 0 1px var(--color-warm); }
.btn-lg { padding: .9rem 1.75rem; font-size: .9rem; }
.btn-pill { border-radius: 999px; }
.btn-block { width: 100%; justify-content: center; }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 639px) { .btn-mobile-block { width: 100%; justify-content: center; } }
.btn-wrap { white-space: normal; text-align: center; }

/* ---------- Icons ---------- */
.fn-ic { width: 1.25rem; height: 1.25rem; color: var(--color-warm); flex-shrink: 0; }
.fn-ic-sm { width: 1rem; height: 1rem; color: var(--color-warm); flex-shrink: 0; }
.fn-ic-lg { width: 1.6rem; height: 1.6rem; color: var(--color-warm); flex-shrink: 0; }
.fn-ic-xl { width: 3rem; height: 3rem; color: var(--color-warm); }
.fn-ring { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid rgba(205,153,86,.55); flex-shrink: 0; }
.fn-ring.sm { width: 1.25rem; height: 1.25rem; border-color: var(--color-warm); color: var(--color-warm); }
.fn-ring.sm svg { width: .75rem; height: .75rem; }

/* ---------- Listen ---------- */
.fn-checkrow { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .68rem; }
.fn-checkrow span, .fn-checks span { display: flex; align-items: center; gap: .4rem; }
.fn-checks { display: grid; gap: .5rem; font-size: .75rem; font-weight: 600; }

/* ---------- Karten ---------- */
.fn-card { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); padding: 1.25rem; }
@media (min-width: 640px) { .fn-card { padding: 2.25rem; } }
.fn-card.pad-lg { padding: 1.5rem; }
@media (min-width: 640px) { .fn-card.pad-lg { padding: 2.5rem; } }

/* ---------- Formulare ---------- */
.fn-form { display: grid; gap: .75rem; }
.fn-row { display: grid; gap: .75rem; }
@media (min-width: 640px) { .fn-row { grid-template-columns: 1fr 1fr; } }
.fn-field { display: grid; gap: .5rem; min-width: 0; font-size: .75rem; font-weight: 600; color: var(--color-ink); }
.fn-field input, .fn-field select, .fn-field textarea, .fn-input {
  height: 3rem; width: 100%; border: 1px solid var(--color-border); border-radius: 2px; background: var(--color-surface);
  padding: 0 1rem; font: 400 .875rem var(--font-sans); color: var(--color-ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.fn-field textarea { min-height: 8rem; padding: .75rem 1rem; resize: vertical; }
.fn-field input:focus, .fn-field select:focus, .fn-field textarea:focus, .fn-input:focus { border-color: var(--color-warm); box-shadow: 0 0 0 3px rgba(205,153,86,.2); }
.fn-field .hint { font-weight: 400; line-height: 1.5; color: var(--color-muted-fg); }
.fn-consent { display: flex; align-items: flex-start; gap: .75rem; font-size: .75rem; line-height: 1.6; color: var(--color-ink); }
.fn-consent input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--color-warm); flex-shrink: 0; }
.fn-consent a { text-decoration: underline; text-decoration-color: var(--color-warm); text-underline-offset: 2px; }
.fn-consent-box { margin-top: .5rem; border: 1px solid var(--color-border); background: var(--color-surface-muted); padding: 1.25rem; border-radius: 2px; }
.fn-secure { display: flex; align-items: center; justify-content: center; gap: .4rem; text-align: center; font-size: .68rem; line-height: 1.5; color: var(--color-muted-fg); }
.fn-error { font-size: .8rem; color: var(--color-conversion); }
.fn-success { display: grid; place-items: center; min-height: 20rem; text-align: center; padding: 1.5rem; }
.fn-success h3 { margin-top: 1.25rem; font-size: 1.9rem; }
.fn-success p { margin: .75rem auto 0; max-width: 28rem; font-size: .875rem; line-height: 1.7; color: var(--color-muted-fg); }
.fn-success .fn-ic-xl { margin-inline: auto; }

/* Dunkle Formular-Variante (Karriere) */
.fn-form.dark { gap: .4rem; }
.fn-form.dark .fn-row { gap: .5rem; }
.fn-form.dark .fn-field { gap: .25rem; font-size: .62rem; color: rgba(248,245,239,.85); }
.fn-form.dark .fn-field input { height: 2.25rem; border: 0; border-radius: 6px; padding: 0 .75rem; font-size: .75rem; }
.fn-form.dark .fn-consent { font-size: .62rem; line-height: 1.4; color: rgba(248,245,239,.85); gap: .5rem; }
.fn-form.dark .fn-consent a { color: var(--color-warm); }
.fn-form.dark .fn-consent input { accent-color: var(--color-conversion); margin-top: .1rem; }
.fn-form.dark .fn-secure { color: rgba(248,245,239,.6); font-size: .58rem; }
.fn-radio { display: flex; align-items: center; gap: .75rem; height: 2.25rem; font-size: .75rem; font-weight: 400; color: rgba(248,245,239,.9); }
.fn-radio input { accent-color: var(--color-conversion); margin-right: .35rem; }
.fn-form.dark legend { margin-bottom: .25rem; font-size: .62rem; font-weight: 600; color: rgba(248,245,239,.85); }
.fn-form.dark fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fn-dark .fn-success { background: var(--color-surface); color: var(--color-ink); border-radius: 2px; }
.fn-dark .fn-success h3 { color: var(--color-ink); }

/* ---------- FAQ ---------- */
.fn-faq { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.fn-faq details { padding: 1.25rem 0; border-bottom: 1px solid var(--color-border); }
.fn-faq details:last-child { border-bottom: 0; }
.fn-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; font-size: .875rem; font-weight: 600; }
.fn-faq summary::-webkit-details-marker { display: none; }
.fn-faq summary .plus { font-size: 1.5rem; font-weight: 400; color: var(--color-warm); transition: transform .2s; }
.fn-faq details[open] .plus { transform: rotate(45deg); }
.fn-faq details p { margin-top: .75rem; max-width: 42rem; font-size: .875rem; line-height: 1.75; color: var(--color-muted-fg); }

/* ---------- Mobile Sticky CTA ---------- */
.fn-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; padding: .75rem; background: var(--color-dark); border-top: 1px solid var(--color-dark-border); }
.fn-sticky.light { background: var(--color-surface); border-top-color: var(--color-border); box-shadow: var(--shadow-lg); }
.fn-sticky.is-hidden { display: none; }
@media (min-width: 768px) { .fn-sticky { display: none; } }
@media (max-width: 767px) { .fn-has-sticky { padding-bottom: 5rem; } }

/* ---------- Rechtliches ---------- */
.fn-legal { max-width: 56rem; padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 640px) { .fn-legal { padding-top: 5rem; padding-bottom: 5rem; } }
.fn-legal h2 { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); font-size: 1.9rem; }
.fn-legal > h2:first-child, .fn-legal > section:first-child > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fn-legal h3 { margin-top: 1.75rem; font-size: 1.25rem; }
.fn-legal p, .fn-legal address, .fn-legal li { margin-top: .75rem; font-size: .875rem; line-height: 1.75; color: var(--color-muted-fg); font-style: normal; }
.fn-legal strong { color: var(--color-ink); }
.fn-legal a { text-decoration: underline; text-decoration-color: var(--color-warm); text-underline-offset: 2px; }
.fn-legal .draft { border: 1px solid var(--color-warm); background: var(--color-surface); padding: 1rem; font-weight: 600; color: var(--color-ink); border-radius: 2px; }

/* =========================================================
   VORSORGE
   ========================================================= */
.vs-hero .fn-split { gap: 0; }
@media (min-width: 768px) { .vs-hero .grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 34rem; } }
@media (min-width: 1024px) { .vs-hero .grid { grid-template-columns: .85fr 1.15fr; } }
.vs-hero .copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: 3rem 0; }
@media (min-width: 768px) { .vs-hero .copy { padding: 4rem 2rem 4rem 0; } }
.vs-hero h1 { margin-top: .75rem; font-size: 2.75rem; line-height: .92; }
@media (min-width: 640px) { .vs-hero h1 { font-size: 3rem; } }
@media (min-width: 1024px) { .vs-hero h1 { font-size: 4.15rem; } }
.vs-hero .text { margin-top: 1.25rem; max-width: 36rem; display: grid; gap: .5rem; font-size: .875rem; line-height: 1.6; color: rgba(248,245,239,.75); }
.vs-hero .visual { position: relative; height: 18rem; margin-inline: -1.25rem; }
@media (min-width: 640px) { .vs-hero .visual { height: 20rem; margin-inline: -2rem; } }
@media (min-width: 768px) { .vs-hero .visual { margin: 0; height: auto; aspect-ratio: 1264 / 848; align-self: center; } }
@media (min-width: 1024px) { .vs-hero .visual { margin-left: -5rem; margin-right: -4rem; } }
.vs-hero .visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
@media (min-width: 768px) { .vs-hero .visual img { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, #000 18%, #000 100%); } }
.vs-hero .visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-dark), transparent 60%); }
@media (min-width: 768px) { .vs-hero .visual::after { background: linear-gradient(to right, rgba(6,21,33,.45), transparent 50%); } }
.vs-strip { padding: 1rem 0; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); }
.vs-strip .section-shell { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; font-size: .75rem; }
.vs-strip .k { font-weight: 600; text-transform: uppercase; color: var(--color-warm); }
.vs-strip b { font-weight: 600; }
.vs-strip .m { color: var(--color-muted-fg); }
.vs-learn { --cols: .76fr 1.24fr; align-items: center; gap: 2.25rem; }
.vs-pages { display: grid; gap: 1rem; }
@media (min-width: 640px) { .vs-pages { grid-template-columns: repeat(3, 1fr); gap: 0; padding: 1.25rem 0; } }
.vs-page { position: relative; min-height: 16rem; border: 1px solid var(--color-border); background: var(--color-surface); padding: 1.25rem; border-radius: 2px; box-shadow: var(--shadow-lg); }
@media (min-width: 640px) {
  .vs-page { min-height: 18rem; }
  .vs-page:nth-child(1) { transform: translateX(1.25rem) rotate(-3deg); }
  .vs-page:nth-child(2) { z-index: 2; transform: translateY(-.75rem); }
  .vs-page:nth-child(3) { transform: translateX(-1.25rem) rotate(3deg); }
}
.vs-page .top { display: flex; align-items: center; justify-content: space-between; padding-bottom: .75rem; border-bottom: 1px solid var(--color-border); font-size: .5rem; font-weight: 700; text-transform: uppercase; color: var(--color-muted-fg); }
.vs-page h3 { margin-top: 1.25rem; font-size: 1.5rem; line-height: .95; }
.vs-page p { margin-top: .75rem; font-size: .62rem; line-height: 1rem; color: var(--color-muted-fg); }
.vs-page .line { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1rem; height: 1px; background: rgba(205,153,86,.3); }
.vs-chart { position: relative; margin-top: 1.25rem; height: 4rem; border-left: 1px solid rgba(205,153,86,.35); border-bottom: 1px solid rgba(205,153,86,.35); }
.vs-chart i { position: absolute; width: 6px; height: 6px; border-radius: 99px; background: var(--color-warm); }
.vs-chart::before { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .75rem; height: 1px; background: rgba(205,153,86,.55); transform: rotate(-7deg); }
.vs-split2 { margin-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; border-block: 1px solid var(--color-border); padding: .75rem 0; text-align: center; font-size: .52rem; font-weight: 700; text-transform: uppercase; color: var(--color-muted-fg); }
.vs-split2 span + span { border-left: 1px solid var(--color-border); }
.vs-chf { margin-top: 1.25rem; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .6rem 0; border-block: 1px solid var(--color-border); color: var(--color-warm); }
.vs-chf .plus { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 99px; border: 1px solid rgba(205,153,86,.45); }
.vs-chf .plus::before { content: ""; width: 4px; height: 1rem; background: var(--color-warm); }
.vs-chf .plus::after { content: ""; position: absolute; width: 1rem; height: 4px; background: var(--color-warm); }
.vs-chf b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; }
.vs-learnlist { margin-top: 2.25rem; display: grid; column-gap: 2rem; border-top: 1px solid var(--color-border); }
@media (min-width: 640px) { .vs-learnlist { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vs-learnlist { grid-template-columns: repeat(3, 1fr); } }
.vs-learnlist div { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid rgba(221,214,205,.7); font-size: .75rem; font-weight: 600; line-height: 1.25rem; }
.vs-criteria { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.vs-criteria div { display: flex; align-items: center; gap: .75rem; min-height: 5rem; padding: 1rem; border: 1px solid rgba(205,153,86,.3); background: rgba(21,35,46,.2); font-size: .75rem; font-weight: 600; }
.vs-indiv { --cols: 1.08fr .92fr; align-items: center; gap: 2rem; }
.vs-indiv .text { margin-top: 1rem; max-width: 42rem; display: grid; gap: .5rem; font-size: .875rem; line-height: 1.6; color: rgba(248,245,239,.7); }
.vs-author { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 640px) { .vs-author { grid-template-columns: 9rem 1fr auto; } }
@media (min-width: 1024px) { .vs-author { grid-template-columns: 11rem 1fr auto; gap: 2.25rem; } }
.vs-author img { width: 9rem; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 2px; }
@media (min-width: 1024px) { .vs-author img { width: 11rem; } }
.vs-author p.bio { margin-top: .5rem; max-width: 48rem; font-size: .68rem; line-height: 1.25rem; color: var(--color-muted-fg); }
.vs-form-sec { position: relative; isolation: isolate; overflow: hidden; scroll-margin-top: 1rem; }
.vs-form-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .04; pointer-events: none;
  background: repeating-radial-gradient(ellipse at 85% 110%, transparent 0 22px, var(--color-ink) 23px, transparent 24px 42px); }
.vs-form-sec .fn-split { --cols: .75fr 1.25fr; gap: 2.5rem; }
@media (min-width: 1024px) { .vs-form-sec .fn-split { gap: 3.5rem; } }

/* =========================================================
   STEUERN
   ========================================================= */
.tx-hero { position: relative; isolation: isolate; }
.tx-hero .bg { position: absolute; inset: 5rem 0 0 0; z-index: -1; }
@media (min-width: 1024px) { .tx-hero .bg { left: 52%; top: 0; } }
.tx-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.tx-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--color-dark), rgba(6,21,33,.75), var(--color-dark)); }
@media (min-width: 1024px) { .tx-hero .bg::after { background: linear-gradient(to right, var(--color-dark), rgba(6,21,33,.25), transparent); } }
.tx-hero .inner { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 38rem; padding-block: 4rem; }
@media (min-width: 1024px) { .tx-hero .inner { min-height: 36rem; padding-block: 6rem; } }
.tx-hero .copy { max-width: 42rem; }
.tx-hero h1 { margin-top: 1.25rem; font-size: clamp(3rem, 6.5vw, 4.5rem); line-height: .95; }
.tx-hero .lead { margin-top: 1.5rem; max-width: 32rem; font-size: .9rem; line-height: 1.75; color: rgba(248,245,239,.85); }
.tx-usps { margin-top: 1.75rem; display: grid; gap: .75rem; max-width: 36rem; }
@media (min-width: 640px) { .tx-usps { grid-template-columns: repeat(3, 1fr); } }
.tx-usps > div { display: flex; gap: .5rem; }
@media (min-width: 640px) { .tx-usps > div { display: block; } }
.tx-usps strong { display: block; font-size: .75rem; }
@media (min-width: 640px) { .tx-usps strong { margin-top: .5rem; } }
.tx-usps p { margin-top: .25rem; font-size: .7rem; line-height: 1.25rem; color: rgba(248,245,239,.7); }
.tx-prices { margin-top: 3rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .tx-prices { grid-template-columns: repeat(3, 1fr); } }
.tx-price { position: relative; display: flex; flex-direction: column; min-height: 18rem; padding: 1.75rem; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.tx-price.featured { border-color: var(--color-warm); }
.tx-price .badge { position: absolute; top: 1.5rem; right: 1.5rem; padding: .25rem .5rem; background: var(--color-warm); font-size: .65rem; font-weight: 700; }
.tx-price h3 { margin-top: 2rem; font-size: 3rem; }
.tx-price .sub { margin-top: .5rem; font-size: .875rem; color: var(--color-muted-fg); }
.tx-price .btn { margin-top: auto; height: 3rem; }
.tx-express { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem 0; border-block: 1px solid var(--color-border); }
@media (min-width: 640px) { .tx-express { flex-direction: row; align-items: center; justify-content: space-between; } }
.tx-express > div { display: flex; gap: .75rem; }
.tx-express strong { font-size: .875rem; }
.tx-benefits { display: grid; gap: 2.25rem 2.5rem; }
@media (min-width: 640px) { .tx-benefits { grid-template-columns: repeat(2, 1fr); } }
.tx-benefits article { padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.tx-benefits h3 { margin-top: 1rem; font-size: 1.5rem; }
.tx-benefits p { margin-top: .5rem; font-size: .875rem; line-height: 1.5rem; color: var(--color-muted-fg); }
.tx-steps { margin-top: 3rem; display: grid; border-left: 1px solid var(--color-warm); }
@media (min-width: 768px) { .tx-steps { grid-template-columns: repeat(4, 1fr); border-left: 0; border-top: 1px solid var(--color-warm); } }
.tx-steps article { position: relative; padding: 0 1.5rem 2.25rem; }
@media (min-width: 768px) { .tx-steps article { padding: 1.75rem 1.75rem 0 0; } }
.tx-steps .dot { position: absolute; left: -6px; top: 4px; width: 12px; height: 12px; border-radius: 99px; background: var(--color-warm); }
@media (min-width: 768px) { .tx-steps .dot { left: 0; top: -6px; } }
.tx-steps .num { font-size: .75rem; font-weight: 700; color: var(--color-warm); }
.tx-steps h3 { margin-top: .75rem; font-size: 1.5rem; line-height: 1.15; }
.tx-steps p { margin-top: .75rem; font-size: .875rem; line-height: 1.5rem; color: var(--color-muted-fg); }
.tx-person { display: grid; }
@media (min-width: 1024px) { .tx-person { grid-template-columns: .8fr 1.2fr; } }
.tx-person .img { max-height: 37rem; overflow: hidden; }
.tx-person .img img { width: 100%; height: 20rem; object-fit: cover; object-position: top; }
@media (min-width: 1024px) { .tx-person .img img { height: 100%; } }
.tx-person .copy { display: flex; flex-direction: column; justify-content: center; padding: 3rem 0; }
@media (min-width: 1024px) { .tx-person .copy { padding: 5rem 0 5rem 5rem; } }
.tx-person .creds { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--color-dark-border); font-size: .75rem; line-height: 1.5rem; color: rgba(248,245,239,.75); }
.tx-cta .section-shell { display: flex; flex-direction: column; gap: 1.75rem; }
@media (min-width: 768px) { .tx-cta .section-shell { flex-direction: row; align-items: center; justify-content: space-between; } }

/* Mehrstufiges Buchungsformular */
.tx-form { scroll-margin-top: 2rem; }
.tx-form .head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); font-size: .75rem; font-weight: 700; color: var(--color-muted-fg); }
.tx-progress { margin-top: .5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tx-progress span { height: 4px; border-radius: 99px; background: var(--color-border); }
.tx-progress span.on { background: var(--color-warm); }
.tx-step { margin-top: 2rem; }
.js .tx-step:not(.is-active) { display: none; }
.tx-step h3 { margin-top: .75rem; font-size: clamp(1.9rem, 3.5vw, 2.25rem); }
.tx-offers { margin-top: 1.75rem; display: grid; gap: .75rem; }
.tx-offer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5rem; padding: 1.25rem; border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; transition: border-color .2s, background .2s; }
.tx-offer input { position: absolute; opacity: 0; pointer-events: none; }
.tx-offer .radio { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 99px; border: 1px solid var(--color-border); flex-shrink: 0; }
.tx-offer .l { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.tx-offer strong { display: block; font-size: .875rem; }
.tx-offer small { font-size: .75rem; color: var(--color-muted-fg); }
.tx-offer b { font-size: .875rem; flex-shrink: 0; }
.tx-offer:has(input:checked) { border-color: var(--color-warm); background: rgba(205,153,86,.1); box-shadow: 0 0 0 1px var(--color-warm); }
.tx-offer:has(input:checked) .radio { border-color: var(--color-warm); background: var(--color-warm); }
.tx-offer:has(input:focus-visible) { outline: 2px solid var(--color-warm); outline-offset: 2px; }
.tx-total { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; border-top: 1px solid var(--color-border); font-size: .875rem; font-weight: 600; }
.tx-sum { margin-top: 1.75rem; padding: 1.25rem 0; border-block: 1px solid var(--color-border); font-size: .875rem; display: grid; gap: .75rem; }
.tx-sum div { display: flex; justify-content: space-between; }
.tx-sum .total { padding-top: 1rem; border-top: 1px solid var(--color-border); font-size: 1.1rem; font-weight: 700; }
.tx-nav { margin-top: 1.75rem; display: flex; gap: .75rem; }
.tx-nav .btn-outline { padding-inline: 1rem; }
.tx-nav .grow { flex: 1; justify-content: center; }
.tx-emp { margin-top: .75rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.tx-emp label { display: flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .75rem; border: 1px solid var(--color-border); background: var(--color-surface); font-size: .75rem; cursor: pointer; }
.tx-emp input { accent-color: var(--color-warm); }
fieldset.plain { border: 0; margin: 0; padding: 0; }
fieldset.plain legend { font-size: .75rem; font-weight: 600; }

/* =========================================================
   KARRIERE
   ========================================================= */
.kr-subnav { position: relative; z-index: 20; background: var(--color-dark); border-bottom: 1px solid rgba(65,79,90,.5); color: var(--color-dark-fg); }
.kr-subnav .section-shell { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; height: 4.5rem; }
.kr-subnav img { width: 3rem; height: 3rem; object-fit: contain; }
.kr-subnav nav { display: none; justify-content: center; gap: 2.5rem; }
@media (min-width: 768px) { .kr-subnav nav { display: flex; } }
.kr-subnav nav a { font-size: .75rem; font-weight: 600; transition: color .2s; }
.kr-subnav nav a:hover { color: var(--color-warm); }
.kr-subnav .btn { grid-column: 3; }
.kr-hero { position: relative; overflow: hidden; }
.kr-hero .inner { position: relative; z-index: 10; display: flex; align-items: center; min-height: 35rem; padding-top: 4rem; padding-bottom: 6rem; pointer-events: none; }
@media (min-width: 768px) { .kr-hero .inner { padding-bottom: 5rem; } }
.kr-hero .copy { max-width: 42rem; pointer-events: auto; }
@media (min-width: 768px) { .kr-hero .copy { width: 49%; padding-right: 1.5rem; } }
.kr-pill { display: inline-flex; padding: .5rem 1rem; border-radius: 99px; background: rgba(21,35,46,.8); color: rgba(248,245,239,.8); }
.kr-hero h1 { margin-top: 1rem; font-size: 3rem; line-height: .88; }
@media (min-width: 768px) { .kr-hero h1 { font-size: 3.35rem; } }
@media (min-width: 1024px) { .kr-hero h1 { font-size: 3.75rem; } }
.kr-facts { margin-top: 1.5rem; display: grid; gap: .75rem; font-size: .65rem; color: rgba(248,245,239,.75); }
@media (min-width: 640px) { .kr-facts { grid-template-columns: repeat(3, 1fr); } }
.kr-facts span { display: flex; align-items: center; gap: .5rem; }
.kr-social { margin-top: 1rem; display: flex; align-items: center; gap: .75rem; font-size: .65rem; color: rgba(248,245,239,.7); }
.kr-social .dots { display: flex; }
.kr-social .dots span { display: grid; place-items: center; width: 2rem; height: 2rem; margin-left: -.5rem; border-radius: 99px; border: 2px solid var(--color-dark); background: var(--color-dark-muted); color: var(--color-warm); font-size: .6rem; }
.kr-social .dots span:first-child { margin-left: 0; }
.kr-video { position: relative; height: 20rem; margin: 0 1.25rem; background: var(--color-dark); }
@media (min-width: 640px) { .kr-video { margin: 0 2rem; } }
@media (min-width: 768px) { .kr-video { position: absolute; top: 0; bottom: 0; right: 0; width: 57%; height: auto; margin: 0; } }
.kr-video video, .fn-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.kr-video .fade { display: none; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--color-dark) 0%, rgba(6,21,33,.75) 26%, rgba(6,21,33,.3) 46%, transparent 64%); }
@media (min-width: 768px) { .kr-video .fade { display: block; } }
.kr-video .fade-b { position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; pointer-events: none; background: linear-gradient(to top, rgba(6,21,33,.8), transparent); }
@media (min-width: 768px) { .kr-video .fade-b { display: none; } }
.kr-quote { position: absolute; right: 4%; top: 6%; max-width: 10rem; transform: rotate(-5deg); pointer-events: none; font-family: var(--font-hand); color: var(--color-dark-fg); }
.kr-quote p { font-size: .9rem; line-height: 1.15; }
.kr-quote small { display: block; margin-top: .25rem; font-size: .65rem; opacity: .8; }
@media (min-width: 640px) { .kr-quote { right: 6%; top: 10%; max-width: 13rem; } .kr-quote p { font-size: 1.25rem; } .kr-quote small { font-size: .875rem; } }
@media (min-width: 768px) { .kr-quote { right: 7%; top: 12%; } .kr-quote p { font-size: 1.5rem; } }
.kr-playhint { position: absolute; right: 1.5rem; bottom: 34%; z-index: 10; display: flex; flex-direction: column; align-items: center; pointer-events: none; font-family: var(--font-hand); font-size: 1.15rem; color: var(--color-dark-fg); }
@media (min-width: 768px) { .kr-playhint { right: 10%; font-size: 1.25rem; } }
.kr-playhint svg { margin-top: .1rem; width: 2rem; height: 2.5rem; transform: rotate(14deg); }
.fn-play { position: absolute; z-index: 30; right: 1.5rem; bottom: 8%; border: 0; padding: 0; background: none; cursor: pointer; }
@media (min-width: 768px) { .kr-video .fn-play { right: 11%; } }
.fn-play span { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 99px; background: var(--color-warm); color: var(--color-ink); box-shadow: var(--shadow-lg); transition: transform .2s; }
@media (min-width: 768px) { .fn-play span { width: 4rem; height: 4rem; } }
.fn-play:hover span { transform: scale(1.05); }
.fn-play svg { width: 1.5rem; height: 1.5rem; margin-left: .2rem; fill: currentColor; }
.fn-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-dark); }
.fn-video .fn-play { right: 1rem; bottom: 1rem; }
.fn-video .fn-play span { width: 3rem; height: 3rem; }
@media (min-width: 768px) { .fn-video .fn-play span { width: 3.5rem; height: 3.5rem; } }
.fn-video .fade-b { position: absolute; left: 0; right: 0; bottom: 0; height: 4rem; pointer-events: none; background: linear-gradient(to top, rgba(6,21,33,.7), transparent); }
.fn-video.is-playing .ov, .fn-video.is-playing .fn-play, .fn-video.is-playing .fade-b { display: none; }
.kr-bar { display: none; position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; border-top: 1px solid rgba(65,79,90,.5); background: rgba(6,21,33,.7); backdrop-filter: blur(12px); }
@media (min-width: 768px) { .kr-bar { display: block; } }
.kr-bar .section-shell { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-top: .75rem; padding-bottom: .75rem; padding-left: 50%; font-size: .65rem; color: rgba(248,245,239,.75); }
.kr-bar span { display: flex; align-items: center; gap: .5rem; }
.kr-benefits { --cols: .78fr 1.22fr; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .kr-benefits { grid-template-columns: .78fr 1.22fr; } }
@media (min-width: 1024px) { .kr-benefits { gap: 3.5rem; } }
.kr-bcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; min-height: 8rem; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.kr-bcard svg { width: 2rem; height: 2rem; margin-top: .25rem; color: var(--color-warm); }
.kr-bcard h3 { font-family: var(--font-sans); font-size: .875rem; font-weight: 600; line-height: 1.25; }
.kr-bcard p { margin-top: .5rem; font-size: .75rem; line-height: 1.6; color: var(--color-muted-fg); }
.kr-why { position: relative; overflow: hidden; }
.kr-why .bg { position: absolute; top: 0; bottom: 0; right: 0; width: 100%; pointer-events: none; }
@media (min-width: 768px) { .kr-why .bg { width: 90%; } }
.kr-why .bg img { width: 100%; height: 100%; object-fit: cover; }
.kr-why::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(6,21,33,.9), rgba(6,21,33,.35), transparent); pointer-events: none; }
.kr-why .grid { position: relative; z-index: 10; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .kr-why .grid { grid-template-columns: minmax(0, .45fr) minmax(0, .55fr); } }
.kr-why .text { max-width: 28rem; padding: 1.5rem; border-radius: 2px; background: rgba(6,21,33,.25); backdrop-filter: blur(4px); }
@media (min-width: 768px) { .kr-why .text { padding: 0; background: none; backdrop-filter: none; } }
.kr-why h2 { margin-top: .5rem; font-size: clamp(1.9rem, 4vw, 3rem); line-height: .9; }
.kr-why .body { margin-top: 1rem; display: grid; gap: .75rem; font-size: .8rem; line-height: 1.6; color: rgba(248,245,239,.75); }
.kr-why .vid { display: flex; justify-content: center; }
@media (min-width: 768px) { .kr-why .vid { justify-content: flex-end; padding: .75rem 2.5rem .75rem 0; } }
.kr-why .vid > div { width: 100%; max-width: 36rem; border-radius: 12px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,.5); }
.kr-annot { position: absolute; right: 6%; top: 10%; z-index: 3; transform: rotate(-6deg); display: flex; align-items: flex-start; gap: .25rem; pointer-events: none; font-family: var(--font-hand); font-size: 1.15rem; font-weight: 600; line-height: 1.1; color: var(--color-dark-fg); }
@media (min-width: 768px) { .kr-annot { font-size: 1.5rem; } }
.kr-annot svg { margin-top: .25rem; width: 2rem; height: 1.5rem; transform: rotate(-80deg); }
.kr-team { display: grid; gap: 1.75rem; align-items: center; }
@media (min-width: 768px) { .kr-team { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 2.5rem; } }
.kr-team .vidwrap { position: relative; scroll-margin-top: 6rem; }
@media (min-width: 768px) { .kr-team .vidwrap { padding-right: 4rem; } }
.kr-team .vidwrap > div { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-lg); }
.kr-team .label { position: absolute; left: 1rem; top: 1rem; z-index: 3; pointer-events: none; }
.kr-team .label p { font-family: var(--font-hand); font-size: 1.15rem; color: rgba(248,245,239,.8); }
.kr-team .label .eyebrow { color: rgba(248,245,239,.9); }
.kr-team .side { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(-5deg); align-items: center; pointer-events: none; }
@media (min-width: 768px) { .kr-team .side { display: flex; } }
.kr-team .side svg { width: 3rem; height: 2.75rem; margin-right: .25rem; color: var(--color-ink); }
.kr-team .side span { font-family: var(--font-hand); font-size: 1.25rem; font-weight: 600; line-height: 1; }
.kr-tcard { position: relative; display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; min-height: 10rem; overflow: hidden; padding: .75rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.kr-tcard img { width: 6.5rem; height: 100%; min-height: 8rem; object-fit: cover; border-radius: 6px; }
.kr-tcard .q { position: absolute; right: 1rem; top: .25rem; font-family: var(--font-display); font-size: 3rem; line-height: 1; color: rgba(205,153,86,.25); }
.kr-tcard > div { display: flex; flex-direction: column; justify-content: center; }
.kr-tcard blockquote { margin: 0; padding-right: .75rem; font-size: .75rem; line-height: 1.6; }
.kr-tcard b { margin-top: .75rem; display: block; font-size: .875rem; font-weight: 600; }
.kr-tcard small { font-size: .75rem; color: var(--color-muted-fg); }
.kr-apply { display: grid; }
@media (min-width: 768px) { .kr-apply { min-height: 24rem; grid-template-columns: minmax(0, .33fr) minmax(0, .27fr) minmax(0, .4fr); } }
.kr-apply .faqcol { padding: 2.5rem 1.25rem; }
@media (min-width: 640px) { .kr-apply .faqcol { padding-inline: 2rem; } }
@media (min-width: 768px) { .kr-apply .faqcol { padding: 2rem 1rem 2rem max(2rem, calc((100vw - 80rem) / 2 + 4rem)); } }
.kr-apply .fn-faq { margin-top: 1.25rem; padding: 0 1rem; border: 0; border-radius: 6px; background: var(--color-surface); box-shadow: var(--shadow-sm); }
.kr-apply .fn-faq details { padding: .75rem 0; }
.kr-apply .fn-faq details p { padding-top: .25rem; font-size: .875rem; line-height: 1.5rem; }
.kr-apply .imgcol { display: none; position: relative; min-height: 24rem; overflow: hidden; }
@media (min-width: 768px) { .kr-apply .imgcol { display: block; } }
.kr-apply .imgcol img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 42% center; }
.kr-apply .formcol { display: flex; flex-direction: column; justify-content: center; padding: 2.5rem 1.25rem; scroll-margin-top: 1rem; }
@media (min-width: 640px) { .kr-apply .formcol { padding-inline: 2rem; } }
@media (min-width: 768px) { .kr-apply .formcol { padding: 2rem; } }
@media (min-width: 1024px) { .kr-apply .formcol { padding-inline: 3rem; } }
.kr-apply .formcol > div { width: 100%; max-width: 36rem; margin-inline: auto; }
.kr-contact { padding: .9rem 0; border-top: 1px solid var(--color-dark-border); }
.kr-contact .section-shell { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; font-size: .7rem; color: rgba(248,245,239,.7); }
.kr-contact img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.kr-contact a:hover { color: var(--color-warm); }
.kr-contact .hand { margin-left: auto; transform: rotate(-5deg); font-family: var(--font-hand); font-size: 1.15rem; line-height: .8; color: rgba(248,245,239,.95); text-align: right; }

/* =========================================================
   ÜBER MICH / KONTAKT
   ========================================================= */
.um-hero .grid { display: grid; gap: 3rem; align-items: end; }
@media (min-width: 1024px) { .um-hero .grid { grid-template-columns: 1fr 1fr; } }
.um-hero { padding: 4rem 0 5rem; }
.um-hero img { width: 100%; max-height: 38rem; object-fit: cover; object-position: top; border-radius: 2px; }
.um-facts { display: grid; gap: 1px; background: var(--color-border); }
@media (min-width: 640px) { .um-facts { grid-template-columns: 1fr 1fr; } }
.um-facts article { padding: 1.75rem; background: var(--color-surface); }
.um-facts p { margin-top: .75rem; font-size: .875rem; line-height: 1.5rem; color: var(--color-muted-fg); }
.um-principles { margin-top: 3.5rem; display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .um-principles { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.um-principles article { padding-top: 2rem; border-top: 1px solid var(--color-border); }
@media (min-width: 768px) {
  .um-principles article { padding: 0 2.25rem; border-top: 0; }
  .um-principles article:first-child { padding-left: 0; }
  .um-principles article:last-child { padding-right: 0; }
  .um-principles article:not(:last-child) { border-right: 1px solid var(--color-border); }
}
.um-principles .n { font-size: .75rem; font-weight: 700; letter-spacing: .1em; color: var(--color-warm); }
.um-principles h3 { margin-top: .75rem; font-size: 1.5rem; line-height: 1.15; }
.um-principles p { margin-top: .75rem; font-size: .875rem; line-height: 1.5rem; color: var(--color-muted-fg); }
.fn-ctaband .section-shell { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .fn-ctaband .section-shell { grid-template-columns: 1fr auto; } }
.fn-ctaband p { margin-top: .75rem; max-width: 42rem; font-size: .875rem; line-height: 1.5rem; }