:root{
 --cc-navy:#011749;
 --cc-blue:#49ABEB;
 --cc-red:#F12938;
 --cc-purple:#7959E2;
 --cc-green:#54C664;
 --cc-orange:#FF7900;
 --cc-yellow:#F2C00C;
 --ink:#49494D;
 --muted:#75808B;
 --paper:#FFFFFF;
 --page:#F4F7FB;
 --soft:#EEF4F9;
 --line:#D9E2EB;
 --shadow:0 12px 34px rgba(1,23,73,.10);
 --radius-xl:28px;
 --radius-lg:22px;
 --radius-md:16px;
 --radius-sm:12px;
}
*{box-sizing:border-box}
html{background:var(--page)}
body{
 margin:0;background:var(--page);color:var(--ink);
 font-family:"Albert Sans",Arial,sans-serif;
}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:#087ABD}
.nav{
 height:82px;background:var(--cc-navy);color:#fff;
 display:flex;justify-content:space-between;align-items:center;
 padding:0 4vw;border-radius:0 0 28px 28px;
 box-shadow:0 8px 28px rgba(1,23,73,.18);
}
.brand{display:flex;align-items:center;gap:13px}
.brandmark{
 width:46px;height:46px;border-radius:15px;background:var(--cc-blue);
 display:grid;place-items:center;font-weight:900;font-size:22px;color:var(--cc-navy)
}
.brand b{display:block;letter-spacing:1.2px}
.brand span{font-size:12px;opacity:.74}
.nav-actions{display:flex;align-items:center;gap:14px}
.navbtn{
 border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.09);
 color:#fff;height:42px;padding:0 16px;border-radius:14px;font-weight:800
}
.clock{text-align:right}.clock b{font-size:25px;display:block}.clock span{font-size:11px;opacity:.75}

