/* Tim Kofler – Landingpage „Kostenloser Webseiten-Entwurf“ (/entwurf/), ergänzt style.css und tk.css */

/* Kopfzeile: nur Logo, Telefon und Knopf, damit nichts vom Formular ablenkt */
.ew-head { display: flex; align-items: center; gap: 18px; }
.ew-head__tel { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: .95rem; }
.ew-head__tel:hover { color: var(--hot-2); }
.ew-head__tel svg { width: 18px; height: 18px; color: var(--hot); }
@media (max-width: 680px) { .ew-head__tel span { display: none; } .ew-head__tel { width: 42px; height: 42px; justify-content: center; border: 1px solid var(--line-2); border-radius: 999px; } }

/* Kopfbereich */
.ew-hero { padding: 120px 0 96px; }
.ew-hero h1 { max-width: 19ch; font-size: clamp(2rem, 6.4vw, 4rem); }
.ew-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 38px 0 0; }
.ew-trust li { font-size: .9rem; color: var(--muted); border: 1px solid var(--line-2); background: rgba(17,17,17,.7); border-radius: 999px; padding: 7px 14px; }
.ew-trust b { color: var(--text); font-weight: 700; }
@media (max-width: 680px) { .ew-hero { padding: 72px 0 60px; } .ew-trust { gap: 8px; margin-top: 28px; } .ew-trust li { font-size: .84rem; padding: 6px 12px; } }

/* Formular in zwei Spalten: links die Fragen, rechts die mitlaufende Skizze */
.ew-form-sec { scroll-margin-top: 70px; }
.ew-intro { max-width: 720px; margin-bottom: 44px; }
.ew-intro h2 { margin: 14px 0 14px; }
.ew-intro p { margin: 0; }
.ew-form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "a p" "b p"; gap: 0 48px; padding: 40px; align-items: start; }
.ew-col--a { grid-area: a; }
.ew-col--b { grid-area: b; display: grid; gap: 18px; }
.ew-col--p { grid-area: p; position: sticky; top: 100px; }
.ew-col--a, .ew-col--b { min-width: 0; }

.ew-step { border: 0; margin: 0 0 34px; padding: 0; display: grid; gap: 18px; min-width: 0; }
.ew-col--b .ew-step:last-of-type { margin-bottom: 4px; }
.ew-step legend { display: flex; align-items: center; gap: 12px; padding: 0; margin-bottom: 18px; font-family: var(--display); font-weight: 500; font-size: 1.15rem; line-height: 1.3; }
.ew-step__n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--hot-grad); color: #0b0b0b; font: 600 .9rem var(--mono); }
.ew-hint { margin: -8px 0 0; font-size: .9rem; color: var(--muted); }

