/* Signwire Media: /solar, fokussierte Verkaufsseite ohne Nav. Baut auf den Tokens und Bausteinen aus style.css auf.
   Motiv: Sonnenbahn ueber einem Modulfeld (solar.js zeichnet es in #solBg). Alles auf einer zentrierten Achse.
   Versteckte Anfangszustaende haengen an .sol-live, das erst solar.js setzt: ohne Skript ist alles sichtbar.
   Nur transform und opacity werden animiert. */

body{background:transparent}
.sol-bg{position:fixed;left:0;top:0;z-index:-1;width:100%;height:100lvh;pointer-events:none;background:radial-gradient(90% 60% at 50% 100%,rgba(10,74,198,.34),rgba(10,74,198,0) 70%)}

.sol-head,.sol-hero,.sol-flow,.sol-garantie,.sol-form,.sol-foot{text-align:center}
.sol-sec{padding-block:clamp(72px,9vw,128px)}
.sol-flow h2,.sol-form h2{font-size:var(--t-40);line-height:1.08;letter-spacing:-.035em}

/* ---------- Kopf ---------- */
.sol-head{padding-block:22px 0}

/* ---------- Hero ---------- */
.sol-hero{padding-block:clamp(40px,6vw,88px) clamp(56px,7vw,96px)}
.sol-for{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;padding:8px 18px 8px 14px;border:1px solid rgba(143,178,255,.55);border-radius:999px;background:rgba(10,74,198,.34);font-family:var(--disp);font-weight:600;font-size:clamp(15px,1.25vw,18px);line-height:1.2;letter-spacing:-.01em;color:#fff}
.sol-for::before{content:"";width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(143,178,255,.9)}
.sol-hero h1{max-width:22em;margin-inline:auto;font-size:clamp(35px,4.1vw,60px);font-weight:800;line-height:1.03;letter-spacing:-.042em;text-wrap:balance}
.sol-nb{white-space:nowrap}
.sol-h1b{display:block;margin-top:.42em;font-size:.62em;font-weight:300;line-height:1.15;letter-spacing:-.025em;color:#C4D6FF}
.sol-cta .sol-note{font-size:var(--t-14);line-height:1.4;color:#C4D6FF}
.sol-lead{max-width:37em;margin:20px auto 0;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--text-h);text-wrap:balance}
.sol-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:28px}
.sol-cta p{font-size:var(--t-14);line-height:1.4;color:var(--text-h)}
.sol-cta .btn{height:62px;padding:0 44px;font-size:var(--t-17)}

/* ---------- Beispiel-Chat: Hauptobjekt, eine Platte in einer Fassung ---------- */
.sol-stage{position:relative;max-width:640px;margin:clamp(48px,6vw,72px) auto 0;perspective:1500px}
.sol-tilt{position:relative;transform-origin:50% 100%;will-change:transform}
.sol-tilt::before{content:"";position:absolute;inset:-12% -22% -6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(21,87,219,.5),rgba(21,87,219,0))}
.sol-bezel{position:relative;padding:8px;border:1px solid rgba(160,190,255,.2);border-radius:28px;background:rgba(14,22,40,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 50px 110px -34px rgba(2,8,24,.95),0 22px 50px -24px rgba(10,74,198,.6)}
.sol-bezel::before,.sol-bezel::after{content:"";position:absolute;z-index:-1;border:1px solid rgba(160,190,255,.12);background:rgba(12,18,32,.8)}
.sol-bezel::before{left:5%;right:5%;bottom:-13px;height:60px;border-radius:0 0 24px 24px;border-top:0}
.sol-bezel::after{left:10%;right:10%;bottom:-25px;height:60px;border-radius:0 0 22px 22px;border-top:0;opacity:.6}
.sol-hero .demo{padding:20px 22px 24px;border:0;border-radius:20px;background:linear-gradient(180deg,#0E1525,#090D16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);text-align:left;opacity:1;transform:none;animation:none}
.sol-hero .chat{gap:11px}
.sol-hero .msg{position:relative;opacity:1;transform:none;animation:none}
.sol-hero .msg p{font-size:16px}
.sol-hero .msg-in p{background:rgba(255,255,255,.09)}
.sol-hero .msg-ai p{background:linear-gradient(180deg,var(--brand-hi),var(--brand))}
.sol-hero .msg-cal p{border-color:rgba(76,132,255,.5);background:rgba(76,132,255,.14)}

/* Nacheinander: erst Tippen, dann die Nachricht. Der Platz ist von Anfang an reserviert, nichts springt. */
.sol-hero .msg:nth-child(1){--d:.2s}
.sol-hero .msg:nth-child(2){--dd:.9s;--d:1.7s}
.sol-hero .msg:nth-child(3){--d:2.9s}
.sol-hero .msg:nth-child(4){--dd:3.6s;--d:4.4s}
.sol-hero .msg:nth-child(5){--d:5.5s}
.sol-live .sol-hero .msg p{opacity:0;transform:translateY(12px) scale(.97)}
.sol-live .sol-hero .demo.is-run .msg p{animation:solIn .6s var(--ease) var(--d) forwards}
.sol-hero .msg-ai::before{content:"";position:absolute;right:0;top:0;width:66px;height:42px;border-radius:16px 16px 5px 16px;background:radial-gradient(circle 3.5px at 20px 21px,#fff 96%,transparent),radial-gradient(circle 3.5px at 33px 21px,#fff 96%,transparent),radial-gradient(circle 3.5px at 46px 21px,#fff 96%,transparent),var(--brand);opacity:0;pointer-events:none}
.sol-live .sol-hero .demo.is-run .msg-ai::before{animation:solDots .8s linear var(--dd) both}
@keyframes solIn{to{opacity:1;transform:none}}
@keyframes solDots{0%{opacity:0}15%,85%{opacity:1}100%{opacity:0}}

/* Einmaliger Auftritt beim Laden */
.sol-live .sol-load{animation:solRise .9s var(--ease) both}
.sol-live .sol-load-2{animation-delay:.1s}
.sol-live .sol-load-3{animation-delay:.2s}
.sol-live .sol-load-4{animation-delay:.3s}
@keyframes solRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Button */
.sol-page .btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 16px 40px -12px rgba(21,87,219,.85),0 2px 6px rgba(2,6,16,.6)}
.btn-primary:focus-visible{outline-offset:4px;border-radius:999px}

/* Einblenden beim Scrollen */
.sol-live .sol-rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.sol-live .sol-rv.in{opacity:1;transform:none}

/* ---------- Ablauf: Linie fuellt sich beim Scrollen ---------- */
.sol-flow{padding-block:clamp(56px,7vw,104px)}
.sol-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin:clamp(36px,4.4vw,56px) auto 0;--p:1}
.sol-track{position:absolute;left:16.667%;right:16.667%;top:clamp(33px,4vw,47px);height:2px;margin-top:-1px;border-radius:2px;background:rgba(255,255,255,.14);container-type:inline-size}
.sol-track i{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand-hi),#8FB2FF);transform:scaleX(var(--p));transform-origin:0 50%}
.sol-track b{position:absolute;left:-7px;top:-6px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(76,132,255,.32),0 0 26px 6px rgba(76,132,255,.85);transform:translateX(calc(var(--p) * 100cqw))}
.sol-step{position:relative;display:flex;flex-direction:column;align-items:center;padding-inline:8px}
.sol-node{position:relative;display:grid;place-items:center;width:clamp(66px,8vw,94px);height:clamp(66px,8vw,94px);border:1px solid rgba(160,190,255,.26);border-radius:50%;background:#0A0F1B;transition:transform .7s var(--ease)}
.sol-node::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:linear-gradient(180deg,var(--brand-hi),var(--brand));box-shadow:0 14px 40px -6px rgba(21,87,219,.9);opacity:1;transition:opacity .6s var(--ease)}
.sol-node svg{position:relative;width:44%;height:44%;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sol-live .sol-step:not(.is-on) .sol-node{transform:scale(.88)}
.sol-live .sol-step:not(.is-on) .sol-node::before{opacity:0}
.sol-step h3{margin-top:16px;font-size:clamp(16px,1.6vw,21px);line-height:1.25;letter-spacing:-.02em}
.sol-step p{margin-top:3px;font-size:clamp(13px,1.1vw,15px);line-height:1.4;color:#B4BCCB;text-wrap:balance}

/* ---------- Garantie: die Tafel, die man nicht ueberliest ---------- */
.sol-garantie{padding-block:clamp(40px,5vw,72px)}
.sol-plate{position:relative;isolation:isolate;overflow:hidden;max-width:1160px;margin-inline:auto;padding:clamp(52px,7vw,104px) clamp(22px,6vw,96px) clamp(52px,6vw,88px);border-radius:28px;background:var(--brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 50px 110px -40px rgba(10,74,198,.95);color:#fff}
.sol-rings{position:absolute;left:50%;bottom:0;z-index:-1;width:max(1300px,120%);max-width:none;transform:translate(-50%,46%);fill:none;stroke:#fff}
.sol-rings .a{fill:rgba(255,255,255,.05);stroke-opacity:.26}
.sol-rings .b{stroke-opacity:.2}
.sol-rings .c{stroke-opacity:.1}
.sol-garantie h2{font-weight:800;color:#fff;font-size:clamp(33px,5.2vw,74px);line-height:1.03;letter-spacing:-.042em}
.sol-g1{display:block;margin-bottom:.34em;font-size:.44em;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#DCE7FF}
.sol-g2{display:block}
.sol-garantie p{max-width:40em;margin:20px auto 0;font-size:var(--t-17);line-height:1.55;color:#fff}
.btn-paper{margin-top:30px;height:62px;padding:0 44px;font-size:var(--t-17);background:var(--paper);color:var(--ink);box-shadow:0 16px 36px -14px rgba(2,8,24,.7)}
.btn-paper:hover{transform:translateY(-2px);opacity:.93}
.sol-garantie :focus-visible{outline-color:#fff}

/* ---------- Terminbuchung: abgesetzte Karte, Google laedt, sobald der Abschnitt nah ist ---------- */
.sol-form{padding-block:clamp(56px,7vw,104px)}
.sol-filter{margin:12px auto 0;max-width:36em;text-wrap:balance;color:var(--text-h)}
.sol-card{max-width:800px;margin:clamp(26px,3vw,40px) auto 0;padding:8px;border:1px solid rgba(160,190,255,.2);border-radius:28px;background:rgba(14,22,40,.72);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 40px 90px -36px rgba(10,74,198,.7)}
.sol-cal{display:flex;flex-direction:column;align-items:center;gap:12px;overflow:hidden;padding:0 0 20px;border-radius:20px;background:linear-gradient(180deg,#0E1525,#090D16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.sol-cal-hint{max-width:34em;margin-top:8px;padding-inline:16px;font-size:var(--t-14);line-height:1.5;color:var(--text);text-wrap:balance}
.sol-cal a{color:var(--text-h);font-size:var(--t-14);text-underline-offset:3px;transition:opacity .2s var(--ease)}
.sol-cal a:hover{opacity:.78}
.sol-cal a:active{opacity:.55}
.sol-cal-frame{display:block;width:100%;height:760px;border:0;background:#fff}
.sol-garantie a.sol-bed{color:#fff;font-size:var(--t-14);text-underline-offset:3px;white-space:nowrap}
.sol-garantie a.sol-bed:hover{opacity:.78}
.sol-garantie a.sol-bed:active{opacity:.55}

/* ---------- Schrittanzeige: die Sonnenbahn des Hintergrunds, drei Stationen auf einem Bogen ---------- */
.sol-bahn{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:420px;margin:clamp(24px,3vw,36px) auto 0;padding:0;list-style:none}
.sol-bahn svg{position:absolute;left:0;top:0;width:100%;height:48px;fill:none;stroke:rgba(255,255,255,.22);stroke-width:2}
.sol-bahn path{vector-effect:non-scaling-stroke}
.sol-bahn path.an{stroke:#8FB2FF}
.sol-bahn li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:28px;font-family:var(--disp);font-weight:600;font-size:var(--t-14);line-height:1.2;color:var(--text)}
.sol-bahn svg{display:none}
.sol-bahn li,.sol-bahn li:nth-child(3){padding-top:0}
.sol-bahn li + li::before{content:"";position:absolute;top:16px;right:50%;width:100%;height:2px;background:rgba(255,255,255,.22)}
.sol-bahn li.is-cur::before,.sol-bahn li.is-done::before{background:#8FB2FF}
.sol-bahn span{position:relative;z-index:1}
.sol-bahn span{display:grid;place-items:center;width:32px;height:32px;border:1px solid rgba(160,190,255,.3);border-radius:50%;background:#0A0F1B;color:var(--text-h);line-height:1}
.sol-bahn .is-done{color:var(--text-h)}
.sol-bahn .is-done span{border-color:transparent;background:var(--brand)}
.sol-bahn .is-cur{color:var(--text-h)}
.sol-bahn .is-cur span{border-color:transparent;background:#fff;color:var(--brand);box-shadow:0 0 0 5px rgba(76,132,255,.32),0 0 26px 6px rgba(76,132,255,.85)}

/* ---------- Anfrageformular ---------- */
.sol-anfrage{padding:clamp(22px,4vw,44px);border-radius:20px;background:linear-gradient(180deg,#0E1525,#090D16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);text-align:center}
.sol-anfrage .f-field{align-items:center}
.sol-anfrage input:not([type=checkbox]),.sol-anfrage select{text-align:center;text-align-last:center}
.sol-anfrage select option{background:#0E1525;color:var(--text-h)}
.sol-anfrage [aria-invalid=true]{border-color:#FF7A7A}
.sol-anfrage .f-check{justify-content:center;max-width:36em;margin-inline:auto;text-align:center}
.sol-anfrage .hp{grid-column:1 / -1}
.sol-anfrage-end .btn{border:0}
.sol-anfrage-end .btn[disabled]{cursor:progress;opacity:.7}
.sol-anfrage .f-status{margin-inline:auto;text-align:center}
.sol-anfrage .f-status.is-shown{display:grid;gap:8px}
.sol-status-wege{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px}
.sol-status-wege a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-underline-offset:3px}
.sol-status-wege a:hover{opacity:.78}
.sol-status-wege a:active{opacity:.55}
.sol-anfrage noscript p{color:var(--text-h)}
.sol-anfrage a{text-underline-offset:3px}

/* ---------- Pop-up mit dem Anfrageformular: nur Oeffnung animiert, Inhalt scrollt innen ---------- */
html.sol-dialog-an .sol-ohnejs{display:none}
.sol-ohnejs-wege{max-width:36em;margin:18px auto 0;color:var(--text-h);text-wrap:balance}
.sol-ohnejs-wege a{text-underline-offset:3px}
.sol-ohnejs-wege a:hover{opacity:.78}
.sol-ohnejs-wege a:active{opacity:.55}
html.sol-dlg-offen{overflow:hidden}
.sol-dlg{width:min(780px,calc(100vw - 48px));max-width:none;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid rgba(160,190,255,.24);border-radius:24px;background:linear-gradient(180deg,#0E1525,#090D16);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 50px 110px -30px rgba(2,8,24,.95),0 22px 60px -24px rgba(10,74,198,.7);color:var(--text);text-align:center;overflow:hidden}
.sol-dlg[open]{display:flex;flex-direction:column;animation:solDlgIn .32s var(--ease) both}
.sol-dlg::backdrop{background:rgba(3,6,14,.74)}
.sol-dlg[open]::backdrop{animation:solDlgBg .24s linear both}
@keyframes solDlgIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes solDlgBg{from{opacity:0}to{opacity:1}}
.sol-dlg-inhalt{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(26px,3vw,36px) clamp(18px,4vw,44px) clamp(22px,3vw,32px)}
.sol-dlg h2{padding-inline:40px;font-size:clamp(26px,2.6vw,34px);line-height:1.1;letter-spacing:-.03em}
.sol-dlg .sol-filter{margin-top:8px;font-size:15px;line-height:1.45}
.sol-dlg-zu{position:absolute;right:10px;top:10px;z-index:1;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#1C2436;color:var(--text-h);cursor:pointer;transition:opacity .2s linear,transform .2s var(--ease)}
.sol-dlg-zu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sol-dlg-zu:hover{opacity:.72}
.sol-dlg-zu:active{transform:scale(.94)}
.sol-dlg-zu:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sol-dlg .sol-anfrage{margin-top:20px;padding:0;border-radius:0;background:none;box-shadow:none;gap:14px 18px}
.sol-dlg .f-field{gap:5px}
.sol-dlg .f-field input,.sol-dlg .f-field select{height:48px}
.sol-dlg .sol-anfrage-end .btn{height:56px;padding:0 36px;font-size:var(--t-17)}
@media(max-width:640px){
  .sol-dlg{width:calc(100vw - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);border-radius:20px}
  .sol-dlg-inhalt{padding-top:22px}
  .sol-dlg .sol-anfrage-end .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .sol-dlg[open],.sol-dlg[open]::backdrop{animation:none}
}

/* ---------- Schritt 2 und 3 ---------- */
.sol-schritt,.sol-block{text-align:center}
.sol-schritt{padding-block:clamp(20px,3vw,40px) clamp(40px,5vw,72px)}
.sol-schritt h1{max-width:18em;margin:clamp(28px,3.4vw,44px) auto 0;font-size:clamp(32px,4.1vw,60px);font-weight:800;line-height:1.05;letter-spacing:-.042em}
.sol-schritt-lead{max-width:36em;margin:16px auto 0;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--text-h);text-wrap:balance}
.sol-schritt-lead a{white-space:nowrap;text-underline-offset:3px}
.sol-schritt-lead a:hover{opacity:.78}
.sol-schritt-lead a:active{opacity:.55}
.sol-weiter{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(28px,3.4vw,40px)}
.sol-weiter .btn{height:62px;padding:0 44px;font-size:var(--t-17)}
.sol-weiter p{max-width:32em;font-size:var(--t-14);line-height:1.5;color:var(--text-h);text-wrap:balance}

.sol-block{padding-block:clamp(36px,5vw,72px)}
.sol-block h2{font-size:var(--t-40);line-height:1.08;letter-spacing:-.035em}
.sol-punkte{max-width:38em;margin:clamp(20px,3vw,32px) auto 0;padding:0;list-style:none}
.sol-punkte li{padding-block:14px;border-top:1px solid var(--line);font-size:var(--t-17);line-height:1.5;color:var(--text-h);text-wrap:balance}
.sol-punkte li:last-child{border-bottom:1px solid var(--line)}
.sol-drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px;margin:clamp(24px,3vw,40px) auto 0;border-block:1px solid var(--line)}
.sol-drei div{padding:clamp(22px,3vw,36px) clamp(16px,2.4vw,32px)}
.sol-drei div + div{border-left:1px solid var(--line)}
.sol-drei h3{font-size:var(--t-21);line-height:1.25;letter-spacing:-.025em}
.sol-drei p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--text);text-wrap:balance}
.sol-cast{max-width:860px;margin:clamp(24px,3vw,40px) auto 0}
.sol-fragen{max-width:46em;margin:clamp(20px,3vw,32px) auto 0}
.sol-fragen summary{padding-inline:40px}
.sol-fragen .a{max-width:none;padding-inline:0;text-align:center}
.sol-fragen .a p{max-width:36em;margin-inline:auto;padding-bottom:22px;text-wrap:pretty}
.sol-bedingungen{margin-top:24px;font-size:var(--t-14)}
.sol-bedingungen a{display:inline-block;padding-block:12px;color:var(--text-h);text-underline-offset:3px}
.sol-bedingungen a:hover{opacity:.78}
.sol-bedingungen a:active{opacity:.55}
@media(max-width:760px){
  .sol-drei{grid-template-columns:1fr}
  .sol-drei div + div{border-left:0;border-top:1px solid var(--line)}
}

/* ---------- Footer ---------- */
.sol-foot{padding-block:36px 44px;border-top:1px solid var(--line);font-size:var(--t-14);line-height:1.6;color:var(--text);background:var(--black);content-visibility:visible}
.sol-foot p{max-width:60em;margin-inline:auto}
.sol-foot p + p{margin-top:6px}
.sol-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin-top:14px}
.sol-foot a{display:inline-block;padding-block:6px;color:var(--text-h);text-underline-offset:3px;transition:opacity .2s var(--ease)}
.sol-foot a:hover{opacity:.78}
.sol-foot a:active{opacity:.55}

/* ---------- Mobil ---------- */
@media(max-width:760px){
  .sol-cal-frame{height:1190px}
  .sol-tilt::before{inset:-8% 0 -4%}
  .sol-hero .demo{padding:16px 14px 18px}
  .sol-hero .msg p{font-size:15px}
  .sol-bezel,.sol-card{border-radius:24px}
  .sol-hero .demo,.sol-cal{display:flex;flex-direction:column;align-items:center;gap:12px;overflow:hidden;padding:0 0 20px;border-radius:20px;background:linear-gradient(180deg,#0E1525,#090D16);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
}
@media(max-width:640px){
  .sol-hero h1{font-size:8vw}
  .sol-l{display:block}
  .sol-cta{align-items:stretch}
  .sol-cta .btn,.btn-paper,  .sol-plate{border-radius:24px}
}

/* ---------- Ruhe ---------- */
@media(prefers-reduced-motion:reduce){
  .sol-live .sol-load,.sol-live .sol-rv,.sol-live .sol-hero .msg p{opacity:1;transform:none;animation:none}
  .sol-hero .msg-ai::before{display:none}
  .sol-tilt{transform:none}
}