/* Risky Projects – KI-Telefonassistent (DE/EN/TR/FR). Design angelehnt an preview-brain/styles.css, ohne externe Ressourcen. */
:root{
  --bg:#07111F; --bg2:#0B1A2E; --panel:#0E2036; --panel2:#10253F;
  --line:#1E4C78; --cyan:#3FB6FF; --orange:#FF7A2F; --orange2:#FF9A3D;
  --text:#EAF2FF; --muted:#A9BCD6; --radius:16px;
  --font:"Poppins","Montserrat","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; overflow-x:hidden; color:var(--text); font-family:var(--font); line-height:1.5;
  background:radial-gradient(1200px 600px at 50% 0%, rgba(40,110,190,.35), transparent 60%), linear-gradient(180deg,#0A1B30 0%, var(--bg) 40%, #081322 100%)}
a{color:inherit; text-decoration:none}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0; list-style:none}
svg{fill:none; stroke:currentColor}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:10px; padding:14px 26px; font:600 17px var(--font); cursor:pointer; border:0; transition:transform .2s, box-shadow .2s; text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-sm{padding:9px 16px; font-size:14px}
.btn-orange{background:linear-gradient(180deg,var(--orange2),var(--orange)); color:#fff; box-shadow:0 0 0 1px rgba(255,170,100,.6) inset, 0 6px 24px rgba(255,110,40,.45)}
.btn-outline{border:1.5px solid var(--orange); color:#fff; background:rgba(255,122,47,.06); box-shadow:0 0 14px rgba(255,122,47,.35)}

.topbar{position:sticky; top:0; z-index:5; background:rgba(7,17,31,.92); backdrop-filter:blur(8px); border-bottom:1px solid rgba(30,76,120,.5)}
.bar{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:12px; padding-bottom:12px}
.logo{display:flex; align-items:center; gap:12px}
.logo-mark{width:40px; height:40px; stroke:none; filter:drop-shadow(0 0 10px rgba(255,122,47,.45))}
.logo-text{display:flex; flex-direction:column; line-height:1}
.logo-text b{font-size:22px; letter-spacing:.06em; font-weight:800}
.logo-text small{font-size:11px; letter-spacing:.38em; margin-top:4px; color:#DCE7F7}
.nav{display:flex; gap:20px; font-size:14px; color:#D7E3F4}
.nav a:hover{color:#fff}
.home-link{font-size:14px; font-weight:600; color:var(--cyan); white-space:nowrap}
.home-link:hover{text-decoration:underline}

.sec{padding:72px 0}
.sec.dark{background:rgba(4,9,15,.55); border-block:1px solid rgba(30,76,120,.4)}
.eyebrow{font-size:12px; letter-spacing:.14em; font-weight:600; color:var(--cyan); text-transform:uppercase}
.eyebrow.center{text-align:center; margin-bottom:18px}
.shead{margin-bottom:36px}
.shead h2,.cta h2{font-size:clamp(26px,4vw,40px); line-height:1.2; margin-top:8px; font-weight:700; overflow-wrap:anywhere}
.lead{color:var(--muted); font-size:18px; margin-top:14px; max-width:760px}
.hl{color:var(--orange2)}
.note,.hint,.src{font-size:13px; color:var(--muted); margin-top:10px}

.hero{padding:88px 0 56px; text-align:center}
.hero h1{font-size:clamp(32px,6vw,60px); line-height:1.12; font-weight:800; margin:12px 0 18px; overflow-wrap:anywhere}
.hero .lead{margin:0 auto 28px}


.grid2,.grid3,.grid4{display:grid; gap:20px}
.grid2{grid-template-columns:repeat(2,1fr)}
.grid3{grid-template-columns:repeat(3,1fr); margin-top:20px}
.shead + .grid3,.shead + .grid4,.shead + .grid2{margin-top:0}
.grid4{grid-template-columns:repeat(4,1fr)}
.card{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius); padding:24px; min-width:0}
.card h3{font-size:19px; margin:6px 0 10px; overflow-wrap:anywhere}
.card p{color:var(--muted); font-size:15px}
.card .eyebrow{color:var(--cyan)}
.card p.big,.big{font-size:clamp(34px,4vw,48px); font-weight:800; line-height:1.1; color:var(--text)}
.card p.big.hl{color:var(--orange2)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.tags li{font-size:13px; padding:5px 12px; border:1px solid var(--line); border-radius:999px; color:#CFE0F5; background:rgba(20,60,110,.3)}
.center-tags{justify-content:center; margin:6px 0 32px}

.cta{text-align:center}
.cta .lead{margin-inline:auto}

.field + .field{margin-top:22px}
.field label{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; letter-spacing:.08em; color:var(--muted); margin-bottom:10px}
input[type=range]{width:100%; accent-color:var(--orange)}
.roi-sum{font-size:clamp(30px,6vw,60px); font-weight:800; color:var(--orange2); line-height:1.1; margin:6px 0 4px; overflow-wrap:anywhere}
.roi-out .btn{margin-top:14px}
.roi-out .btn-orange{width:100%}
.roi-detail{margin-top:16px; padding:14px 18px 14px 36px; list-style:decimal; background:rgba(4,9,15,.45); border-radius:10px; font-size:14px; color:#CFE0F5}
.roi-detail[hidden]{display:none}
.roi-detail li{margin:6px 0; overflow-wrap:anywhere}

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius)}
table{width:100%; border-collapse:collapse; font-size:15px}
th,td{padding:14px 16px; text-align:left; border-bottom:1px solid rgba(30,76,120,.5)}
thead th{font-size:12px; letter-spacing:.08em; color:var(--muted)}
thead em{font-style:normal; color:var(--orange2); margin-left:6px}
tbody th{font-weight:500; color:#CFE0F5}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0; font-weight:700}

.footer{border-top:1px solid rgba(30,76,120,.5); padding:44px 0 24px; background:#04090F}
.foot{display:grid; grid-template-columns:2fr 1.4fr 1fr; gap:28px}
.foot p{color:var(--muted); font-size:14px; margin-top:14px; max-width:360px}
.foot address{display:flex; flex-direction:column; gap:6px; font-style:normal; font-size:14px; color:var(--muted)}
.foot address b{color:var(--text)}
.foot nav{display:flex; flex-direction:column; gap:6px; font-size:14px}
.foot a:hover{color:var(--cyan)}
.copy{margin-top:28px; font-size:12px; color:#8FA6C4}

/* Bausteine v2 */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.cta-row{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:28px}
.hero .cta-row{margin-top:0}
.chips{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:36px}
.chips li{padding:8px 16px; border:1px solid var(--line); border-radius:999px; background:rgba(20,60,110,.3); color:#CFE0F5; font-size:14px}
.bridge{margin-top:28px; font-weight:600; font-size:19px; text-align:center}
.sub{margin-top:0; margin-bottom:28px}
.arrow{font-size:1.1em}
.grid-uses{grid-template-columns:repeat(4,1fr)}
.card h3.grp{color:var(--orange2); margin-top:0}
.uses li + li{margin-top:12px}
.uses b{display:block; font-size:15px}
.uses span{display:block; color:var(--muted); font-size:14px}
.sp{margin-top:36px}
.center{text-align:center}
.disclaimer{margin-top:18px}

.bar{flex-wrap:wrap}
.bar.wrap{max-width:1480px}
@media (min-width:1024px) and (max-width:1299px){.bar-cta{display:none}}
.bar-right{display:flex; align-items:center; gap:14px}
.lang,.menu-btn{display:none}
.js .lang{display:block; position:relative}
.lang-btn,.menu-btn,.menu-close{font:600 14px var(--font); color:var(--text); background:rgba(20,60,110,.3); border:1px solid var(--line); border-radius:10px; padding:8px 12px; cursor:pointer; min-height:40px}
.lang-list{position:absolute; right:0; top:calc(100% + 6px); min-width:150px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:6px; z-index:6}
.lang-list[hidden]{display:none}
.lang-list button{display:block; width:100%; text-align:left; font:500 15px var(--font); color:var(--text); background:none; border:0; border-radius:8px; padding:10px 12px; cursor:pointer; min-height:44px}
.lang-list button:hover,.lang-list button[aria-current]{background:rgba(63,182,255,.15)}
.lang-list button[aria-current]{color:var(--cyan)}
.burger,.burger::before,.burger::after{display:block; width:20px; height:2px; background:currentColor; border-radius:2px; content:""; position:relative}
.burger::before{position:absolute; top:-6px}
.burger::after{position:absolute; top:6px}
.menu-btn{width:44px; padding:0; align-items:center; justify-content:center}
.menu{width:min(360px,100vw); max-width:100vw; height:100%; max-height:100%; margin:0 0 0 auto; border:0; border-left:1px solid var(--line); background:var(--bg2); color:var(--text); padding:20px 24px; overflow-y:auto}
.menu[open]{display:flex; flex-direction:column; gap:20px}
.menu::backdrop{background:rgba(4,9,15,.7)}
.menu-close{align-self:flex-end; font-size:24px; line-height:1; width:44px; padding:0}
.menu-nav{display:flex; flex-direction:column}
.menu-nav a{padding:14px 4px; font-size:18px; border-bottom:1px solid rgba(30,76,120,.5)}

.roi-box{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start}
.roi-in,.roi-out{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:var(--radius); padding:26px; min-width:0}
.roi-in .btn{margin-top:22px}
.pair{display:flex; align-items:center; gap:14px}
.pair input[type=range]{flex:1; min-width:0; min-height:44px}
.num{width:120px; flex:none; min-height:44px; padding:8px 10px; font:600 16px var(--font); color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:10px}
.num.wide{width:100%}
select.num{width:96px}
.fields2{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px}
.fields2 .field + .field{margin-top:0}
.fields2 label{margin-bottom:6px}
.warn{color:var(--orange2)}
.tco-table{margin-top:24px}
.tco-table[hidden]{display:none}
.tco-table td:not(:first-child),.tco-table th:not(:first-child){text-align:right; white-space:nowrap}

.sheet-card{max-width:760px}
.sheet div{display:grid; grid-template-columns:minmax(120px,1fr) 2fr; gap:14px; padding:12px 0; border-bottom:1px solid rgba(30,76,120,.5)}
.sheet div:last-child{border-bottom:0}
.sheet dt{font-weight:600}
.sheet dd{margin:0; color:var(--muted)}
.sheet-card .eyebrow{margin-bottom:6px}

.faq{max-width:820px}
.faq details{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line); border-radius:12px; padding:0 20px; margin-top:12px}
.faq summary{cursor:pointer; padding:16px 0; font-weight:600; font-size:17px; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--orange2); font-size:22px; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted); padding-bottom:18px}

/* Währungsumschalter (€ $ ₺) */
.cur-switch{display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:rgba(20,60,110,.3)}
.cur-switch[hidden]{display:none}
.cur-switch button{font:600 14px var(--font); color:var(--text); background:transparent; border:0; padding:8px 12px; min-height:44px; min-width:44px; cursor:pointer}
.cur-switch button[aria-pressed=true]{background:var(--orange); color:#1a0b00}
.cur-switch button:focus-visible{outline:2px solid var(--cyan); outline-offset:-2px}
.calc-tools{display:flex; justify-content:flex-end; margin-bottom:12px}
.calc-tools:has(.cur-switch[hidden]){display:none}
.fx-note{text-align:right}
@media (max-width:1023px){
  .grid4,.grid-uses{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .roi-box{grid-template-columns:1fr}
  .js .nav,.js .bar-right .home-link,.js .bar-cta{display:none}
  .js .menu-btn{display:flex}
  .nav{flex-wrap:wrap; gap:14px 20px}
}
@media (min-width:1024px){.menu{display:none!important}}
@media (max-width:640px){
  .bar{gap:10px}
  .bar-right{gap:8px}
  .wrap{padding:0 18px}
  .sec{padding:52px 0}
  .hero{padding:56px 0 40px}
  .grid2,.grid3,.grid4,.grid-uses,.foot,.fields2{grid-template-columns:1fr}
  .logo-text small{letter-spacing:.2em}
  .roi-in,.roi-out{padding:20px}
  .num{width:104px}
  .sheet div{grid-template-columns:1fr; gap:2px}
  .btn{padding:14px 18px; font-size:16px}
  .cta-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* Buchungskalender als Layer (consult.js; Kalender-CSS: shared/booking.css) */
html.consult-open{overflow:hidden}
.consult{width:min(720px,calc(100vw - 40px)); max-width:100vw; max-height:calc(100vh - 40px); margin:auto; padding:0; border:1.5px solid var(--cyan); border-radius:18px; background:linear-gradient(180deg,rgba(16,44,78,.97),rgba(8,22,42,.98)); color:var(--text); box-shadow:0 0 40px rgba(63,182,255,.35), 0 20px 60px rgba(0,0,0,.6); overflow:hidden}
.consult::backdrop{background:rgba(3,8,16,.72); backdrop-filter:blur(6px)}
.consult-body{max-height:calc(100vh - 43px); overflow-y:auto; overflow-x:hidden; padding:30px 32px 28px}
.consult-close{position:absolute; top:10px; right:12px; z-index:1; width:44px; height:44px; border-radius:50%; border:1px solid rgba(120,170,230,.5); background:rgba(6,18,34,.85); color:#fff; font-size:24px; line-height:1; cursor:pointer}
.consult-close:hover{border-color:var(--orange)}
.consult .bk{margin-top:0}
.consult .bk-head{padding-right:44px}
@media (max-width:600px){
  .consult{width:100vw; height:100%; max-height:none; border-radius:0; border-width:0}
  .consult-body{max-height:none; height:100%; padding:56px 16px 24px}
}