/* Stimm: warme Cremeflächen, Champagner und Graphit. Nach styles.css laden. */
:root {
  --paper: #f2eee7;
  --ivory: #e7e0d5;
  --surface: #f6f2eb;
  --surface-soft: #eae3d8;
  --ink: #20201e;
  --brown: #58564f;
  --muted: #59554e;
  --gold: #75572f;
  --gold-light: #e4d2b0;
  --line: #24231f1a;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
}
[hidden] { display: none !important; }
body { font-family: var(--font); text-rendering: optimizeLegibility; }
button, a { touch-action: manipulation; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
.container { width: min(1200px, calc(100% - 64px)); }
.reveal, .reveal.visible { opacity: 1; transform: none; }
.reveal.reveal-pending { opacity: 0; transform: translateY(18px); }
.reveal:focus-within { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid #806239; outline-offset: 5px; }
.section-tag, .eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  text-transform: none; margin-bottom: 20px;
}
.section-tag::before, .eyebrow::before { display: none; }
.hero h1, .pricing h2, .outcome-intro h2, .manifesto h2,
.section-heading h2, .seo-copy h2, .faq-heading h2, .contact-copy h2 {
  font-family: var(--font); font-weight: 600;
  letter-spacing: -.055em; line-height: 1.06;
}
.hero h1 em, .pricing h2 em, .outcome-intro h2 em, .manifesto h2 em {
  font-family: inherit; font-style: normal; font-weight: inherit;
  letter-spacing: inherit; background: none; color: var(--gold); animation: none;
}
.pricing h2, .outcome-intro h2, .manifesto h2, .section-heading h2,
.seo-copy h2, .faq-heading h2, .contact-copy h2 {
  font-size: clamp(38px, 4.6vw, 66px);
}

/* Kompakter Einstieg */
.site-header {
  background: #f2eee7dc; border-bottom: 1px solid #24231f0d;
  backdrop-filter: blur(22px);
}
.site-header.scrolled { background: #f2eee7ed; box-shadow: 0 4px 20px #24231f05; }
.nav { height: 64px; gap: 28px; }
.nav-links { gap: 30px; }
.nav-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12px; letter-spacing: 0; font-weight: 500;
}
.nav-links a::after { bottom: 5px; }
.nav-cta {
  min-height: 38px; padding-inline: 18px; border: 0;
  background: var(--ink); color: white; font-size: 11px; font-weight: 500;
}
.wordmark strong { font-weight: 720; }
.wordmark span { font-size: 8px; letter-spacing: .12em; }
.hero {
  min-height: 0; padding-top: 64px;
  background: radial-gradient(ellipse at 80% 42%, #d8c5a96b, transparent 53%),
    linear-gradient(180deg, var(--paper) 60%, #ebe4d9);
}
.hero::before { display: none; }
.hero-kicker {
  min-height: 45px; border: 0; font-size: 9px;
  font-weight: 500; letter-spacing: .07em;
}
.availability i { width: 5px; height: 5px; box-shadow: none; animation: none; }
.hero-grid {
  min-height: 0; grid-template-columns: minmax(0,1fr) minmax(0,1.08fr);
  gap: 28px; padding: 24px 0 28px;
}
.hero h1 { font-size: clamp(52px, 5.7vw, 82px); line-height: 1.02; }
.hero-lead {
  max-width: 490px; margin-top: 20px; font-size: 17px;
  line-height: 1.65; letter-spacing: -.01em;
}
.hero-actions { margin-top: 28px; gap: 24px; }
.button, .price-button {
  min-height: 48px; padding-inline: 22px;
  font-size: 13px; font-weight: 550; letter-spacing: -.01em;
}
.button-dark { min-width: 175px; box-shadow: none; }
.text-link { font-size: 13px; font-weight: 500; letter-spacing: 0; border: 0; gap: 9px; }
.button span, .price-button span, .text-link span { transition: transform .3s var(--ease); }
.button:hover span, .price-button:hover span { transform: translateX(3px); }
.text-link:hover { color: var(--gold); }
.hero-plans {
  padding: 5px; gap: 5px; border: 1px solid var(--line);
  border-radius: 20px; background: #ded4c578; overflow: hidden;
}
.hero-plans a, .hero-plans a:first-child {
  min-height: 78px; border: 0; padding: 15px 24px;
  border-radius: 15px; transition: background .25s;
}
.hero-plans a.active, .hero-plans a:hover { background: var(--surface); color: var(--ink); }
.hero-plans a > span, .hero-plans b { display: none; }
.hero-plans div { gap: 6px; }
.hero-plans small, .hero-plans a.active small, .hero-plans a:hover small {
  color: var(--brown); font-size: 10px; letter-spacing: .03em; font-weight: 600;
}
.hero-plans strong { font-size: 23px; font-weight: 600; letter-spacing: -.04em; }
.hero-plans strong i { color: var(--muted); font-size: 11px; letter-spacing: 0; }
.hero-proof { min-height: 76px; border: 0; gap: 20px; }
.hero-proof p { font-size: 13px; font-weight: 500; }
.hero-proof span { font-size: 9px; letter-spacing: .025em; font-weight: 500; }
.hero-proof span::before { display: none; }

/* Helle, interaktive Produktvorschau */
.hero-object.atelier {
  min-height: 505px; padding: 8px 0 0; display: flex; flex-direction: column;
  overflow: visible; transform: none; will-change: auto;
  border: 0; border-radius: 0; background: none; color: var(--ink); box-shadow: none;
}
.hero-object.atelier::before { display: none; }
.atelier-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding-inline: 18px;
}
.atelier-top > span { font-size: 9px; letter-spacing: .08em; color: var(--muted); }
.motion-toggle {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 25px;
  background: #f6f2ebbd; color: var(--brown); font-size: 10px;
}
.motion-state { padding: 3px 6px; border-radius: 10px; background: #e8e1d4; color: #554127; }
.motion-toggle:disabled { cursor: default; }
.atelier-tabs {
  display: flex; align-self: center; gap: 2px; padding: 4px; margin: 14px 0 0;
  border-radius: 30px; background: #dfd6c8; border: 1px solid #c2b59e4d;
}
.atelier-tabs button {
  min-height: 42px; padding: 10px 20px; border: 0; border-radius: 25px;
  background: transparent; color: #57544c; font-size: 12px;
  transition: background .25s, color .25s, box-shadow .25s;
}
.atelier-tabs [aria-selected="true"] { background: var(--surface); color: #24231f; box-shadow: 0 2px 6px #24231f10; }
.atelier-panel { flex: 1; border-radius: 20px; }
.atelier-stage { position: relative; height: 345px; perspective: 1200px; isolation: isolate; }
.atelier-halo, .atelier-pearl, .note-two { display: none; }
.atelier-stage::before {
  content: ""; position: absolute; inset: 0 -8px -4px; z-index: -1;
  pointer-events: none; border-radius: 40px;
  background: radial-gradient(ellipse at 50% 52%, #c5a77a70, #d7c2a133 48%, transparent 72%);
}
.preview-window {
  position: absolute; z-index: 1; width: 96%; max-width: 540px;
  top: 30px; left: 50%; overflow: hidden; border: 1px solid #f6f0e5;
  border-radius: 15px;
  background: var(--surface);
  transform: translateX(-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotateZ(-2deg);
  box-shadow: 0 26px 48px #40342226, 0 3px 8px #40342210;
  transition: transform .45s var(--ease); animation: window-float 9s ease-in-out infinite;
}
.preview-chrome {
  height: 30px; display: flex; align-items: center; justify-content: space-between;
  padding-inline: 13px; background: #e4dccf; color: #645e53;
}
.preview-chrome > span { display: flex; gap: 4px; }
.preview-chrome i { width: 4px; height: 4px; border-radius: 50%; background: #a09a8f; }
.preview-chrome small { font-size: 7px; font-weight: 500; letter-spacing: .1em; }
.preview-chrome b { font-size: 12px; font-weight: 400; }
.preview-page {
  position: relative; height: 260px; min-height: 260px; padding: 28px;
  background: linear-gradient(120deg,#f4efe5 35%,#dfd0ba); color: #282621;
}
.preview-label { display: block; font-size: 8px; font-weight: 500; letter-spacing: .05em; }
.preview-title {
  display: block; position: absolute; top: 54px; left: 28px; z-index: 2; margin: 0;
  width: 64%; font-size: clamp(25px,2.7vw,38px); font-weight: 550;
  line-height: 1.06; letter-spacing: -.05em; white-space: pre-line;
}
.preview-composition {
  position: absolute; right: 6%; top: 28%; width: 23%; height: 92px;
  display: flex; align-items: flex-end; gap: 5px; transform: rotate(-8deg);
}
.preview-composition i {
  width: 30%; height: 52px; border-radius: 22px; border: 1px solid #ffffffba;
  background: linear-gradient(145deg,#fcf7ec,#d5c3a5);
  box-shadow: 0 8px 12px #6954310d;
  transition: height .5s, transform .5s, border-radius .5s;
}
.preview-composition i:nth-child(2) { height: 86px; }
.preview-composition i:nth-child(3) { height: 65px; }
.preview-bottom {
  position: absolute; right: 28px; bottom: 20px; left: 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 25px; padding-top: 16px; border-top: 1px solid #b9ab922d;
}
.preview-caption { font-size: 9px; color: #645b4d; }
.preview-bottom b { display: grid; place-items: center; width: 24px; height: 24px; background: #25231e; color: white; border-radius: 50%; font-size: 12px; }
[data-scene="care"] .preview-composition i { height: 65px; border-radius: 10px; transform: translateY(-5px); }
[data-scene="care"] .preview-page { background: linear-gradient(120deg,#f2ede3 35%,#dcd5c7); }
[data-scene="seo"] .preview-composition i { height: 36px; transform: none; border-radius: 5px; }
[data-scene="seo"] .preview-composition i:nth-child(2) { height: 62px; }
[data-scene="seo"] .preview-composition i:nth-child(3) { height: 92px; }
.floating-note {
  position: absolute; z-index: 2; display: flex; align-items: center;
  gap: 9px; padding: 12px 15px; border: 1px solid #f8f3e9;
  border-radius: 15px; background: #f5eee2f5; color: #39342b;
  box-shadow: 0 9px 24px #40342212; backdrop-filter: blur(12px);
  animation: note-float 7s ease-in-out infinite;
}
.note-one { top: 5px; right: 0; }
.floating-note small { display: block; margin-bottom: 4px; color: #6b6356; font-size: 7px; letter-spacing: .04em; }
.floating-note strong { font-size: 11px; font-weight: 550; }
.floating-note > i { width: 6px; height: 6px; border-radius: 50%; background: #957748; }
.note-two { display: none; }
.atelier-caption { min-height: 80px; padding: 6px 22px 0; text-align: center; }
.atelier-caption h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.035em; font-weight: 600; line-height: 1.2; }
.atelier-caption p { max-width: 390px; margin: 0 auto; font-size: 12px; line-height: 1.6; color: var(--brown); }
.atelier-footnote { margin: 14px 0 0; padding: 0 15px; color: #736b5c; font-size: 9px; text-align: center; line-height: 1.5; }

/* Paketvergleich */
.pricing {
  --light-line: #24231f18;
  padding: 78px 0; background: var(--ivory); color: var(--ink);
}
.pricing-head { grid-template-columns: 1fr .85fr; gap: 65px; align-items: center; }
.pricing-head > div:last-child p { color: var(--brown); font-size: 15px; }
.pricing .section-tag, .pricing-head > div:last-child span { color: var(--gold); }
.recommendation {
  margin: 30px 0 20px; padding: 20px 24px; gap: 24px;
  border: 1px solid #bba78a40; border-radius: 20px; background: #dcd0bd;
}
.recommendation span { color: #6c522e; font-size: 10px; letter-spacing: .07em; }
.recommendation p { color: #554d40; font-size: 13px; line-height: 1.6; }
.recommendation strong { color: #353027; font-weight: 600; }
.recommendation strong i { color: var(--gold); }
.pricing-grid { gap: 20px; }
.price-card {
  padding: 62px 28px 28px; border: 1px solid #c5b69d52;
  border-radius: 26px; background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 30px #37302405;
}
.price-card:hover { box-shadow: 0 18px 45px #37302412; transform: translateY(-4px); }
.price-top, .price-title > i { display: none; }
.price-title { margin-top: 0; }
.price-title small { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
.price-title h3 { margin-top: 10px; font-size: 33px; font-weight: 600; letter-spacing: -.045em; }
.price { margin: 28px 0 22px; }
.price strong { font-size: 55px; font-weight: 600; letter-spacing: -.065em; font-variant-numeric: tabular-nums; }
.price small { color: var(--muted); font-size: 9px; letter-spacing: .02em; }
.price-card > p { min-height: 108px; color: var(--brown); font-size: 14px; line-height: 1.65; }
.capacity { flex-wrap: wrap; gap: 8px; margin-block: 20px; border-color: var(--line); }
.capacity span { color: var(--muted); font-size: 9px; letter-spacing: .03em; }
.capacity strong { font-size: 13px; font-weight: 600; }
.price-card li { color: var(--brown); font-size: 13px; line-height: 1.6; }
.limit, .value { padding: 13px; border: 0; border-radius: 12px; background: var(--surface-soft); }
.limit span, .value strong { color: var(--gold); font-size: 9px; }
.limit p, .value p { color: var(--brown); font-size: 11px; line-height: 1.5; }
.price-button { margin-top: 22px; }
.price-card.featured { background: #282722; border-color: #282722; color: #faf7ef; box-shadow: 0 15px 35px #29241b14; }
.featured-label {
  position: absolute; top: 22px; left: 28px; margin: 0;
  padding: 6px 10px; border-radius: 15px; background: #e5d5b8;
  color: #4b3920; font-size: 9px; font-weight: 600; letter-spacing: .04em;
}
.featured .price-title small, .featured .price small, .featured .capacity span { color: #c9c2b3; }
.featured > p, .featured li { color: #dfd9cd; }
.featured .capacity { border-color: #eee1c629; }
.featured li::before { border-color: #e5d5b8; }
.featured .value { background: #ffffff0b; border: 0; }
.featured .value p { color: #d6cdbb; }
.featured .value strong { color: #e5d5b8; }
.featured .price-button { background: #e5d5b8; color: #292319; }
.featured .price-button:hover { background: #f1e4cc; }
.featured :focus-visible { outline-color: #f1ddbb; }
.included { margin-top: 32px; }
.included > p, .included > div { min-height: 84px; padding: 18px; border-color: var(--line); }
.included > p, .pricing .included span { color: var(--gold); }
.included > p { font-size: 10px; letter-spacing: .04em; }
.included strong { font-size: 12px; font-weight: 550; }
.contract { padding: 24px; background: #ded5c7; }
.contract span { color: var(--gold); font-size: 9px; }
.contract p, .contract small { color: #5d584e; font-size: 12px; line-height: 1.7; }
.contract small { border-color: var(--line); }

/* Ruhigere Abschnitte und einheitliche Typografie */
.outcomes, .manifesto, .benefits, .services, .seo-example, .process, .faq { padding-block: 82px; }
.outcomes { background: var(--paper); }
.outcome-intro h2 { max-width: 900px; }
.outcome-intro > p:last-child { max-width: 640px; font-size: 16px; margin-top: 24px; }
.outcome-grid { margin-top: 36px; gap: 20px; }
.outcome-card { min-height: 450px; padding: 30px; border: 0; border-radius: 26px; background: var(--surface-soft); box-shadow: none; }
.outcome-card:hover { transform: translateY(-4px); box-shadow: 0 14px 35px #352e2110; }
.outcome-dark { background: #292823; color: #faf7ef; }
.outcome-dark .outcome-label, .outcome-dark .outcome-copy p { color: #d0c7b7; }
.outcome-gold { background: #dfcfb7; }
.outcome-wide { min-height: 350px; background: var(--surface-soft); }
.outcome-copy h3 { font-size: clamp(29px,3vw,42px); line-height: 1.08; letter-spacing: -.045em; }
.outcome-copy p { font-size: 14px; }
.clarity-demo { scale: .8; }
.pulse-demo { scale: .83; }
.search-demo { background: var(--surface); box-shadow: 0 8px 24px #473b2910; }
.conversion-demo .active small { color: #d5c8b0; }
.care-loop { min-height: 118px; box-shadow: none; border: 0; background: var(--surface-soft); }
.manifesto { background: linear-gradient(120deg,#e7e0d5,#dfd3c1); }
.manifesto-grid { grid-template-columns: 1fr; gap: 8px; max-width: 930px; text-align: center; }
.manifesto-copy { margin: 26px auto 0; max-width: 690px; display: block; }
.manifesto-copy p { font-size: 16px; }
.manifesto-copy span { display: block; writing-mode: horizontal-tb; margin-top: 25px; font-size: 10px; font-weight: 500; }
.benefits { background: var(--paper); }
.section-heading { gap: 36px; }
.benefit-grid, .process-grid { gap: 18px; border: 0; margin-top: 34px; }
.benefit-grid article, .benefit-grid article:first-child { min-height: 235px; padding: 28px; border: 0; border-radius: 24px; background: var(--surface-soft); }
.benefit-grid article:hover { background: #e0d6c6; transform: translateY(-3px); }
.benefit-grid h3 { margin-top: 36px; font-size: 25px; }
.benefit-grid p { font-size: 14px; }
.not-for { border: 0; border-radius: 20px; background: var(--surface-soft); }
.services { background: var(--ivory); }
.service-list { margin-top: 34px; }
.service { min-height: 230px; padding: 32px 16px; gap: 36px; }
.service h3 { font-size: clamp(27px,3vw,40px); line-height: 1.12; }
.service p { font-size: 14px; }
.service li { font-size: 13px; }
.service:hover { padding-inline: 16px; background: #f6f2eb80; }
.seo-example { background: #282722; }
.seo-copy > p:last-child { color: #d0c7b7; }
.keyword-panel { border: 0; border-radius: 26px; background: #e7ddcc; box-shadow: none; }
.keyword-panel li strong { font-weight: 550; }
.keyword-panel > p { color: #5d574b; font-size: 12px; }
.process { background: var(--paper); }
.process-grid article, .process-grid article:first-child { min-height: 285px; border: 0; border-radius: 24px; background: var(--surface-soft); padding: 26px; }
.process-grid h3 { margin-top: 55px; font-size: 28px; }
.process-grid p { font-size: 13px; }
.process-grid article:hover { background: #ded3c1; color: var(--ink); }
.process-grid article:hover p { color: var(--brown); }
.process-grid strong { left: 26px; bottom: 24px; }
.faq { background: var(--ivory); }
.faq-list { border: 1px solid #c5b69d52; background: var(--surface); border-radius: 24px; padding: 5px 26px; }
.faq-item:last-child { border: 0; }
.faq-item button { min-height: 88px; text-align: left; gap: 18px; }
.faq-item button span { font-size: 16px; font-weight: 550; }
.faq-item button i { display: none; }
.faq-answer { transition: none; }
.faq-answer p { padding-inline: 0 36px; font-size: 14px; }

/* Kontakt und Formular */
.contact { padding-top: 82px; background: #24231f; color: #faf7ef; }
.contact-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 70px; }
.contact-grid > *, .form-row > * { min-width: 0; }
.form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.contact-copy h2 { font-size: clamp(38px,4vw,55px); }
.contact-copy > p:not(.section-tag) { color: #d0c7b7; font-size: 16px; }
.contact-promise p { color: #d0c7b7; font-size: 12px; }
.contact-details a { min-height: 44px; line-height: 1.6; overflow-wrap: anywhere; }
.contact-form { padding: 30px; border: 1px solid #ffffff15; border-radius: 26px; background: #ffffff07; box-shadow: none; }
.form-head { font-size: 10px; font-weight: 500; letter-spacing: .08em; }
.contact-form label > span { color: #e0d8ca; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.contact-form input, .contact-form select, .contact-form textarea {
  background: #ffffff06; border: 1px solid #9b907e; border-radius: 10px;
  padding: 13px; font-size: 16px; line-height: 1.4; color: #faf7ef;
}
.contact-form :is(input,select,textarea):focus-visible { outline: 2px solid #ead9bb; outline-offset: 3px; }
.contact-form .consent input { padding: 0; margin-top: 2px; }
.contact-form .consent > span { color: #dcd4c6; font-size: 12px; line-height: 1.6; }
.contact-form button[type="submit"] { min-height: 54px; padding: 14px 21px; background: #e5d5b8; font-size: 12px; font-weight: 550; letter-spacing: 0; text-align: left; gap: 12px; }
.contact-form > small { color: #c1b8a8; font-size: 11px; letter-spacing: 0; line-height: 1.6; }
.selected-package, .form-status { color: #e5d5b8; font-size: 13px; line-height: 1.6; }
.selected-package { margin: 18px 0 0; }
.form-status:empty { margin: 0; }
.copy-request { min-height: 44px; padding: 10px 18px; border: 1px solid #d2bd9859; border-radius: 24px; background: transparent; color: #faf7ef; font-size: 12px; }
.footer { margin-top: 80px; grid-template-columns: 1fr auto; gap: 15px 30px; padding-block: 30px; }
.footer > div { gap: 6px 20px; }
.footer > div a { display: inline-flex; align-items: center; min-height: 44px; }
.footer > div a, .footer p, .footer .wordmark span { color: #c9c0b0; font-size: 10px; letter-spacing: .02em; font-weight: 500; }
.footer p { grid-column: 1 / -1; text-align: left; font-size: 9px; }
.contact :focus-visible, .seo-example :focus-visible { outline-color: #ead9bb; }

/* Bewegung und mobile Bedienung */
.mobile-dock { display: none; }
@keyframes window-float { 50% { translate: 0 -5px; } }
@keyframes note-float { 50% { translate: 0 -7px; } }
.atelier-outside *, .page-idle *, .page-idle *::before, .page-idle *::after { animation-play-state: paused !important; }
html[data-motion="off"] { scroll-behavior: auto; }
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation: none !important; transition: none !important; }
html[data-motion="off"] .reveal-pending { opacity: 1; transform: none; }
@media (max-width: 1100px) {
  .hero-grid { gap: 24px; }
  .price-card { padding-inline: 22px; }
  .featured-label { left: 22px; }
  .pricing-head { gap: 35px; }
  .recommendation { grid-template-columns: .7fr 1.3fr; gap: 14px; }
  .recommendation strong { grid-column: 2; text-align: left; }
  .process-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-grid { gap: 40px; }
}
@media (max-width: 900px) {
  .container { width: min(720px,calc(100% - 40px)); }
  .nav { height: 64px; }
  .nav-links { height: 100vh; height: 100dvh; bottom: auto; padding-top: 90px; overflow-y: auto; background: #f2eee7fc; }
  .nav-links a { display: block; font-size: 30px; font-weight: 550; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; padding-block: 28px; }
  .hero-copy { max-width: 650px; }
  .hero h1 { font-size: clamp(56px,9vw,74px); }
  .hero-lead { max-width: 570px; }
  .hero-object.atelier { width: 100%; max-width: 600px; min-height: 505px; margin-inline: auto; }
  .hero-plans { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hero-plans a, .hero-plans a:first-child { padding: 15px 13px; min-height: 93px; }
  .hero-plans strong i { display: block; margin-top: 3px; }
  .hero-plans small, .hero-plans a.active small, .hero-plans a:hover small { font-size: 8px; letter-spacing: 0; line-height: 1.5; }
  .hero-proof { padding-block: 22px; }
  .hero-proof div { gap: 12px; }
  .pricing-head, .contact-grid, .section-heading { grid-template-columns: 1fr; gap: 24px; }
  .recommendation { grid-template-columns: 1fr; }
  .recommendation strong { grid-column: auto; }
  .pricing-grid { gap: 20px; }
  .price-card { padding: 52px 28px 28px; }
  .featured-label { left: 28px; top: 17px; }
  .price-card > p { min-height: 0; }
  .price-card:hover, .outcome-card:hover { transform: none; }
  .included > p, .included > div { border-color: var(--line); }
  .service { grid-template-columns: .12fr 1fr; }
  .service ul { grid-column: 2; }
  .contact-grid { gap: 35px; }
  .mobile-dock {
    position: fixed; z-index: 90; left: 50%; transform: translateX(-50%);
    bottom: calc(12px + env(safe-area-inset-bottom)); width: min(420px,calc(100% - 28px));
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 12px 12px 18px; border: 1px solid #ded8ca;
    border-radius: 22px; background: #f2eee7f5; backdrop-filter: blur(20px);
    box-shadow: 0 8px 35px #27221924; color: #302b23;
  }
  .mobile-dock small { display: block; margin-bottom: 5px; font-size: 8px; color: #6b5738; letter-spacing: .05em; }
  .mobile-dock strong { font-size: 12px; font-weight: 550; }
  .mobile-dock a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-inline: 17px; border-radius: 25px; background: #282722; color: #fff8eb; font-size: 12px; }
  html { scroll-padding-bottom: 100px; }
}
@media (max-width: 600px) {
  .container { width: calc(100% - 36px); }
  .hero-kicker { min-height: 38px; font-size: 8px; }
  .hero-grid { padding: 24px 0 30px; gap: 20px; }
  .hero h1 { font-size: clamp(44px,12.7vw,68px); }
  .hero-lead { font-size: 16px; margin-top: 20px; }
  .hero-actions { margin-top: 24px; gap: 12px; }
  .hero-object.atelier { min-height: 465px; padding-top: 5px; }
  .atelier-top { padding-inline: 0; }
  .atelier-top > span { font-size: 8px; letter-spacing: .05em; }
  .atelier-tabs { width: 100%; }
  .atelier-tabs button { flex: 1; padding-inline: 9px; }
  .atelier-stage { height: 305px; }
  .preview-window { width: 96%; top: 32px; }
  .preview-page { height: 228px; min-height: 228px; padding: 20px; }
  .preview-title { top: 46px; left: 20px; font-size: 25px; width: 62%; margin: 0; }
  .preview-label { font-size: 7px; }
  .preview-composition { width: 21%; height: 76px; right: 5%; top: 35%; }
  .preview-composition i:nth-child(2) { height: 68px; }
  .preview-composition i:nth-child(3) { height: 53px; }
  [data-scene="seo"] .preview-composition i:nth-child(3) { height: 76px; }
  .preview-caption { font-size: 8px; max-width: 175px; }
  .preview-bottom { right: 20px; left: 20px; bottom: 17px; margin-top: 0; padding-top: 12px; }
  .floating-note { padding: 9px 12px; border-radius: 12px; }
  .floating-note small { font-size: 6px; }
  .floating-note strong { font-size: 10px; }
  .atelier-caption { padding: 8px 5px 0; }
  .atelier-caption h2 { font-size: 21px; }
  .atelier-footnote { margin-top: 12px; }
  .hero-plans { gap: 3px; padding: 4px; border-radius: 17px; }
  .hero-plans a, .hero-plans a:first-child { padding-inline: 9px; }
  .hero-plans small, .hero-plans a.active small, .hero-plans a:hover small { font-size: 7px; }
  .hero-plans strong { font-size: 23px; }
  .hero-proof p { font-size: 12px; }
  .hero-proof span { font-size: 8px; }
  .pricing, .outcomes, .manifesto, .benefits, .services, .seo-example, .process, .faq { padding-block: 64px; }
  .pricing h2, .outcome-intro h2, .manifesto h2, .section-heading h2, .seo-copy h2, .faq-heading h2, .contact-copy h2 { font-size: clamp(34px,9.6vw,48px); }
  .recommendation { margin-top: 26px; padding: 20px; }
  .price-card { padding: 52px 24px 24px; }
  .featured-label { left: 24px; }
  .price-title h3 { font-size: 32px; }
  .included > p, .included > div { padding: 15px; }
  .contract { padding: 21px; gap: 18px; }
  .outcome-grid { margin-top: 32px; }
  .outcome-card { padding: 24px; min-height: 440px; }
  .outcome-wide { min-height: 370px; }
  .outcome-copy h3 { font-size: 30px; }
  .outcome-copy p { font-size: 13px; }
  .conversion-demo { gap: 8px; }
  .conversion-demo > div { padding: 12px; }
  .conversion-demo strong { font-size: 17px; }
  .care-loop { padding: 24px; }
  .service { grid-template-columns: 1fr; gap: 18px; padding-inline: 8px; }
  .service ul { grid-column: auto; }
  .service:hover { padding-inline: 8px; }
  .keyword-panel { padding: 22px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid article { min-height: 285px; }
  .faq-heading { margin-bottom: 24px; }
  .faq-list { padding-inline: 20px; }
  .faq-item button span { font-size: 15px; }
  .faq-answer p { padding-right: 0; font-size: 13px; }
  .contact { padding-top: 64px; }
  .contact-form { padding: 22px; }
  .form-row { display: block; }
  .footer { grid-template-columns: 1fr; margin-top: 55px; }
  .footer > div { justify-content: flex-start; gap: 5px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal.reveal-pending { opacity: 1; transform: none; }
}
/* Sandbeige – satt, warm und ohne weiße Grundflächen */

:root {
  --paper: #cbb798;
  --ivory: #bfaa8b;
  --surface: #dac7aa;
  --surface-soft: #c8b292;
  --brown: #42392f;
  --muted: #42392f;
  --gold: #493018;
}

body { background: var(--paper); }

.site-header { background: #cbb798ed; }
.site-header.scrolled { background: #cbb798f5; }

.hero {
  background:
    radial-gradient(ellipse at 80% 42%, #ad8c5c38, transparent 55%),
    linear-gradient(180deg, #cbb798 55%, #c2ac8a);
}

.hero-plans { background: #b29b7980; }
.motion-toggle { background: #dac7aade; }
.motion-state { background: #c6ad88; }
.atelier-tabs { background: #baa17e; }

.preview-window { border-color: #cbb28d; }
.preview-chrome { background: #bea580; }

.preview-page {
  background: linear-gradient(120deg, #d5bf9d 35%, #bca17b);
}

[data-scene="care"] .preview-page {
  background: linear-gradient(120deg, #d0bd9e 35%, #b8a484);
}

.preview-composition i {
  border-color: #d5bf9d;
  background: linear-gradient(145deg, #d1b68c, #a68b63);
}

.floating-note {
  background: #dac7aaf5;
  border-color: #cbb28d;
}

.recommendation { background: #bba17d; }
.contract { background: #c0ac8f; }
.outcome-gold { background: #bea17a; }

.manifesto {
  background: linear-gradient(120deg, #bfaa8b, #b49a77);
}

.benefit-grid article:hover,
.process-grid article:hover {
  background: #bca17d;
}

.service:hover { background: #dac7aa80; }
.keyword-panel { background: #cdb796; }

.recommendation span { color: var(--gold); }

.atelier-tabs button,
.atelier-footnote,
.preview-chrome,
.preview-caption,
.floating-note small,
.recommendation p,
.contract p,
.contract small,
.keyword-panel > p {
  color: var(--brown);
}

@media (max-width: 900px) {
  .nav-links { background: #cbb798fc; }

  .mobile-dock {
    background: #cbb798f5;
    border-color: #a98c64;
  }
}