body { margin: 0; background: #F7F8F5; color: #13241F; font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
html, body, body > div, .sc-host { height: auto !important; min-height: 100%; overflow: visible !important; }
html { scroll-behavior: smooth; }
a { color: #1F3A32; }
a:hover { color: #142822; }
@media (max-width: 767px) {
  footer > div { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 24px 20px !important; }
  footer span { white-space: nowrap; }
  .rs { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; align-items: start !important; }
  header a[href="#top"] span:last-child { white-space: nowrap; }
}
  .ref-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ref-slider { position: relative; min-width: 0; }
  .sl-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 18px; }
  .sl-track::-webkit-scrollbar { display: none; }
  .sl-slide { flex: 0 0 100%; scroll-snap-align: start; }
  .sl-slide img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 18px; }
  .sl-btn { display: none; position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: #13241F; color: #FFFFFF; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 8px 20px -8px rgba(0,0,0,0.5); transition: transform 100ms ease-out; }
  .sl-btn:hover { background: #1F3A32; }
  .sl-prev { left: 12px; } .sl-next { right: 12px; }
  .ref-slider[data-multi] .sl-btn { display: flex; }
  .hero-s { padding: 20px 20px 24px; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hero-row { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .hero-ref-img { width: 52px; height: 52px; }
  .hero-cta { display: block; text-align: center; line-height: 22px; }
  .chat-card { height: 236px; }
  .ref-s { padding: 40px 20px; }
  .ab-s { padding: 40px 20px; }
  .ref2-in { padding: 48px 20px; }
  .cta-s { padding: 40px 20px; }
  .ab-img { height: 300px; }
@media (min-width: 768px) {
  .ref-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
  .hero-s { padding: 72px 32px 80px; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
  .hero-row { align-items: flex-start; margin-top: 36px; }
  .hero-ref-img { width: 72px; height: 72px; }
  .hero-cta { display: inline-block; }
  .chat-card { height: 300px; }
  .ref-s { padding: 72px 32px; }
  .ab-s { padding: 80px 32px; }
  .ref2-in { padding: 88px 32px; }
  .cta-s { padding: 64px 32px; }
  .ab-img { height: 400px; }
}
.sec-in { max-width: 1120px; margin: 0 auto; padding: 56px 20px; }
.sec-h { margin: 0 0 12px; font: 600 clamp(30px, 6vw, 40px)/1.12 'Geist', system-ui, sans-serif; letter-spacing: -0.015em; color: #13241F; max-width: 760px; text-wrap: balance; }
.sec-p { margin: 0 0 36px; font-size: 17px; line-height: 1.6; color: #3E544D; max-width: 660px; text-wrap: pretty; }
/* Chatverlauf */
.cv { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 40px; position: relative; }
.cv-m { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cv-mark { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6A7C75; }
.cv-mark b { font: 600 15px/1 'Geist', system-ui, sans-serif; letter-spacing: 0; color: #1F3A32; font-variant-numeric: tabular-nums; }
.cv-body { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cv-bubble { align-self: flex-end; max-width: 88%; margin: 0; background: #EAF0EC; color: #13241F; padding: 12px 16px; border-radius: 18px 18px 4px 18px; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.cv-reply { display: flex; gap: 10px; align-items: flex-start; }
.cv-av { width: 24px; height: 24px; border-radius: 50%; background: #13241F; color: #F7F8F5; display: grid; place-items: center; flex-shrink: 0; margin-top: 2px; }
.cv-reply p { margin: 0; font-size: 15.5px; line-height: 1.65; color: #3E544D; max-width: 34em; text-wrap: pretty; }
.cv-end { margin: 48px 0 0; font: 600 clamp(24px, 6vw, 34px)/1.28 'Geist', system-ui, sans-serif; letter-spacing: -0.01em; color: #13241F; max-width: 24em; text-wrap: balance; }
.cv-anim .cv-m .cv-mark, .cv-anim .cv-m .cv-bubble, .cv-anim .cv-m .cv-reply { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cv-anim .cv-m .cv-bubble { transform-origin: right bottom; transform: translateY(12px) scale(0.97); transition-delay: 0.15s; }
.cv-anim .cv-m .cv-reply { transition-delay: 0.8s; }
.cv-anim .cv-m.is-in .cv-mark, .cv-anim .cv-m.is-in .cv-bubble, .cv-anim .cv-m.is-in .cv-reply { opacity: 1; transform: none; }
/* Leistung */
.sv { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid #DFE5E0; }
.sv-r { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 28px 0; border-top: 1px solid #DFE5E0; }
.sv-n { font: 500 clamp(44px, 12vw, 56px)/1 'Geist', system-ui, sans-serif; color: #1F3A32; font-variant-numeric: tabular-nums; }
.sv-tw { display: flex; align-items: center; gap: 12px; }
.sv-i svg { display: block; flex-shrink: 0; }
.sv-t { margin: 0; text-wrap: balance; font: 600 19px/1.3 'Geist', sans-serif; color: #13241F; }
.sv-x { margin: 0; font-size: 16px; line-height: 1.65; color: #3E544D; max-width: 34em; text-wrap: pretty; }
/* Ablauf: Zeitleiste (Handy senkrecht, ab 768 px waagrecht) */
.tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tl-s { position: relative; padding: 0 0 32px 40px; min-width: 0; }
.tl-s:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: #1F3A32; border: 2px solid #1F3A32; z-index: 2; transition: background 0.3s ease, border-color 0.3s ease; }
.tl-js .tl-s:not(.is-on) .tl-dot { background: #F7F8F5; border-color: #C5D3CA; }
.tl-s:not(:last-child)::before, .tl-s:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 10px; bottom: -10px; width: 2px; }
.tl-s:not(:last-child)::before { background: #DFE5E0; }
.tl-s:not(:last-child)::after { background: #1F3A32; transform-origin: top; transform: scaleY(var(--f, 1)); }
.tl-when { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6A7C75; line-height: 18px; }
.tl-t { margin: 0 0 8px; font: 600 22px/1.2 'Geist', system-ui, sans-serif; color: #13241F; }
.tl-x { margin: 0; font-size: 15px; line-height: 1.6; color: #3E544D; text-wrap: pretty; }
@media (min-width: 768px) {
  .sec-in { padding: 96px 32px; }
  .sec-p { margin-bottom: 48px; }
  .cv { gap: 56px; }
  .cv::before { content: ""; position: absolute; left: 232px; top: 0; bottom: 0; width: 1px; background: #DFE5E0; }
  .cv-m { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
  .cv-mark { padding-top: 14px; }
  .cv-body { padding-left: 32px; }
  .cv-bubble { max-width: min(520px, 82%); font-size: 17px; }
  .cv-reply p { font-size: 16px; }
  .cv-end { margin-top: 72px; }
  .sv-r { grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start; padding: 40px 0; }
  .sv-n { font-size: 64px; }
  .sv-tw { padding-top: 10px; }
  .sv-t { font-size: 21px; }
  .sv-x { padding-top: 10px; }
  .tl { flex-direction: row; gap: 32px; }
  .tl-s { flex: 1 1 0; padding: 40px 0 0 0; }
  .tl-dot { top: 0; }
  .tl-s:not(:last-child)::before, .tl-s:not(:last-child)::after { left: 8px; right: -40px; top: 7px; bottom: auto; width: auto; height: 2px; }
  .tl-s:not(:last-child)::after { transform-origin: left; transform: scaleX(var(--f, 1)); }
}
/* ChatGPT-Beweis-Karte */
.bw { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; margin-top: 10px; background: #FFFFFF; border: 1px solid #DFE5E0; border-radius: 20px; padding: 18px 14px 16px; box-shadow: 0 24px 48px -28px rgba(20,40,34,0.28); }
.bw-top { margin: 0; padding: 0 2px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #55695F; }
.bw-tabs { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 2px 14px; max-width: calc(100% + 28px); }
.bw-tabs::-webkit-scrollbar { display: none; }
.bw-tabs[hidden] { display: none; }
.bw-t { flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; padding: 0 16px; border: 1px solid #DFE5E0; background: #FFFFFF; color: #3E544D; font: 500 14px/1 'Geist', system-ui, sans-serif; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 100ms ease-out; }
.bw-t:hover { border-color: #1F3A32; color: #13241F; }
.bw-t[aria-selected="true"] { background: #1F3A32; border-color: #1F3A32; color: #FFFFFF; font-weight: 600; }
.bw-p { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bw-p[hidden] { display: none; }
.bw-p + .bw-p { padding-top: 18px; border-top: 1px solid #DFE5E0; }
.bw-js .bw-p + .bw-p { padding-top: 0; border-top: 0; }
.bw-js .bw-p.bw-in { animation: bw-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes bw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bw-q { align-self: flex-end; max-width: 92%; margin: 0; background: #EAF0EC; color: #13241F; padding: 12px 16px; border-radius: 18px 18px 4px 18px; font-size: 16px; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.bw-a { background: #F7F8F5; border: 1px solid #DFE5E0; border-radius: 16px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bw-ah { display: flex; align-items: center; gap: 10px; }
.bw-av { width: 24px; height: 24px; border-radius: 50%; background: #13241F; color: #F7F8F5; display: grid; place-items: center; flex-shrink: 0; }
.bw-an { font-size: 13px; font-weight: 600; color: #13241F; }
.bw-at { margin: 0; font-size: 15.5px; line-height: 1.65; color: #3E544D; text-wrap: pretty; overflow-wrap: anywhere; }
.bw-rk { display: inline-block; margin-right: 4px; font: 600 20px/1 'Geist', system-ui, sans-serif; color: #1F3A32; font-variant-numeric: tabular-nums; vertical-align: -1px; }
.bw-m { background: #DCEBE2; color: #1F3A32; font-weight: 600; border-radius: 4px; padding: 0 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bw-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bw-src { font-size: 13px; color: #55695F; }
.bw-go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #1F3A32; border-radius: 10px; color: #1F3A32; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 100ms ease-out; }
.bw-go span { margin-left: 6px; white-space: pre; }
.bw-go:hover { background: #EAF0EC; color: #1F3A32; }
.bw-note { margin: 0; padding: 12px 2px 0; border-top: 1px solid #DFE5E0; font-size: 12.5px; line-height: 1.5; color: #55695F; }
@media (min-width: 768px) { .bw { padding: 22px 22px 18px; } .bw-tabs { margin: 0 -22px; padding: 2px 22px; scroll-padding: 0 22px; max-width: calc(100% + 44px); } .bw-q { font-size: 17px; max-width: min(520px, 90%); } .bw-at { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .bw-js .bw-p.bw-in { animation: none; } }

/* Vergleich: Übliche Praxis-Website und Website von Apelion */
.vg { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: repeat(8, auto); margin-top: 8px; }
.vg-row { display: contents; }
.vg-card { grid-column: 3; grid-row: 1 / span 8; position: relative; z-index: 0; background: #FFFFFF; border: 1.5px solid #1F3A32; border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(20,40,34,0.35); }
.vg-c { position: relative; z-index: 1; min-width: 0; grid-row: var(--r); }
.vg-c0 { grid-column: 1; }
.vg-c1 { grid-column: 2; }
.vg-c2 { grid-column: 3; }
.vg-row { --r: calc(var(--i) + 2); }
.vg-head { --r: 1; }
.vg-act { --r: 8; }
.vg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vg-head .vg-c0, .vg-head .vg-c1 { border-bottom: 1px solid #DFE5E0; }
.vg-head .vg-c1 { padding: 28px 24px 18px 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vg-head .vg-c2 { padding: 28px 28px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.vg-nm { display: flex; align-items: center; min-height: 28px; font: 600 19px/1.3 'Geist', system-ui, sans-serif; color: #13241F; text-wrap: balance; }
.vg-nm-a { font: 600 24px/1.15 'Geist', system-ui, sans-serif; letter-spacing: -0.01em; color: #1F3A32; }
.vg-chip { display: inline-block; padding: 3px 10px; border: 1px solid #DFE5E0; border-radius: 999px; font-size: 12px; line-height: 1.4; font-weight: 600; color: #6A7C75; background: transparent; }
.vg-chip-a { border-color: #DCEBE2; background: #DCEBE2; color: #1F3A32; }
.vg-body .vg-c0, .vg-body .vg-c1 { border-bottom: 1px solid #DFE5E0; transition: background-color 150ms ease; }
.vg-body .vg-c0 { padding: 21px 8px 18px 0; font-size: 12.5px; line-height: 18px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6A7C75; overflow-wrap: anywhere; }
.vg-body .vg-c1 { display: flex; align-items: flex-start; gap: 12px; padding: 18px 24px 18px 12px; font-size: 16px; line-height: 1.55; color: #6A7C75; }
.vg-body .vg-c2 { display: flex; align-items: flex-start; gap: 12px; margin: 0 12px; padding: 18px 16px; border-radius: 12px; font-size: 16px; line-height: 1.55; font-weight: 500; color: #13241F; transition: background-color 150ms ease; }
.vg-t { min-width: 0; text-wrap: pretty; }
.vg-mk { flex: 0 0 22px; width: 22px; text-align: center; color: #A9B8B0; }
.vg-ck { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1.4px; border-radius: 50%; background: #DCEBE2; display: grid; place-items: center; }
.vg-ck svg { display: block; }
.vg-ck path { fill: none; stroke: #1F3A32; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.vg-tag { display: none; }
.vg-act .vg-c2 { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 8px 28px 28px; }
.vg-btn { text-decoration: none; background: #1F3A32; color: #FFFFFF; font-size: 16px; font-weight: 600; padding: 14px 28px; border-radius: 12px; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.vg-lk { display: inline-flex; align-items: center; min-height: 32px; font-size: 15px; font-weight: 600; color: #1F3A32; text-decoration: underline; text-decoration-color: #A9B8B0; text-underline-offset: 4px; transition: text-decoration-color 0.2s ease; }
.vg-lk:hover { color: #1F3A32; text-decoration-color: #1F3A32; }
@media (min-width: 768px) and (hover: hover) {
  .vg-body:hover > .vg-c0, .vg-body:hover > .vg-c1 { background: rgba(31,58,50,0.04); }
  .vg-body:hover > .vg-c2 { background: #F7F8F5; }
}
@media (max-width: 767px) {
  .vg { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
  .vg-card { display: none; }
  .vg-row { display: grid; gap: 8px; }
  .vg-c { grid-row: auto; grid-column: auto; }
  .vg-head { display: block; padding: 0 2px; }
  .vg-head .vg-c0, .vg-head .vg-c1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .vg-head .vg-c2 { padding: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .vg-nm-a { font-size: 22px; }
  .vg-body { background: #FFFFFF; border: 1px solid #DFE5E0; border-radius: 16px; padding: 16px 16px 18px; }
  .vg-body .vg-c0, .vg-body .vg-c1, .vg-body .vg-c2 { border: 0; margin: 0; padding: 0; background: none; border-radius: 0; }
  .vg-body .vg-c0 { padding-top: 0; }
  .vg-body .vg-c1 { font-size: 14.5px; line-height: 1.45; }
  .vg-body .vg-c1 .vg-mk { display: none; }
  .vg-tag { display: inline; margin-right: 4px; font-weight: 600; }
  .vg-tag::after { content: ":"; }
  .vg-body .vg-c2 { font-size: 16.5px; line-height: 1.45; }
  .vg-ck { margin-top: 0; }
  .vg-act { display: block; }
  .vg-act .vg-c2 { padding: 8px 0 0; align-items: stretch; gap: 8px; }
  .vg-btn { display: block; text-align: center; }
  .vg-lk { align-self: center; min-height: 44px; }
}
/* Bewegung: nur wenn JS die Klasse vg-js gesetzt hat; ohne JS ist alles sofort sichtbar */
.vg-js .vg-card { transform: translateY(12px); opacity: 0; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease; }
.vg-js.is-in .vg-card { transform: none; opacity: 1; }
.vg-js .vg-ck path { stroke-dashoffset: 1; transition: stroke-dashoffset 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 60ms + 150ms); }
.vg-js.is-in .vg-ck path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .vg-js .vg-card { transform: none; opacity: 1; transition: none; }
  .vg-js .vg-ck path { stroke-dashoffset: 0; transition: none; }
}
body { margin: 0; background: #F7F8F5; color: #13241F; font-family: 'Geist', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
a { color: #1F3A32; }
a:hover { color: #142822; }
@media (max-width: 767px) {
  .rs { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; align-items: start !important; }
  header a[href="#top"] span:last-child { white-space: nowrap; }
  [data-flow] { display: none !important; }
}
/* ChatGPT-Beweis-Karte */
.bw { display: flex; flex-direction: column; gap: 14px; width: 100%; min-width: 0; margin-top: 10px; background: #FFFFFF; border: 1px solid #DFE5E0; border-radius: 20px; padding: 18px 14px 16px; box-shadow: 0 24px 48px -28px rgba(20,40,34,0.28); }
.bw-top { margin: 0; padding: 0 2px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #55695F; }
.bw-tabs { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 2px 14px; max-width: calc(100% + 28px); }
.bw-tabs::-webkit-scrollbar { display: none; }
.bw-tabs[hidden] { display: none; }
.bw-t { flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; padding: 0 16px; border: 1px solid #DFE5E0; background: #FFFFFF; color: #3E544D; font: 500 14px/1 'Geist', system-ui, sans-serif; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 100ms ease-out; }
.bw-t:hover { border-color: #1F3A32; color: #13241F; }
.bw-t[aria-selected="true"] { background: #1F3A32; border-color: #1F3A32; color: #FFFFFF; font-weight: 600; }
.bw-p { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bw-p[hidden] { display: none; }
.bw-p + .bw-p { padding-top: 18px; border-top: 1px solid #DFE5E0; }
.bw-js .bw-p + .bw-p { padding-top: 0; border-top: 0; }
.bw-js .bw-p.bw-in { animation: bw-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes bw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bw-q { align-self: flex-end; max-width: 92%; margin: 0; background: #EAF0EC; color: #13241F; padding: 12px 16px; border-radius: 18px 18px 4px 18px; font-size: 16px; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.bw-a { background: #F7F8F5; border: 1px solid #DFE5E0; border-radius: 16px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bw-ah { display: flex; align-items: center; gap: 10px; }
.bw-av { width: 24px; height: 24px; border-radius: 50%; background: #13241F; color: #F7F8F5; display: grid; place-items: center; flex-shrink: 0; }
.bw-an { font-size: 13px; font-weight: 600; color: #13241F; }
.bw-at { margin: 0; font-size: 15.5px; line-height: 1.65; color: #3E544D; text-wrap: pretty; overflow-wrap: anywhere; }
.bw-rk { display: inline-block; margin-right: 4px; font: 600 20px/1 'Geist', system-ui, sans-serif; color: #1F3A32; font-variant-numeric: tabular-nums; vertical-align: -1px; }
.bw-m { background: #DCEBE2; color: #1F3A32; font-weight: 600; border-radius: 4px; padding: 0 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bw-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bw-src { font-size: 13px; color: #55695F; }
.bw-go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid #1F3A32; border-radius: 10px; color: #1F3A32; font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background 0.2s ease, transform 100ms ease-out; }
.bw-go span { margin-left: 6px; white-space: pre; }
.bw-go:hover { background: #EAF0EC; color: #1F3A32; }
.bw-note { margin: 0; padding: 12px 2px 0; border-top: 1px solid #DFE5E0; font-size: 12.5px; line-height: 1.5; color: #55695F; }
@media (min-width: 768px) { .bw { padding: 22px 22px 18px; } .bw-tabs { margin: 0 -22px; padding: 2px 22px; scroll-padding: 0 22px; max-width: calc(100% + 44px); } .bw-q { font-size: 17px; max-width: min(520px, 90%); } .bw-at { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .bw-js .bw-p.bw-in { animation: none; } }

@media (min-width: 768px) { .about-m { display: none !important; } }
@media (max-width: 767px) { .about-d { display: none !important; } }
html { scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; } }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #1F3A32; outline-offset: 3px; }
.lang-sw { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; color: #6A7C75; white-space: nowrap; }
.lang-sw a { color: #6A7C75; text-decoration: none; padding: 8px 2px; }
.lang-sw a:hover { color: #1F3A32; }
.lang-sw [aria-current] { color: #13241F; font-weight: 700; padding: 8px 2px; }
.lang-sw i { font-style: normal; color: #C5D3CA; }
@media (max-width: 767px) {
  header > div:not([data-progress]) { padding: 0 16px !important; gap: 10px !important; height: 56px !important; }
  .ref-h1 { font-size: 40px !important; }
}
/* Menü (Hamburger) auf allen Seiten */
header nav { gap: 14px !important; }
.nav-menu { position: static; }
.nav-menu summary { list-style: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #DFE5E0; border-radius: 12px; background: #FFFFFF; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 100ms ease-out; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary:hover, .nav-menu:not(.nav-js)[open] summary, .nav-menu.is-shown summary { border-color: #1F3A32; }
.nav-burger { position: relative; display: block; width: 20px; height: 14px; background: linear-gradient(#13241F, #13241F) 0 6px / 100% 2px no-repeat; }
.nav-burger::before, .nav-burger::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #13241F; border-radius: 1px; transition: transform 0.2s ease, top 0.2s ease, bottom 0.2s ease; }
.nav-burger::before { top: 0; }
.nav-burger::after { bottom: 0; }
.nav-menu:not(.nav-js)[open] .nav-burger, .nav-menu.is-shown .nav-burger { background-size: 0 0; }
.nav-menu:not(.nav-js)[open] .nav-burger::before, .nav-menu.is-shown .nav-burger::before { top: 6px; transform: rotate(45deg); }
.nav-menu:not(.nav-js)[open] .nav-burger::after, .nav-menu.is-shown .nav-burger::after { bottom: 6px; transform: rotate(-45deg); }
.nav-panel { position: absolute; right: 16px; top: calc(100% + 4px); width: min(280px, calc(100vw - 32px)); background: #FFFFFF; border: 1px solid #DFE5E0; border-radius: 16px; box-shadow: 0 24px 48px -20px rgba(20,40,34,0.35); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
@media (min-width: 768px) { .nav-panel { right: max(32px, calc(50% - 528px)); } }
.nav-panel a { display: block; padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; color: #13241F; text-decoration: none; transition: transform 100ms ease-out; }
.nav-panel a:hover { background: #EEF2EF; color: #13241F; }
.nav-panel a.menu-btn { background: #1F3A32; color: #FFFFFF; text-align: center; margin-top: 6px; }
.nav-panel a.menu-btn:hover { background: #142822; color: #FFFFFF; }
/* Menü mit Herkunft: nur wenn menu.js die Klasse nav-js gesetzt hat; ohne JS bleibt es ein normales details */
.nav-js .nav-panel { transform-origin: top right; opacity: 0; transform: scale(0.96) translateY(-4px); transition: opacity 200ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.nav-js.is-shown .nav-panel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-js .nav-panel, .nav-js.is-shown .nav-panel { transform: none; transition: opacity 200ms linear !important; }
}
/* Desktop (ab 1024 px): normale Navigationsleiste statt Hamburger. Das Menü-Element löst sich auf, die Links stehen in einer Reihe. */
@media (min-width: 1024px) {
  header nav { gap: 28px !important; }
  .nav-menu, .nav-panel { display: contents; }
  .nav-menu::details-content { display: contents; }
  .nav-menu summary { display: none; }
  .nav-panel a { padding: 8px 2px; border-radius: 0; font-size: 15px; font-weight: 500; color: #3E544D; background: none; position: relative; }
  .nav-panel a:not(.menu-btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: #1F3A32; transform: scaleX(0); transform-origin: left; transition: transform 200ms ease-out; }
  .nav-panel a:not(.menu-btn):hover { background: none; color: #13241F; }
  .nav-panel a:not(.menu-btn):hover::after { transform: scaleX(1); }
  .nav-panel a:first-child { display: none; }
  .nav-panel a.menu-btn { order: 10; margin: 0; padding: 11px 20px; border-radius: 12px; font-weight: 600; }
  .lang-sw { order: 5; }
  .nav-js .nav-panel, .nav-js.is-shown .nav-panel { opacity: 1; transform: none; transition: none; }
}
/* Trefferfläche der Hero-Chips und Pfeile: 6 px unsichtbar rundherum */
.chip-hit { position: relative; }
.chip-hit::before { content: ""; position: absolute; inset: -6px; }
[data-chip], [data-act] { transition: transform 100ms ease-out; }
/* Schmale Handys: seitliche Chip-Polster wie vorher (10 px), damit Chips und Pfeile nicht früher umbrechen; die Höhe von 36 px und die Trefferfläche bleiben */
@media (max-width: 399px) { [data-chip] { padding-left: 10px !important; padding-right: 10px !important; } }
a, button, summary { -webkit-tap-highlight-color: transparent; }
/* FAQ-Akkordeon und Bausteine der Leistungsseiten */
.faq { max-width: 760px; border-top: 1px solid #DFE5E0; }
.faq-item { border-bottom: 1px solid #DFE5E0; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 600 17px/1.4 'Geist', system-ui, sans-serif; color: #13241F; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex-shrink: 0; font-size: 22px; line-height: 1; color: #1F3A32; transition: transform 200ms ease-out; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 0 20px; font-size: 16px; line-height: 1.65; color: #3E544D; max-width: 40em; text-wrap: pretty; }
.faq-a p { margin: 0 0 10px; } .faq-a p:last-child { margin: 0; }
.pg-hero { padding-top: 24px; } .pg-list { margin: 12px 0 0; padding-left: 20px; line-height: 1.6; color: #3E544D; } .pg-list li { margin: 0 0 8px; }
/* Startseite: Über-mich-Liste, Kontaktliste */
.ab-list { margin: 12px 0; padding-left: 18px; line-height: 1.6; color: #3E544D; } .ab-list li { margin: 0 0 6px; }
.ct-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: #3E544D; }
/* CTA-Knopf der Leistungsseiten: gleiches Aussehen wie der Hero-Knopf (hero-cta trägt es nur inline) */
.btn-cta { display: inline-block; text-align: center; text-decoration: none; background: #1F3A32; color: #FFFFFF; font-size: 16px; font-weight: 600; line-height: 22px; padding: 13px 24px; border-radius: 12px; transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.btn-cta:hover { background: #142822; color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(20,40,34,0.6); }
.btn-cta:active { transform: scale(0.97); transition: transform 100ms ease-out; }
@media (max-width: 767px) { .btn-cta { display: block; } }
@media (prefers-reduced-transparency: reduce) { header { background: #F7F8F5 !important; backdrop-filter: none !important; } }
.hv0:hover{opacity: 0.8 !important}
.hv1:hover{background: #142822 !important;color: #FFFFFF !important;transform: translateY(-1px) !important;box-shadow: 0 10px 20px -12px rgba(20,40,34,0.6) !important}
.hv2:hover{border-color: #1F3A32 !important}
.hv3:hover{background: #EAF0EC !important}
.hv4:hover{color: #1F3A32 !important}
.hv5:hover{background: #EAF0EC !important;color: #1F3A32 !important}
.hv6:hover{background: #142822 !important;color: #FFFFFF !important;transform: translateY(-1px) !important}
.hv1:active,
.hv6:active { transform: scale(0.97) !important; transition: transform 100ms ease-out, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important; }
.hv3:active,
.hv5:active { transform: scale(0.97) !important; }
.hero-cta:active, .bw-t:active, .bw-go:active, .sl-btn:active, .nav-menu summary:active, .nav-panel a:active, [data-chip]:active, [data-act]:active { transform: scale(0.97) !important; }