/* ki.tips Guides: warmes Creme, Nachtblau aus den Reels, Kacheln mit Linien-Icons,
   runde Knoepfe mit weichem Schein. Schrift bleibt Inter. */
:root {
  --night: #17123f; --night-2: #231b58; --cream: #f6f2e9; --sand: #efe9db; --edge: #e6dccb;
  --ink: #1c1738; --muted: #5d586c; --violet: #4a35a8; --violet-soft: #ebe7fa;
  --green: #64d0bb; --green-deep: #0d7a45; --green-soft: #e3f7eb;
  --coral: #e8553a; --coral-soft: #fbe3dc; --on-night: #d9d5f0;
  --shadow: 0 16px 40px -22px rgba(28,23,56,.45);
}
* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.6 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
b { font-weight: 600; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 660px; margin: 0 auto; padding: 0 20px 64px; }

/* Baender ueber die volle Breite */
.band { margin-inline: calc(50% - 50vw); padding: 12px max(20px, calc(50vw - 310px)) 48px; }
.band > h2:first-child { margin-top: 40px; }
.sand { margin-top: 52px; background: var(--sand); }
.night { margin-top: 52px; background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%); color: #fff; }

/* Hero: Funki einzeln, Ueberschrift als Wort-Kaestchen wie die Reel-Untertitel */
.hero { position: relative; overflow: hidden; margin-inline: calc(50% - 50vw); padding: 16px max(20px, calc(50vw - 310px)) 44px; color: #fff;
  background: radial-gradient(90% 60% at 88% 12%, #4a33a8 0%, rgba(74,51,168,0) 70%), var(--night); }
header.top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 17px; text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.topic { color: #d9d5f0; }
.funki { display: block; width: 210px; height: 210px; margin: 6px -18px -6px auto; object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); }
h1 { position: relative; margin: 0 0 20px; font-size: 40px; line-height: 1.1; font-weight: 900; letter-spacing: -.025em; }
h1 .w { display: inline-block; margin: 0 .04em .14em 0; padding: .05em .24em .08em; border-radius: .2em; background: #fff6ec; color: var(--ink); }
h1 .w.on { background: #f2603a; color: #fff; }
.lead { position: relative; margin: 0; font-size: 18px; color: #e6e2fb; }

h2 { margin: 52px 0 10px; font-size: 28px; line-height: 1.18; font-weight: 800; letter-spacing: -.02em; }
.intro { margin: 0 0 22px; color: var(--muted); }
.night .intro, .night p { color: var(--on-night); }

/* Knoepfe */
.cta { display: block; width: fit-content; max-width: 100%; margin: 24px auto 10px; padding: 16px 30px; border-radius: 100px; background: var(--green); color: #062227; text-align: center; text-decoration: none; font-size: 17px; font-weight: 600; box-shadow: 0 12px 34px -8px rgba(100,208,187,.55); transition: transform .2s, box-shadow .2s; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 16px 42px -8px rgba(100,208,187,.75); }
.cta.ghost { background: transparent; color: var(--ink); box-shadow: none; border: 1.5px solid var(--ink); }
.cta.ghost:hover { transform: none; background: #fff; box-shadow: none; }
.step .cta { margin: 14px 0 6px; padding: 12px 22px; font-size: 16px; }
.step .ad { text-align: left; }
.ad { margin: 0; text-align: center; font-size: 13px; color: var(--muted); }

/* Kacheln */
.ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--violet-soft); color: var(--violet); }
.ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tiles { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.tile, .feat { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--edge); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.tile > div { min-width: 0; }
.tile { align-items: center; }
.feat { margin: 12px 0; }
.feat h3 { margin: 1px 0 3px; font-size: 18px; line-height: 1.3; font-weight: 600; }
.feat p { margin: 0; color: var(--muted); }

video { display: block; width: 100%; max-width: 270px; margin: 36px auto; border-radius: 24px; background: var(--night); box-shadow: 0 24px 50px -22px rgba(23,18,63,.7); }

.warn { display: flex; gap: 14px; margin: 26px 0; padding: 20px; border-radius: 18px; background: var(--coral-soft); }
.warn .ico { background: #fff; color: var(--coral); }
.warn b, .tip b { display: block; margin-bottom: 3px; font-size: 18px; }
.warn p { margin: 0; }

/* Community-CTA */
.pitch { margin: 26px 0; padding: 26px 22px 18px; border-radius: 22px; background: #e7f7f2; text-align: center; }
.pitch .ico { margin: 0 auto 14px; background: #fff; color: #1f8f7a; }
.pitch b { display: block; margin-bottom: 8px; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; }
.pitch p { margin: 0; }
.pitch .cta { margin: 20px auto 12px; }
.pitch .ad { font-size: 12px; }

/* Schritte */
.step { position: relative; display: flex; gap: 16px; padding-bottom: 26px; }
.step::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--edge); }
.step:has(+ :not(.step))::before { display: none; }
.num { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--night); color: #fff; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.step h3 { margin: 8px 0 5px; font-size: 18px; line-height: 1.3; font-weight: 600; }
.step p { margin: 0; color: var(--muted); }
.step b, .path { font-weight: 600; color: var(--ink); }

/* Auftraege */
.kz { margin: 12px 0; padding: 16px 18px 18px; border: 1px solid var(--edge); border-radius: 18px; background: #fff; box-shadow: var(--shadow); color: var(--ink); }
.kz .hd { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.kz .what { flex: 1; min-width: 0; font-weight: 600; line-height: 1.3; }
.kz pre { margin: 0; white-space: pre-wrap; font: 16px/1.55 Inter, system-ui, sans-serif; color: var(--muted); }
button.copy { flex: none; border: 1.5px solid var(--ink); border-radius: 100px; padding: 6px 14px; background: transparent; color: var(--ink); font: 600 14px Inter, sans-serif; cursor: pointer; }
button.copy:hover { background: var(--ink); color: #fff; }
button.copy.ok { background: var(--green); border-color: var(--green); color: #07301c; }

/* Nachbauen auf Nacht */
.night .num { background: var(--green); color: #07301c; box-shadow: none; }
.night .step::before { background: rgba(255,255,255,.2); }
.night .step p { color: var(--on-night); }
.night .step b, .night .path { color: #fff; }
.tip { margin: 22px 0 0; padding: 20px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.07); color: var(--on-night); }
.tip b { color: #fff; }

details { margin: 10px 0; padding: 16px 18px; border: 1px solid var(--edge); border-radius: 16px; background: #fff; }
summary { display: flex; justify-content: space-between; gap: 14px; font-weight: 600; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1.1; color: var(--green-deep); }
details[open] summary::after { content: "–"; }
details p { margin: 10px 0 0; color: var(--muted); }

.done { margin: 56px 0 0; font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.03em; text-align: center; }
.more { text-align: center; }
footer { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--edge); font-size: 13px; color: var(--muted); }

@media (min-width: 620px) {
  h1 { font-size: 50px; }
  .funki { width: 250px; height: 250px; margin-top: -20px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .cta { transition: none; } }