main{max-width:1500px;margin:auto;padding:0 4vw 48px}
.hero{position:relative;padding:46px 4px 27px;overflow:hidden}
.eyebrow,.section-head span,.map-head span{
 font-size:12px;letter-spacing:2.5px;font-weight:900;color:var(--cc-blue)
}
h1{font-size:48px;color:var(--cc-navy);margin:8px 0 7px;letter-spacing:-1.7px}
.hero p{font-size:18px;margin:0;color:#68717b}

.search-card{
 position:relative;background:#fff;padding:23px;border:1px solid var(--line);
 border-radius:var(--radius-xl);box-shadow:var(--shadow);
 overflow:visible
}
.search-card:before{
 content:"";position:absolute;left:24px;right:24px;top:0;height:5px;
 background:linear-gradient(90deg,var(--cc-blue),var(--cc-purple));
 border-radius:0 0 9px 9px
}
.route-inputs{display:grid;grid-template-columns:1fr 58px 1fr;gap:12px;align-items:end}
.field{position:relative}.field label{
 display:block;font-size:11px;font-weight:900;color:var(--cc-navy);margin:0 0 7px 5px
}
.field input,.tools input,.tools select{
 height:54px;border:1px solid #C8D2DC;background:#fff;padding:0 15px;
 outline:none;color:var(--cc-navy);font-weight:750;border-radius:var(--radius-md)
}
.field input{width:100%;font-size:18px}
.field input:focus,.tools input:focus,.tools select:focus{
 border-color:var(--cc-blue);box-shadow:0 0 0 4px rgba(73,171,235,.14)
}
.swap,.ghost,.primary,.seg button{
 height:50px;border:0;font-weight:850;border-radius:var(--radius-md)
}
.swap{
 background:var(--cc-navy);color:#fff;font-size:22px;width:58px
}
.tools{display:flex;gap:9px;align-items:center;margin-top:15px;flex-wrap:wrap}
.seg{
 display:flex;border:1px solid #C8D2DC;border-radius:var(--radius-md);
 overflow:hidden;background:#fff
}
.seg button{background:#fff;color:var(--cc-navy);padding:0 17px;border-radius:0}
.seg button.active{background:var(--cc-navy);color:#fff}
.ghost{background:var(--soft);color:var(--cc-navy);padding:0 16px}
.ghost:hover{background:#E4EDF5}
.primary{
 background:var(--cc-blue);color:var(--cc-navy);padding:0 23px;margin-left:auto;
 box-shadow:0 6px 16px rgba(73,171,235,.24)
}
.primary:hover{filter:brightness(.97)}
.mode-filter{
 margin-top:13px;padding:13px 16px;background:var(--soft);
 display:flex;gap:18px;flex-wrap:wrap;border:1px solid var(--line);
 border-radius:var(--radius-md)
}
.mode-filter label{font-size:13px;font-weight:800;color:var(--cc-navy)}
.suggest{
 display:none;position:absolute;top:80px;left:0;right:0;background:#fff;
 border:1px solid var(--line);box-shadow:0 15px 35px rgba(1,23,73,.18);
 z-index:100;border-radius:var(--radius-md);overflow:hidden
}
.suggest.show{display:block}.suggest div{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.suggest div:last-child{border-bottom:0}.suggest div:hover{background:var(--soft)}

.favorites-panel{
 position:absolute;right:22px;top:95px;width:min(430px,calc(100% - 44px));
 background:#fff;border:1px solid var(--line);box-shadow:0 18px 45px rgba(1,23,73,.18);
 z-index:80;padding:16px;border-radius:var(--radius-lg)
}
.panel-head{display:flex;justify-content:space-between;align-items:center}
.panel-head button{border:0;background:transparent;font-size:22px}
.fav{
 display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px;background:var(--soft);
 margin-top:9px;border-radius:var(--radius-sm)
}
.fav-main{cursor:pointer}.fav-main b{display:block;color:var(--cc-navy)}
.fav-main small{color:#74808b}.fav-del{border:0;background:transparent;color:var(--cc-red);font-size:18px}

.official-source{
 margin-top:14px;padding:11px 14px;background:#EAF7FF;
 border:1px solid #C9E9FB;border-radius:var(--radius-md);
 font-size:12px;color:#64717c
}
.official-source b{color:var(--cc-navy)}
.official-source a,.map-info a{color:#087abd;font-weight:800}

.workspace{
 display:grid;grid-template-columns:minmax(520px,.96fr) minmax(520px,1.04fr);
 gap:22px;margin-top:28px;align-items:start
}
.section-head,.map-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}
.section-head h2{margin:4px 0 0;color:var(--cc-navy);font-size:22px}
.head-actions{display:flex;gap:8px}.map-head b{display:block;color:var(--cc-navy);margin-top:4px}

.recommendation{
 position:relative;margin-bottom:14px;padding:18px 18px 17px 20px;
 background:linear-gradient(135deg,#011749 0%,#0D20A0 100%);
 color:#fff;border-radius:var(--radius-lg);box-shadow:0 12px 28px rgba(1,23,73,.18);
 overflow:hidden
}
.recommendation:after{
 content:"";position:absolute;width:140px;height:140px;right:-40px;top:-55px;
 border-radius:50%;background:rgba(73,171,235,.20)
}
.rec-kicker{font-size:11px;font-weight:900;letter-spacing:2px;color:#8FD5FF}
.rec-main{font-size:21px;font-weight:900;margin-top:6px}
.rec-sub{font-size:13px;color:#D8E8FF;margin-top:5px;line-height:1.4}
.rec-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.rec-chip{font-size:11px;font-weight:850;background:rgba(255,255,255,.12);padding:6px 9px;border-radius:999px}

.connection{
 border:1px solid var(--line);background:#fff;margin-bottom:12px;cursor:pointer;
 position:relative;border-radius:var(--radius-lg);overflow:hidden;
 transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease
}
.connection:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(1,23,73,.08)}
.connection.selected{box-shadow:var(--shadow);border-color:#A9D9F7}
.connection.selected:before{
 content:"";position:absolute;left:0;top:16px;bottom:16px;width:5px;
 border-radius:0 8px 8px 0;background:var(--cc-blue)
}
.connection.recommended{border-color:#94D3F8}
.connection.recommended .conn-main{background:linear-gradient(90deg,#F5FBFF 0%,#fff 55%)}
.recommended-tag{
 display:inline-flex;align-items:center;gap:5px;background:#DDF3FF;color:#07577F;
 font-size:10px;font-weight:900;padding:5px 8px;border-radius:999px;margin-bottom:7px
}
.conn-main{
 padding:18px 18px 15px 23px;display:grid;grid-template-columns:142px 1fr 132px;
 gap:12px;align-items:center
}
.times{font-size:24px;font-weight:900;color:var(--cc-navy)}
.meta{font-size:12px;color:#7b858f;margin-top:4px}
.lines{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.line-pill{
 padding:6px 9px;background:var(--cc-navy);color:#fff;
 font-size:12px;font-weight:900;border-radius:9px
}
.walk-pill{font-size:12px;color:#7b858f;background:#F3F6F8;padding:5px 8px;border-radius:999px}
.status{text-align:right;font-weight:900;font-size:13px}.ok{color:var(--cc-green)}.late{color:var(--cc-orange)}.bad{color:var(--cc-red)}
.risk{font-size:12px;margin-top:5px}.risk.safe{color:var(--cc-green)}.risk.tight{color:var(--cc-orange)}.risk.missed{color:var(--cc-red)}

.details{display:none;padding:0 18px 18px 23px}.connection.selected .details{display:block}
.details-actions{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid var(--line)}
.leg{border-top:1px solid var(--line);padding:14px 0}
.leg-head{display:flex;justify-content:space-between;gap:10px}
.leg-title{font-weight:900;color:var(--cc-navy)}
.direction{font-size:13px;color:#747f89;margin-top:3px}
.stop{display:grid;grid-template-columns:58px 1fr auto;gap:8px;margin-top:9px;font-size:13px}
.stop b{color:var(--cc-navy)}
.track{color:#087ABD;font-weight:900}
.old-track{text-decoration:line-through;color:#87929c;margin-right:5px}
.delay{font-size:12px;font-weight:900}
.transfer-block{
 margin:10px 0;padding:13px 14px;background:#EEF8FF;
 border-left:5px solid var(--cc-blue);border-radius:0 var(--radius-sm) var(--radius-sm) 0
}
.transfer-block b{color:var(--cc-navy)}
.transfer-block.tight{background:#FFF7EB;border-left-color:var(--cc-orange)}
.transfer-block.missed{background:#FFF0F1;border-left-color:var(--cc-red)}
.walk-summary{
 margin-top:8px;padding:11px 13px;background:#FFF7EE;border-left:4px solid var(--cc-orange);
 font-size:13px;border-radius:0 var(--radius-sm) var(--radius-sm) 0
}
.intermediate{margin-top:10px}
.intermediate button{border:0;background:#EAF7FF;color:#087ABD;font-weight:850;padding:7px 10px;border-radius:999px}
.stops-list{margin-top:8px;padding:10px 13px;background:var(--soft);font-size:12px;border-radius:var(--radius-sm)}
.stops-list div{padding:4px 0}

.map-column{
 position:sticky;top:18px;border:1px solid var(--line);padding:17px;background:#fff;
 box-shadow:var(--shadow);border-radius:var(--radius-xl);overflow:hidden
}
#map{height:610px;background:#EAF0F4;border-radius:var(--radius-lg);overflow:hidden}
.leaflet-control-zoom a{border-radius:10px!important}
.map-info{padding:12px 5px 2px;color:#6f7983;font-size:13px}
.map-legend{font-size:11px;color:#737d87}
.map-legend i{display:inline-block;width:18px;height:4px;margin:0 5px 2px 12px;border-radius:999px}
.map-legend .walk{background:var(--cc-orange)}.map-legend .ride{background:var(--cc-blue)}

.paging{display:flex;justify-content:center;gap:10px;margin-top:15px}
.error{
 margin-top:18px;background:#FFF0F1;border:1px solid #F8CCD0;border-left:5px solid var(--cc-red);
 padding:14px;color:#9e202a;border-radius:var(--radius-md)
}
.hidden{display:none!important}
#toast{
 position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
 opacity:0;z-index:300;background:var(--cc-navy);color:#fff;padding:11px 16px;
 transition:.2s;border-radius:999px;box-shadow:var(--shadow)
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:1100px){
 .workspace{grid-template-columns:1fr}
 .map-column{position:relative;top:0;order:-1}
 #map{height:430px}
}
@media(max-width:720px){
 .nav{border-radius:0 0 22px 22px}
 main{padding:0 14px 35px}
 .hero{padding-top:28px}
 h1{font-size:36px}
 .route-inputs{grid-template-columns:1fr}
 .swap{width:100%}
 .tools{display:grid;grid-template-columns:1fr 1fr}
 .seg{grid-column:1/-1}
 .primary{margin:0;grid-column:1/-1}
 .conn-main{grid-template-columns:1fr}
 .status{text-align:left}
 .clock{display:none}.navbtn{display:none}
 .search-card,.map-column{border-radius:22px}
}

.hero-train{position:absolute;right:-24px;top:-18px;width:min(610px,48vw);height:205px;background:url('/static/train_bg.svg') no-repeat right center/contain;opacity:.27;pointer-events:none;filter:drop-shadow(0 14px 22px rgba(1,23,73,.08))}
.hero > *:not(.hero-train){position:relative;z-index:1}
.via-row{margin-top:12px;display:grid;grid-template-columns:1fr;max-width:420px}
.mode-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;vertical-align:-3px;margin-right:7px;color:var(--cc-navy)}
.mode-icon svg{width:18px;height:18px;display:block;fill:currentColor}
.leg-title{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.line-pill,.walk-pill{display:inline-flex;align-items:center;gap:6px}
.recommended .times{color:#0A3B92}
@media(max-width:720px){.hero-train{width:240px;height:110px;right:-18px;top:8px;opacity:.20}.via-row{max-width:none}}

button:disabled{opacity:.55;cursor:wait}

.via-control-row{margin-top:12px}
.via-add{height:40px;border:1px dashed #A7B8C8;background:#F7FAFD;color:var(--cc-navy);padding:0 14px;border-radius:14px;font-weight:850}
.via-add:hover{border-color:var(--cc-blue);background:#EEF8FF}
.via-row{margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:9px;align-items:end;max-width:520px}
.via-field{min-width:0}.via-field input{width:100%}
.via-remove{width:44px;height:54px;border:0;border-radius:15px;background:#FFF0F1;color:var(--cc-red);font-size:24px;font-weight:900}
.via-remove:hover{background:#FFE3E6}
@media(max-width:720px){.via-row{max-width:none}}

.tool-select{display:flex;flex-direction:column;gap:5px;min-width:155px}
.tool-select label{font-size:10px;letter-spacing:1.2px;font-weight:900;color:var(--cc-navy);padding-left:4px}
.tool-select select{width:100%}
@media(max-width:720px){.tool-select{min-width:0;width:100%}}


/* v2.2.6 – gleichmäßige, ausreichend breite Bedienkacheln */
.tools{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:12px;
 align-items:stretch;
 margin-top:16px;
}
.tool-item{
 display:flex;
 flex-direction:column;
 gap:6px;
 min-width:0;
 width:100%;
}
.tool-item>label{
 display:flex;
 align-items:end;
 min-height:16px;
 padding-left:4px;
 color:var(--cc-navy);
 font-size:10px;
 line-height:1.2;
 font-weight:900;
 letter-spacing:1.05px;
 white-space:nowrap;
}
.tool-item input,
.tool-item select,
.tool-item>.ghost,
.tool-item>.primary,
.tool-item>.seg{
 box-sizing:border-box;
 width:100%;
 min-width:0;
 max-width:100%;
 height:54px;
 margin:0;
}
.tool-item input,
.tool-item select{
 border:1px solid #C8D2DC;
 background:#fff;
 padding:0 13px;
 outline:none;
 color:var(--cc-navy);
 font-weight:750;
 border-radius:var(--radius-md);
}
.tool-item-time input[type="datetime-local"]{
 min-width:0;
 width:100%;
 padding-left:13px;
 padding-right:10px;
 font-size:14px;
}
.tool-item input:focus,
.tool-item select:focus{
 border-color:var(--cc-blue);
 box-shadow:0 0 0 4px rgba(73,171,235,.14);
}
.tool-item>.ghost,
.tool-item>.primary{
 display:flex;
 align-items:center;
 justify-content:center;
 padding:0 14px;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
 font-size:14px;
 line-height:1;
}
.tool-item>.primary{
 margin:0;
 padding-left:18px;
 padding-right:18px;
}
.tool-item>.seg{
 display:grid;
 grid-template-columns:1fr 1fr;
 border:1px solid #C8D2DC;
 border-radius:var(--radius-md);
 overflow:hidden;
 background:#fff;
}
.tool-item>.seg button{
 min-width:0;
 width:100%;
 height:52px;
 padding:0 10px;
 border:0;
 border-radius:0;
 background:#fff;
 color:var(--cc-navy);
 font-weight:850;
 white-space:nowrap;
}
.tool-item>.seg button+button{border-left:1px solid #D8E0E7}
.tool-item>.seg button.active{background:var(--cc-navy);color:#fff}

@media(max-width:920px){
 .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
 .tools{grid-template-columns:1fr}
 .tool-item-search{grid-column:auto}
 .tool-item>.ghost,.tool-item>.primary{font-size:13px}
}