.selfservice-hero { position: relative; min-height: 650px; overflow: hidden; padding: 195px 0 95px; background: #061524; color: #fff; }
.selfservice-hero::before { position: absolute; inset: -30%; background: radial-gradient(circle at 24% 38%, rgba(21,185,234,.4), transparent 28%), radial-gradient(circle at 72% 30%, rgba(230,59,50,.34), transparent 23%), radial-gradient(circle at 65% 80%, rgba(56,110,255,.2), transparent 26%); content: ""; animation: aurora-shift 14s ease-in-out infinite alternate; }
.selfservice-hero::after { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent); content: ""; }
.selfservice-hero .container { position: relative; z-index: 2; }
.selfservice-hero__copy { max-width: 850px; }
.selfservice-hero h1 { margin: 25px 0; color: #fff; font-size: clamp(3.3rem, 7.5vw, 6.5rem); letter-spacing: -.065em; }
.selfservice-hero h1 em { color: var(--cyan); }
.selfservice-hero__copy > p:not(.eyebrow) { max-width: 720px; color: rgba(255,255,255,.68); font-size: 1.06rem; }
.selfservice-hero__chips { display: flex; margin-top: 36px; flex-wrap: wrap; gap: 9px; }
.selfservice-hero__chips span { padding: 8px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 99px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); font-size: .72rem; backdrop-filter: blur(10px); }

.selfservice-hub { position: relative; background: radial-gradient(circle at 5% 15%, rgba(21,185,234,.09), transparent 25%), radial-gradient(circle at 92% 72%, rgba(230,59,50,.07), transparent 24%), var(--paper); }
.selfservice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.selfservice-card { position: relative; display: grid; min-height: 285px; padding: 34px; overflow: hidden; grid-template-columns: 1fr auto; gap: 25px; border: 1px solid rgba(8,34,59,.1); border-radius: 12px; background: rgba(255,255,255,.86); box-shadow: 0 18px 60px rgba(8,34,59,.07); transition: transform .3s, box-shadow .3s, border-color .3s; }
.selfservice-card::before { position: absolute; width: 230px; height: 230px; right: -90px; bottom: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(21,185,234,.22), transparent 67%); content: ""; transition: transform .4s; }
.selfservice-card:nth-child(3n+2)::before { background: radial-gradient(circle, rgba(230,59,50,.18), transparent 67%); }
.selfservice-card:hover { border-color: rgba(21,185,234,.42); box-shadow: 0 28px 75px rgba(8,34,59,.14); transform: translateY(-6px); }
.selfservice-card:hover::before { transform: scale(1.25); }
.selfservice-card__number { color: var(--red); font-weight: 800; }
.selfservice-card h2, .selfservice-card h3 { margin: 42px 0 13px; font-size: 1.45rem; }
.selfservice-card p { max-width: 470px; margin: 0; color: var(--muted); font-size: .82rem; }
.selfservice-card__arrow { position: relative; z-index: 2; display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; transition: background .2s, transform .2s; }
.selfservice-card:hover .selfservice-card__arrow { background: var(--red); transform: rotate(45deg); }

