/* aicist.de/guide — Lead-Magnet „Automatisierungs-Guide".
   Baut auf measured.css + full.css der Website auf (Inter, --paper, --ink,
   --gutter, .pill-button, Header, Menü, Footer). Hier nur, was die Seite
   zusätzlich braucht. Alles unter .guide-page, damit nichts auf andere
   Seiten durchschlägt. Mobile first: Basis = Smartphone, ab 810px Desktop
   (gleiche Grenze wie die Website). */

.guide-page main{padding:24px 20px 0}
.guide-page .pill-button{margin:0}

/* ── Hero: Überschrift + Formular im ersten Blick ─────────
   Handy: Überschrift → Formular → Erklärsatz → Cover/Vorteile, damit Eingabefeld
   und Button ohne Scrollen sichtbar sind. Desktop: Text links, Formular rechts
   (mitlaufend). Reihenfolge im HTML bleibt Überschrift, Satz, Formular. */
.guide-hero{display:grid;gap:20px;grid-template-areas:"copy" "form" "sub" "aside"}
.hero-copy{grid-area:copy}
.hero-sub{grid-area:sub}
.hero-form{grid-area:form}
.hero-aside{grid-area:aside;margin-top:12px}
.guide-hero .kicker{display:block;margin-bottom:12px}
.guide-hero h1{font-size:clamp(34px,9.2vw,96px);font-weight:600;line-height:1.03;letter-spacing:-.07em;margin:0;overflow-wrap:break-word;hyphens:manual}
.guide-sub{font-size:17px;line-height:1.45;letter-spacing:-.035em;color:#444;margin:0;max-width:34em}

/* ── Cover-Vorschau (Platzhalter bis das finale Cover da ist) ── */
.guide-cover{margin:0 auto;width:min(70vw,320px);position:relative}
.guide-cover img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 1px 2px #0000000f,0 24px 60px -20px #00000040}
.guide-cover::before{content:"";position:absolute;inset:14px -14px -14px 14px;background:#fff;border:1px solid #e2e2e2;border-radius:4px;z-index:-1}
.cover-sheet{aspect-ratio:1/1.414;background:#fff;border:1px solid #e2e2e2;border-radius:4px;padding:9% 9% 8%;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 1px 2px #0000000f,0 24px 60px -20px #00000040;overflow:hidden;position:relative}
.cover-sheet .cover-brand{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:-.04em}
.cover-sheet .cover-brand img{width:15px;height:15px;filter:brightness(0);box-shadow:none}
.cover-sheet svg.cover-lines{position:absolute;inset:18% 0 auto;width:100%;height:42%;color:#111;opacity:.9}
.cover-sheet .cover-title{position:relative;font-size:clamp(20px,5.6vw,27px);font-weight:600;line-height:1.05;letter-spacing:-.065em;margin:0}
.cover-sheet .cover-meta{position:relative;display:flex;justify-content:space-between;margin-top:18px;padding-top:12px;border-top:1px solid #111;font-size:10px;letter-spacing:-.01em;color:#555}

/* ── Benefits ─────────────────────────────────────────── */
.guide-benefits{list-style:none;margin:88px 0 0;padding:0;display:grid;border-top:1px solid #ccc}
.guide-benefits li{display:grid;grid-template-columns:44px 1fr;gap:0 12px;padding:26px 0;border-bottom:1px solid #ddd}
.guide-benefits .num{font-size:13px;color:#777;padding-top:5px;font-variant-numeric:tabular-nums}
.guide-benefits h2{font-size:23px;line-height:1.15;letter-spacing:-.05em;font-weight:600;margin:0 0 8px}
.guide-benefits p{grid-column:2;margin:0;font-size:16px;line-height:1.5;color:#555;letter-spacing:-.025em}

/* ── Formular ─────────────────────────────────────────── */
.guide-form-card{background:#fff;border-radius:20px;padding:22px 20px 22px;max-width:620px;scroll-margin-top:80px}
.guide-form-card h2{font-size:24px;line-height:1.1;letter-spacing:-.05em;font-weight:600;margin:0}
.guide-form label.field{display:block;font-size:13px;margin:18px 0 0}
.guide-form label.field .optional{color:#888}
.guide-form input[type=text],.guide-form input[type=email],.guide-form input[type=tel]{width:100%;border:0;border-bottom:1px solid #bbb;background:transparent;padding:12px 0;font:500 18px Inter,Arial,sans-serif;letter-spacing:-.04em;color:#111;border-radius:0;-webkit-appearance:none;appearance:none}
.guide-form input:focus-visible{outline:2px solid #555;outline-offset:4px}
.guide-form input[aria-invalid=true]{border-bottom-color:#b3261e}
.field-error{display:block;font-size:13px;color:#b3261e;margin-top:8px;letter-spacing:-.02em}
.field-error:empty{display:none}
.guide-form .form-honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;margin:22px 0 0;font-size:14px;line-height:1.45;letter-spacing:-.025em;color:#333;cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid #111;border-radius:4px;background:#fff;display:grid;place-content:center;cursor:pointer}
.consent input::after{content:"";width:10px;height:6px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.consent input:checked{background:#111}
.consent input:checked::after{opacity:1}
.consent input:focus-visible{outline:2px solid #555;outline-offset:3px}
.consent small{display:block;color:#777;font-size:12px;margin-top:3px}

.guide-form button[type=submit]{width:100%;margin-top:22px;border:0;cursor:pointer;font-family:inherit;min-height:54px}
.guide-form button[type=submit]:disabled{cursor:progress;background:#555;transform:none}
.guide-form .form-note{margin:12px 0 0;font-size:13px;color:#444;letter-spacing:-.02em;text-align:center}
.guide-form .form-status{margin:16px 0 0;font-size:14px;line-height:1.45;color:#b3261e;letter-spacing:-.02em}
.guide-form .form-status.is-info{color:#555}
.guide-form .privacy{margin:18px 0 0;font-size:12px;line-height:1.5;color:#777;letter-spacing:-.015em}
.guide-form .privacy a,.consent a{text-decoration:underline;text-underline-offset:3px}

/* ── Prozessanalyse-Seite (/prozessanalyse) ───────────── */
.guide-form textarea{width:100%;border:0;border-bottom:1px solid #bbb;background:transparent;padding:12px 0;font:500 17px/1.45 Inter,Arial,sans-serif;letter-spacing:-.04em;color:#111;border-radius:0;resize:vertical;min-height:84px}
.guide-form textarea:focus-visible{outline:2px solid #555;outline-offset:4px}
.analyse-hero h1{max-width:12em}
.analyse-benefits{margin:32px 0 0}
.analyse-success h2{font-size:clamp(30px,8vw,44px);line-height:1.02;letter-spacing:-.065em;font-weight:600;margin:0 0 16px}
.analyse-success p{margin:0;font-size:17px;line-height:1.5;color:#444;letter-spacing:-.03em}
.analyse-success:focus{outline:none}

/* ── Danke-Seite ──────────────────────────────────────── */
.guide-thanks h1{font-size:clamp(44px,11vw,128px);font-weight:600;line-height:1.02;letter-spacing:-.07em;margin:0}
.guide-thanks .guide-sub{max-width:28em;margin-top:18px}
.guide-thanks .delayed{margin-top:18px;font-size:16px;color:#555;max-width:34em;line-height:1.5}
.guide-next{margin:96px 0 0;padding:44px 0 0;border-top:1px solid #ccc;display:grid;gap:22px}
.guide-next h2{font-size:clamp(30px,7vw,64px);line-height:1.05;letter-spacing:-.065em;font-weight:600;margin:0;max-width:15em}
.guide-next p{margin:0;font-size:17px;line-height:1.5;color:#444;letter-spacing:-.03em;max-width:36em}
.guide-next .pill-button{justify-self:start}

.guide-page footer{margin-top:96px}

/* ── Desktop ──────────────────────────────────────────── */
@media(min-width:810px){
  .guide-page main{padding:64px var(--gutter) 0}
  .guide-hero{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"copy form" "sub form" "aside form";grid-template-rows:auto auto 1fr;gap:0 64px;align-items:start}
  .hero-form{position:sticky;top:84px}
  .hero-aside{margin-top:56px}
  .guide-sub{font-size:21px;margin-top:22px}
  .guide-cover{width:min(100%,300px);margin:0}
  .cover-sheet .cover-title{font-size:clamp(20px,1.8vw,26px)}
  .guide-benefits{grid-template-columns:repeat(3,1fr);gap:0 36px;border-top:0;margin-top:120px}
  .guide-benefits li{border-top:1px solid #ccc;border-bottom:0;padding-top:24px;grid-template-columns:1fr}
  .guide-benefits .num{padding:0 0 26px}
  .guide-benefits p{grid-column:1}
  .analyse-benefits{grid-template-columns:repeat(2,1fr);margin:56px 0 0}
  .guide-form-card{padding:34px 36px 30px}
  .guide-form-card h2{font-size:30px}
  .guide-thanks{max-width:1100px}
  .guide-next{grid-template-columns:1fr 1fr;align-items:end;gap:28px 64px;margin-top:140px}
  .guide-next .pill-button{grid-column:2;justify-self:start}
}

@media(prefers-reduced-motion:reduce){.guide-page .pill-button,.guide-page .pill-button span{transition:none}}