/* Ja/Nein-Schalter */
.ew-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ew-seg label { position: relative; cursor: pointer; }
.ew-seg input, .ew-pill input[type=radio], .ew-pill input[type=checkbox], .ew-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ew-seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); font-weight: 600; font-size: .95rem; transition: border-color .2s, background .2s; }
.ew-seg label:hover span { border-color: #555; }
.ew-seg input:checked + span { border-color: var(--hot); background: var(--hot-dim); color: #fff; }
.ew-seg input:focus-visible + span, .ew-pill input:focus-visible + span, .ew-sw input:focus-visible ~ .ew-sw__dot { outline: 2px solid var(--hot-2); outline-offset: 2px; }
.js [data-ew-url][hidden] { display: none; }

/* Farbfelder */
.ew-farbname { margin-left: 2px; font-weight: 500; color: var(--muted); font-size: .9rem; }
.ew-swatches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ew-sw { position: relative; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .2s, transform .2s; }
.ew-sw:hover { border-color: #555; transform: translateY(-2px); }
.ew-sw__dot { width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); position: relative; }
.ew-sw--bw .ew-sw__dot { background: linear-gradient(135deg, #0f0f0f 50%, #f4f4f0 50%); }
.ew-sw__t { font-size: .74rem; color: var(--muted); line-height: 1.2; text-align: center; }
.ew-sw:has(input:checked) { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--surface)); }
.ew-sw--bw:has(input:checked) { border-color: #f4f4f0; }
.ew-sw input:checked ~ .ew-sw__dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 15px; margin: -10px 0 0 -5px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); filter: drop-shadow(0 0 2px rgba(0,0,0,.6)); }
.ew-sw input:checked ~ .ew-sw__t { color: var(--text); }
.ew-swatches--more { grid-template-columns: auto 1fr; margin-top: 2px; }

/* Auswahl-Pillen (Stil, Inhalte, eigene Farbe) */
.ew-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ew-pill { position: relative; cursor: pointer; }
.ew-pill > span { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 15px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: .93rem; font-weight: 600; color: #d8d8d4; transition: border-color .2s, background .2s, color .2s; }
.ew-pill:hover > span { border-color: #555; color: var(--text); }
.ew-pill input:checked + span { border-color: var(--hot); background: var(--hot-dim); color: #fff; }
.ew-chips .ew-pill input[type=checkbox]:checked + span::before { content: ""; width: 6px; height: 11px; margin: -3px 2px 0 0; border: solid var(--hot-2); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ew-swatches--more .ew-pill > span { width: 100%; justify-content: center; border-radius: 14px; min-height: 48px; }
.ew-pill--color input[type=color] { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.ew-pill--color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.ew-pill--color input[type=color]::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }
.ew-pill--color input[type=color]::-moz-color-swatch { border: 1px solid rgba(255,255,255,.3); border-radius: 50%; }

/* Freiwillige Newsletter-Zustimmung, sichtbar getrennt von der Anfrage */
.ew-optin { border: 1px dashed var(--line-2); border-radius: 14px; padding: 16px 16px 14px; background: rgba(255,255,255,.015); }
.ew-optin b { color: var(--text); }
.ew-optin p { margin: 8px 0 0 34px; font-size: .84rem; color: #8f8f8f; }
.form__check input { accent-color: var(--hot); }
.ew-submit { margin-top: 4px; min-height: 56px; padding: 0 30px; font-size: 1.02rem; }

/* ---------- Live-Skizze ---------- */
.ew-prev-wrap { display: grid; gap: 12px; }
.ew-prev__top { display: flex; align-items: center; justify-content: space-between; }
.ew-prev__label { font: 500 .78rem var(--mono); color: var(--muted); letter-spacing: .03em; display: inline-flex; align-items: center; gap: 8px; }
.ew-prev__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hot); box-shadow: 0 0 10px rgba(255,90,31,.8); animation: tk-blink 1.6s ease-in-out infinite; }
.ew-prev__dev { display: inline-flex; padding: 3px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); }
.ew-prev__dev button { font: 600 .8rem var(--body); color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.ew-prev__dev button.is-on { background: #2a2a2a; color: var(--text); }

.ew-prev { --c: #ff5a1f; --on: #0b0b0b; --pf: var(--body); --ph: var(--display); --ink-p: #1a1a1a; --bg-p: #fbfaf7;
  margin: 0 auto; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid #2c2c2c; background: var(--bg-p);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 70px color-mix(in srgb, var(--c) 22%, transparent); transition: max-width .45s cubic-bezier(.2,.7,.2,1), box-shadow .4s; max-width: 560px; }
.ew-prev.is-handy { max-width: 290px; border-radius: 30px; border-width: 8px; border-color: #1d1d1d; }
.ew-prev__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #181818; border-bottom: 1px solid #2a2a2a; }
.ew-prev__bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; flex: none; }
.ew-prev__bar span { margin-left: 8px; min-width: 0; font: 500 11.5px var(--mono); color: #9a9a9a; background: #101010; border: 1px solid #2a2a2a; border-radius: 6px; padding: 2px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-prev.is-handy .ew-prev__bar { justify-content: center; }
.ew-prev.is-handy .ew-prev__bar i { display: none; }
.ew-prev.is-handy .ew-prev__bar span { margin: 0; }

.ew-prev__site { color: var(--ink-p); font-family: var(--pf); }
.ew-prev__nav { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,.07); background: var(--bg-p); }
.ew-prev__logo { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--c); color: var(--on); font: 700 .85rem var(--ph); }
.ew-prev__name { font: 700 .9rem/1.2 var(--ph); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ew-prev__links { margin-left: auto; display: flex; gap: 12px; flex: none; }
.ew-prev__links i { font-style: normal; font-size: .72rem; color: #555; white-space: nowrap; }
.ew-prev__burger { display: none; margin-left: auto; width: 18px; height: 12px; flex: none; border-top: 2px solid #333; border-bottom: 2px solid #333; position: relative; }
.ew-prev__burger::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px solid #333; }
.ew-prev.is-handy .ew-prev__links { display: none; }
.ew-prev.is-handy .ew-prev__burger { display: block; }

.ew-prev__hero { position: relative; padding: 34px 22px 32px; background:
  radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 34%, transparent), transparent 60%),
  linear-gradient(160deg, color-mix(in srgb, var(--c) 92%, #000) 0%, color-mix(in srgb, var(--c) 70%, #000) 100%); color: var(--on); transition: background .4s; }
.ew-prev__hero small { display: block; font: 600 .66rem var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .82; margin-bottom: 10px; }
.ew-prev__hero strong { display: block; font: 700 1.55rem/1.1 var(--ph); letter-spacing: -.01em; overflow-wrap: anywhere; }
.ew-prev__hero p { margin: 10px 0 18px; font-size: .78rem; line-height: 1.5; opacity: .85; max-width: 32ch; }
.ew-prev__cta { display: inline-block; font: 700 .74rem var(--body); padding: 8px 14px; border-radius: 999px; background: var(--on); color: var(--c); }
.ew-prev.is-handy .ew-prev__hero { padding: 28px 16px 26px; }
.ew-prev.is-handy .ew-prev__hero strong { font-size: 1.3rem; }

.ew-prev__blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 18px; }
.ew-prev.is-handy .ew-prev__blocks { grid-template-columns: 1fr 1fr; }
.ew-prev__blocks span { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid rgba(0,0,0,.08); font-size: .68rem; font-weight: 700; color: #222; min-width: 0; overflow-wrap: anywhere; animation: ew-pop .35s cubic-bezier(.2,.8,.3,1.3) both; }
.ew-prev__blocks span::before { content: ""; width: 18px; height: 4px; border-radius: 2px; background: var(--c); }
.ew-prev__blocks span::after { content: ""; height: 14px; border-radius: 4px; background: repeating-linear-gradient(#e7e5df 0 3px, transparent 3px 6px); }
@keyframes ew-pop { from { transform: scale(.85); opacity: 0; } }
.ew-prev__note { margin: 4px 0 0; font-size: .82rem; color: #8f8f8f; text-align: center; }

/* Stilrichtungen der Skizze */
.ew-prev[data-stil="warm"] { --pf: Georgia, "Times New Roman", serif; --ph: Georgia, "Times New Roman", serif; --bg-p: #faf4ea; }
.ew-prev[data-stil="edel"] { --pf: var(--body); --ph: Georgia, "Times New Roman", serif; --bg-p: #f6f5f2; }
.ew-prev[data-stil="edel"] .ew-prev__hero strong { font-weight: 400; letter-spacing: .02em; }
.ew-prev[data-stil="edel"] .ew-prev__hero small { letter-spacing: .3em; }
.ew-prev[data-stil="natur"] { --bg-p: #f3f5ef; }
.ew-prev[data-stil="natur"] .ew-prev__hero { border-radius: 0 0 40% 0 / 0 0 22px 0; }
.ew-prev[data-stil="natur"] .ew-prev__blocks span, .ew-prev[data-stil="natur"] .ew-prev__logo { border-radius: 16px; }
.ew-prev[data-stil="frech"] .ew-prev__hero strong { font-size: 1.8rem; transform: rotate(-2deg); transform-origin: left; }
.ew-prev[data-stil="frech"] .ew-prev__cta { transform: rotate(-3deg); box-shadow: 3px 3px 0 rgba(0,0,0,.25); }
.ew-prev[data-stil="frech"] .ew-prev__logo { border-radius: 50%; }
.ew-prev.is-handy[data-stil="frech"] .ew-prev__hero strong { font-size: 1.45rem; }

/* Ablauf, Beispiele, Abschluss */
.ew-steps { list-style: none; padding: 0; margin: 0; }
.ew-steps h3 { font-family: var(--display); font-size: 1.15rem; margin: 0 0 10px; }
.ew-get { margin-top: 28px; border: 1px solid var(--line); border-radius: 20px; padding: 30px 34px; background: linear-gradient(120deg, var(--hot-dim), transparent 55%), var(--bg-2); }
.ew-get h3 { font-family: var(--display); font-size: 1.2rem; margin: 0; }
.ew-get .ticks { margin-top: 18px; grid-template-columns: 1fr 1fr; column-gap: 32px; }

.ew-ex { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ew-ex a { display: block; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); transition: transform .3s, border-color .3s; }
.ew-ex a:hover { transform: translateY(-4px); border-color: rgba(255,90,31,.55); color: var(--text); }
.ew-ex img { width: 100%; aspect-ratio: 9 / 15; height: auto; object-fit: cover; object-position: top; }
.ew-ex span { position: absolute; left: 10px; bottom: 10px; font-weight: 700; font-size: .85rem; padding: 6px 12px; border-radius: 999px; background: rgba(11,11,11,.85); border: 1px solid var(--line-2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.ew-end { text-align: center; padding: 100px 0; }
.ew-end h2 { max-width: 22ch; margin: 0 auto 30px; }
.ew-end .btn-row { justify-content: center; }
.ew-foot { margin-top: 0; color: var(--muted); }
.ew-foot a { color: var(--muted); }
.ew-foot a:hover { color: var(--text); }

@media (max-width: 1000px) {
  .ew-form { grid-template-columns: 1fr; grid-template-areas: "a" "p" "b"; padding: 32px; }
  .ew-col--p { position: relative; top: 0; margin: 0 0 38px; }
  .ew-ex { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ew-form { padding: 22px 16px 26px; }
  .ew-step legend { font-size: 1.05rem; }
  .ew-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .ew-sw { padding: 8px 2px 7px; border-radius: 12px; }
  .ew-sw__dot { width: 28px; height: 28px; }
  .ew-sw__t { font-size: .66rem; }
  .ew-swatches--more { grid-template-columns: 1fr; }
  .ew-seg span { font-size: .86rem; padding: 8px 8px; }
  .ew-hero .btn-row .btn { width: 100%; justify-content: center; }
  .ew-submit { font-size: .95rem; padding: 0 18px; }
  .ew-pill > span { font-size: .88rem; min-height: 40px; padding: 7px 13px; }
  .ew-optin p { margin-left: 0; }
  .ew-get { padding: 24px 20px; }
  .ew-get .ticks { grid-template-columns: 1fr; }
  .ew-ex { gap: 12px; }
  .ew-end { padding: 72px 0 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .ew-prev, .ew-sw, .ew-ex a { transition: none; }
  .ew-prev__blocks span, .ew-prev__label::before { animation: none; }
}

/* Danke-Seite */
.ew-nl-hint { margin: 24px 0 8px; border-color: rgba(255,90,31,.45); background: var(--hot-dim); }
.ew-nl-hint p { margin: 0; font-size: .95rem; color: #e9e9e5; }
.form-steps.ew-next { margin: 36px 0 0; padding: 0; }
.ew-next li::before { background: var(--hot-grad); color: #0b0b0b; }