.tool-stage { position: relative; padding: 100px 0; background: radial-gradient(circle at 0 30%, rgba(21,185,234,.12), transparent 30%), radial-gradient(circle at 100% 80%, rgba(230,59,50,.1), transparent 28%), #eef3f6; }
.tool-stage::before { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(120deg, transparent 48%, rgba(8,34,59,.08) 49%, transparent 50%); background-size: 58px 58px; content: ""; }
.tool-layout { position: relative; display: grid; grid-template-columns: .82fr 1.18fr; gap: 55px; align-items: start; }
.tool-intro { position: sticky; top: 120px; }
.tool-intro h2 { font-size: clamp(2.2rem, 4vw, 3.7rem); letter-spacing: -.05em; }
.tool-intro > p:not(.eyebrow) { color: var(--muted); }
.tool-benefits { margin: 30px 0 0; padding: 0; list-style: none; }
.tool-benefits li { display: flex; margin: 12px 0; align-items: center; gap: 10px; color: #3b5364; font-size: .82rem; }
.tool-benefits li::before { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(21,185,234,.14); color: #087da2; content: "✓"; font-size: .7rem; font-weight: 800; }
.tool-panel { padding: 38px; border: 1px solid rgba(255,255,255,.8); border-radius: 14px; background: rgba(255,255,255,.86); box-shadow: 0 30px 90px rgba(5,25,43,.13); backdrop-filter: blur(20px); }
.tool-panel h2 { margin-bottom: 25px; font-size: 1.4rem; }
.tool-form { display: grid; gap: 19px; }
.tool-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tool-form label > span, .tool-form fieldset > legend { display: block; margin-bottom: 7px; color: #405464; font-size: .72rem; font-weight: 700; }
.tool-form input:not([type="checkbox"]), .tool-form select, .tool-form textarea { width: 100%; min-height: 51px; padding: 13px 15px; border: 1px solid #cbd8df; border-radius: 7px; outline: 0; background: rgba(255,255,255,.88); color: var(--ink); transition: border .2s, box-shadow .2s; }
.tool-form textarea { min-height: 120px; resize: vertical; }
.tool-form input:focus, .tool-form select:focus, .tool-form textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(21,185,234,.12); }
.tool-form fieldset { display: grid; margin: 0; padding: 18px; grid-template-columns: 1fr 1fr; gap: 10px; border: 1px solid var(--line); border-radius: 8px; }
.tool-check { display: flex; align-items: center; gap: 9px; color: #496070; font-size: .78rem; }
.tool-check input { width: 17px; height: 17px; accent-color: var(--red); }
.tool-form .button { margin-top: 8px; border: 0; }
.tool-result { margin-top: 22px; padding: 30px; border-radius: 10px; background: var(--ink); color: rgba(255,255,255,.72); box-shadow: 0 22px 60px rgba(5,25,43,.2); }
.tool-result[data-status="Sofort reagieren"], .tool-result[data-status="Zeitnah wechseln"], .tool-result[data-status="HU überfällig"], .tool-result[data-status="Wirtschaftlichkeit kritisch"] { background: linear-gradient(135deg, #3b1111, #8e211d); }
.tool-result h2 { margin: 12px 0; color: #fff; font-size: 1.65rem; }
.tool-result p { color: rgba(255,255,255,.7); font-size: .84rem; }
.result-status { display: inline-flex; padding: 5px 10px; border-radius: 99px; background: rgba(21,185,234,.18); color: #9eeaff; font-size: .67rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tool-result .button { margin-top: 18px; }
.tool-result .button-secondary { margin-left: 8px; background: transparent; color: #fff; }
.tool-result dl { display: grid; margin: 22px 0 0; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool-result dl div, .result-plan div { padding: 13px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; }
.tool-result dt, .result-plan span { color: rgba(255,255,255,.45); font-size: .67rem; }
.tool-result dd { margin: 4px 0 0; color: #fff; font-weight: 700; }
.result-link a { color: var(--cyan-light); font-weight: 700; }
.result-plan { display: grid; margin-top: 20px; grid-template-columns: 1fr 1fr; gap: 9px; }
.result-plan strong, .result-plan span { display: block; }
.result-plan span { margin-top: 4px; }
.brake-chart { display: grid; margin-top: 22px; gap: 14px; }
.brake-chart div { display: grid; gap: 6px; }
.brake-chart span { color: rgba(255,255,255,.72); font-size: .7rem; }
.brake-chart i { display: block; min-width: 3px; height: 13px; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--red)); transition: width .5s ease; }
.photo-preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.photo-preview div { overflow: hidden; border-radius: 7px; background: var(--paper); }
.photo-preview img { width: 100%; height: 130px; object-fit: cover; }
.photo-preview span { display: block; padding: 8px; overflow: hidden; color: var(--muted); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.selfservice-note { padding: 22px; border-left: 3px solid var(--red); background: rgba(255,255,255,.65); color: var(--muted); font-size: .76rem; }
.selfservice-knowledge { background: #fff; }
.selfservice-knowledge__head { max-width: 900px; margin-bottom: 52px; }
.selfservice-knowledge__head > p:last-child { color: var(--muted); font-size: 1rem; }
.selfservice-knowledge__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.selfservice-knowledge__grid article { padding: 30px; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(145deg, #fff, #f7fafc); }
.selfservice-knowledge__grid article:nth-child(3n) { border-top: 3px solid var(--red); }
.selfservice-knowledge__grid article:nth-child(3n+1) { border-top: 3px solid var(--cyan); }
.selfservice-knowledge__grid h3 { margin-bottom: 14px; font-size: 1.04rem; }
.selfservice-knowledge__grid p { margin: 0; color: var(--muted); font-size: .8rem; }

@keyframes aurora-shift { from { transform: translate3d(-2%, -1%, 0) rotate(-3deg); } to { transform: translate3d(3%, 2%, 0) rotate(4deg) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .selfservice-hero::before { animation: none; } .selfservice-card, .selfservice-card::before, .brake-chart i { transition: none; } }
@media (max-width: 850px) {
  .selfservice-grid, .tool-layout { grid-template-columns: 1fr; }
  .selfservice-knowledge__grid { grid-template-columns: 1fr; }
  .tool-intro { position: static; }
}
@media (max-width: 600px) {
  .selfservice-hero { min-height: 600px; padding-top: 160px; }
  .selfservice-grid { grid-template-columns: 1fr; }
  .selfservice-card { min-height: 250px; padding: 27px 23px; }
  .tool-panel { padding: 25px 19px; }
  .tool-form .field-row, .tool-form fieldset, .tool-result dl, .result-plan { grid-template-columns: 1fr; }
  .tool-result { padding: 24px 20px; }
  .tool-result .button-secondary { margin-left: 0; }
}