/* ============================================================
   Pocket Creator Hilfe — Layout (baut auf /css/site.css auf)
   ============================================================ */
.docs-nav .nav__in { gap: 12px; }
.docs-nav .brand small { font: 500 14px var(--font-body); color: var(--ink-3); margin-left: 2px; letter-spacing: 0; }
.docs-search { position: relative; flex: 1; max-width: 420px; }
.docs-search input {
  width: 100%; height: 42px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.75); padding: 0 44px 0 40px; font: 400 15px var(--font-body); color: var(--ink);
}
.docs-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(217,138,43,.15); background: #fff; }
.docs-search::before { content: ""; position: absolute; left: 15px; top: 13px; width: 11px; height: 11px; border: 2px solid var(--ink-3); border-radius: 50%; }
.docs-search::after { content: ""; position: absolute; left: 27px; top: 26px; width: 6px; height: 2px; background: var(--ink-3); transform: rotate(45deg); border-radius: 2px; }
.docs-search kbd { position: absolute; right: 12px; top: 10px; font: 500 12px var(--font-body); color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: 6px; padding: 2px 7px; background: var(--surface); }
.docs-results {
  position: absolute; left: 0; right: 0; top: 50px; z-index: 120; max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-l); padding: 6px; display: none;
}
.docs-results.open { display: block; }
.docs-results a { display: block; padding: 10px 12px; border-radius: var(--r-sm); }
.docs-results a b { display: block; font: 500 15px var(--font-display); color: var(--ink); }
.docs-results a span { display: block; font-size: 13.5px; color: var(--ink-2); }
.docs-results a small { display: block; font-size: 12px; color: var(--primary-deep); margin-bottom: 2px; }
.docs-results a:hover, .docs-results a.sel { background: var(--surface-2); }
.docs-results mark { background: var(--primary-soft); color: inherit; border-radius: 3px; padding: 0 2px; }
.docs-results .empty { padding: 14px; color: var(--ink-2); font-size: 14px; }
.lang-switch { font: 500 14px var(--font-body); color: var(--ink-2); padding: 9px 12px; border-radius: var(--r-pill); white-space: nowrap; }
.lang-switch:hover { background: rgba(255,255,255,.7); color: var(--ink); }

/* ---------- Gerüst ---------- */
.docs { max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; padding: 120px var(--gut) 80px; display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; gap: 48px; }
.docs--wide { grid-template-columns: 250px minmax(0, 1fr); }
.side { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; padding-bottom: 20px; }
.side h4 { font: 600 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin: 20px 0 6px 10px; }
.side h4:first-child { margin-top: 0; }
.side a { display: block; padding: 7px 10px; border-radius: var(--r-xs); font-size: 14.5px; color: var(--ink-2); line-height: 1.35; }
.side a:hover { background: var(--surface-2); color: var(--ink); }
.side a.is-current { background: var(--primary-soft); color: var(--primary-deep); font-weight: 500; }
.side .side__home { font-weight: 500; color: var(--ink); }
.toc { position: sticky; top: 100px; align-self: start; font-size: 13.5px; }
.toc h5 { font: 600 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--line); color: var(--ink-2); }
.toc a:hover, .toc a.is-on { color: var(--primary-deep); border-left-color: var(--primary); }

/* ---------- Artikel ---------- */
.art { min-width: 0; }
.crumbs { font-size: 13.5px; color: var(--ink-3); margin-bottom: 14px; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--primary-deep); }
.art h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.art .lead { margin-top: 14px; max-width: 62ch; }
.meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.meta span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); }
.meta span b { color: var(--ink); font-weight: 600; }
.art h2 { font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; margin: 56px 0 14px; scroll-margin-top: 100px; }
.art h3 { font-size: 19px; margin: 30px 0 10px; scroll-margin-top: 100px; }
.art p, .art li { font-size: 16px; line-height: 1.65; color: #3E372F; }
.art p { margin: 0 0 14px; max-width: 70ch; }
.art ul, .art ol { margin: 0 0 16px; padding-left: 22px; max-width: 68ch; }
.art li { margin: 5px 0; }
.art a:not(.btn-primary):not(.btn-secondary):not(.rel a) { color: var(--primary-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.art strong { font-weight: 600; color: var(--ink); }
.ui { font: 600 .92em var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; padding: 1px 7px; white-space: nowrap; }

/* Demo-Block: Telefon + Schritte */
.walk { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; margin: 34px 0 10px; padding: 32px; border-radius: var(--r-xl); background: var(--surface-2); }
.walk .demo { position: sticky; top: 100px; }
.steps { list-style: none; padding: 0 !important; margin: 0 !important; counter-reset: st; display: flex; flex-direction: column; gap: 8px; max-width: none !important; }
.steps li { counter-increment: st; position: relative; padding: 14px 16px 14px 56px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, box-shadow .2s, opacity .2s; margin: 0 !important; }
.steps li::before { content: counter(st); position: absolute; left: 14px; top: 13px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 500 14px var(--font-display); background: var(--surface-2); color: var(--ink-2); transition: .2s; }
.steps li b { display: block; font: 500 16.5px/1.35 var(--font-display); color: var(--ink); margin-bottom: 3px; }
.steps li > span { display: block; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.steps li .ui { font-size: 13.5px; }
.steps li:hover { border-color: var(--line-strong); }
.steps li.is-active { border-color: var(--primary); box-shadow: 0 10px 24px -14px rgba(217,138,43,.6); }
.steps li.is-active::before { background: var(--grad-button); color: #fff; }
.steps li.is-done::before { content: "✓"; background: var(--success-soft); color: var(--success); }
.art .walk__hint { font-size: 13px; color: var(--ink-3); margin: 12px 0 0; }

/* Hinweis-Kästen */
.note { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-md); margin: 18px 0; background: var(--surface); border: 1px solid var(--line); max-width: 74ch; }
.note::before { content: "i"; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--font-display); background: var(--info-soft); color: var(--info); }
.note p { margin: 0; font-size: 15px; }
.note--tip::before { content: "★"; background: var(--primary-soft); color: var(--primary-deep); font-size: 12px; }
.note--warn::before { content: "!"; background: #FBE3DE; color: #C2452D; }
.note b { color: var(--ink); }

/* Tarif-Tabelle */
.plantable { width: 100%; border-collapse: separate; border-spacing: 0; margin: 14px 0 18px; font-size: 15px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.plantable th, .plantable td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.plantable tr:last-child td { border-bottom: 0; }
.plantable th { font: 500 14px var(--font-display); background: var(--surface-2); color: var(--ink); }
.plantable td:not(:first-child), .plantable th:not(:first-child) { text-align: center; }
.plantable .yes { color: var(--success); font-weight: 600; }
.plantable .no { color: var(--ink-3); }
.tablewrap { overflow-x: auto; }

/* FAQ */
.faq details { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); margin: 8px 0; max-width: 74ch; }
.faq summary { cursor: pointer; padding: 15px 44px 15px 18px; font: 500 16px var(--font-display); list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 18px; top: 12px; font: 400 22px var(--font-display); color: var(--ink-3); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 18px 14px; }
.faq details > div p:last-child { margin-bottom: 0; }

/* Verwandte Seiten + Weiter */
.rel { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.rel a { display: block; padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-decoration: none !important; transition: border-color .2s, transform .2s; }
.rel a:hover { border-color: var(--primary); transform: translateY(-2px); }
.rel a b { display: block; font: 500 16px var(--font-display); color: var(--ink); }
.rel a span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { display: block; padding: 14px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); text-decoration: none !important; max-width: 48%; }
.pager a:hover { border-color: var(--primary); }
.pager small { display: block; font-size: 12.5px; color: var(--ink-3); }
.pager b { font: 500 16px var(--font-display); color: var(--ink); }
.pager .next { margin-left: auto; text-align: right; }
.helpful { margin-top: 40px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--surface-2); display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.helpful p { margin: 0 !important; color: var(--ink-2); }
.updated { font-size: 13px; color: var(--ink-3); margin-top: 18px; }

/* ---------- Startseite ---------- */
.home-hero { padding: 150px var(--gut) 72px; text-align: center; background: var(--grad-hero); overflow: visible; position: relative; z-index: 5; }
.home-hero .docs-results { z-index: 130; }
.home-hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.025em; }
.home-hero p { margin: 14px auto 28px; max-width: 52ch; color: #4E463C; font-size: 18px; }
.home-hero .docs-search { margin: 0 auto; max-width: 560px; }
.home-hero .docs-search input { height: 56px; font-size: 17px; background: rgba(255,253,248,.9); border-color: rgba(255,255,255,.9); box-shadow: 0 16px 36px -18px rgba(90,50,10,.5); padding-left: 46px; }
.home-hero .docs-search::before { left: 18px; top: 19px; }
.home-hero .docs-search::after { left: 30px; top: 32px; }
.home-hero .docs-results { text-align: left; top: 62px; }
.home-pop { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; font-size: 14px; color: #5E554A; }
.home-pop a { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(255,253,248,.7); border: 1px solid rgba(255,255,255,.85); color: var(--ink); }
.cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cat { padding: 26px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); }
.cat__ico { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-deep); margin-bottom: 14px; }
.cat h3 { font-size: 20px; margin-bottom: 6px; }
.cat > p { font-size: 15px; color: var(--ink-2); margin-bottom: 12px; }
.cat ul { list-style: none; }
.cat li a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.cat li a::after { content: "→"; color: var(--ink-3); }
.cat li a:hover { color: var(--primary-deep); }
.cat .soon { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-3); }
.contact-band { margin-top: 48px; padding: 30px 32px; border-radius: var(--r-xl); background: var(--glow-night), var(--ink-dark); color: var(--on-dark); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.contact-band h3 { font-size: 22px; }
.contact-band p { color: var(--on-dark-2); margin-top: 4px; }

.docs-footer { border-top: 1px solid var(--line); padding: 28px var(--gut) 40px; max-width: calc(var(--maxw) + 2 * var(--gut)); margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--ink-3); }
.docs-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.docs-footer a { color: var(--ink-2); }
.docs-footer a:hover { color: var(--primary-deep); }

/* Mobil: Kapitel-Menü */
.side-extra { display: none; }
.demo__cap { display: none; }
.side-toggle { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .docs { grid-template-columns: 230px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 980px) {
  .walk { grid-template-columns: 1fr; padding: 22px; }
  .walk .demo { position: relative; top: 0; }
  .cats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .docs, .docs--wide { grid-template-columns: 1fr; gap: 0; padding-top: 104px; }
  .side { position: fixed; inset: 0; z-index: 140; max-height: none; background: rgba(247,242,233,.98); padding: 90px 24px 40px; transform: translateX(-100%); transition: transform .3s ease; }
  .side.open { transform: none; }
  .side-toggle { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); font: 500 14px var(--font-body); color: var(--ink); cursor: pointer; }
  .side-close { position: absolute; top: 24px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); font-size: 22px; cursor: pointer; }
  .docs-nav .docs-search, .docs-nav .lang-switch { display: none; }
  .side-extra { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
  .side-extra .docs-search { display: block; max-width: none; }
  .side-extra .lang-switch { display: inline-block; padding: 8px 0; }
  .demo__cap { display: block; margin-top: 10px; text-align: center; font: 500 15px/1.35 var(--font-display); color: var(--ink); min-height: 40px; }
  .demo__cap small { display: block; font: 500 12px var(--font-body); color: var(--ink-3); }
  .art h2 { margin-top: 44px; }
}
@media (min-width: 861px) { .side-close { display: none; } }
@media (max-width: 620px) {
  .cats { grid-template-columns: 1fr; }
  .walk { margin-inline: -8px; border-radius: var(--r-lg); padding: 18px 14px; }
  .demo { max-width: 270px; }
  .steps li { padding: 12px 14px 12px 50px; }
  .steps li::before { left: 12px; }
  .pager a { max-width: 100%; }
  .pager { flex-direction: column; }
  .home-hero { padding-top: 120px; }
}