:root{
    --bg:#020913;
    --bg2:#061525;
    --panel:rgba(5,20,35,.92);
    --panel2:rgba(7,29,49,.94);
    --line:#123a5b;
    --line-bright:#1b73ad;
    --ice:#66c8ff;
    --ice2:#bcecff;
    --text:#eaf8ff;
    --muted:#7fa8c2;
    --input:#020b14;
    --red:#ff3e52;
    --green:#57d8a2;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100vh;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 50% -10%,rgba(0,145,255,.25),transparent 35%),
        radial-gradient(circle at 10% 40%,rgba(0,90,160,.13),transparent 30%),
        linear-gradient(145deg,#01060c 0%,#03111f 45%,#020912 100%);
}

body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.18;
    background-image:
        linear-gradient(rgba(90,190,255,.11) 1px,transparent 1px),
        linear-gradient(90deg,rgba(90,190,255,.11) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,black,transparent 85%);
}

a{color:inherit}

.top{
    position:sticky;
    top:0;
    z-index:20;
    min-height:84px;
    padding:12px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:rgba(2,10,19,.94);
    border-bottom:1px solid #14527c;
    box-shadow:0 5px 28px rgba(0,0,0,.55),0 0 25px rgba(0,130,230,.08);
    backdrop-filter:blur(12px);
}

.titleblock{display:flex;align-items:center;gap:14px;min-width:0}
.title-icon{
    width:48px;height:48px;flex:0 0 48px;
    display:grid;place-items:center;
    border:1px solid #2b91ce;
    color:var(--ice2);
    border-radius:8px;
    font-size:29px;
    text-shadow:0 0 14px #1ea6ff;
    background:linear-gradient(145deg,rgba(24,117,173,.24),rgba(1,13,25,.9));
    box-shadow:inset 0 0 18px rgba(40,168,255,.12),0 0 16px rgba(0,128,220,.12);
}

.eyebrow,.panel-label{
    color:#49baf4;
    letter-spacing:1.6px;
    font-size:10px;
    font-weight:bold;
}

.top h1{
    margin:2px 0 3px;
    font-size:23px;
    line-height:1.1;
    letter-spacing:.2px;
    text-shadow:0 0 12px rgba(60,190,255,.18);
}

.titleblock span{color:var(--muted);font-size:12px}
.top-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}

.ice-button,.fu-button{
    text-decoration:none;
    border:1px solid #3194d2;
    background:linear-gradient(145deg,rgba(15,69,106,.9),rgba(2,19,34,.98));
    box-shadow:inset 0 0 15px rgba(85,198,255,.09),0 0 13px rgba(0,126,220,.12);
    transition:.18s ease;
}

.ice-button{
    min-width:86px;
    padding:7px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    border-radius:7px;
    color:#d9f6ff;
    font-size:11px;
    font-weight:bold;
    letter-spacing:1.2px;
    clip-path:polygon(12% 0,88% 0,100% 18%,100% 82%,88% 100%,12% 100%,0 82%,0 18%);
}

.ice-button:hover,.fu-button:hover{border-color:#7bd7ff;box-shadow:0 0 18px rgba(40,174,255,.3),inset 0 0 18px rgba(65,191,255,.14);transform:translateY(-1px)}
.ice-symbol{font-size:21px;line-height:18px;color:#bfeeff;text-shadow:0 0 10px #32b8ff}

.user{color:#7ea6be;font-size:12px;white-space:nowrap}
.user a{margin-left:8px;color:#ff7180;text-decoration:none}
.user a:hover{text-decoration:underline}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green);margin-right:5px}

main{position:relative;z-index:1;padding:18px;max-width:1900px;margin:auto}

.intro-panel{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 15px;
    margin-bottom:15px;
    border:1px solid #12466c;
    border-left:3px solid #35aef2;
    background:linear-gradient(90deg,rgba(7,39,64,.86),rgba(3,18,31,.9));
    box-shadow:0 0 18px rgba(0,115,190,.08);
}
.ag-info{min-width:0}
.ag-list{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    column-gap:18px;
    row-gap:2px;
    margin-top:4px;
    color:#dff7ff;
    font-size:13px;
    line-height:1.25;
}
.ag-col{display:contents}
.ag-col div{white-space:nowrap}
.panel-status{color:#73a6c1;font-size:11px;letter-spacing:.8px;align-self:flex-start;margin-top:2px;white-space:nowrap}

.week{
    background:linear-gradient(145deg,rgba(5,22,38,.96),rgba(2,12,22,.96));
    border:1px solid #124265;
    margin:0 0 18px;
    padding:11px;
    box-shadow:0 8px 30px rgba(0,0,0,.28),inset 0 0 35px rgba(20,108,170,.035);
}

.week h2{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 10px;
    padding:0 2px;
    color:#dff7ff;
    font-size:18px;
}
.week h2>span:last-child{font-size:13px;color:#7199b1;font-weight:normal}
.week-badge{
    padding:4px 7px;
    border:1px solid #267eb0;
    color:#65caff;
    background:rgba(15,102,153,.15);
    font-size:9px!important;
    letter-spacing:1px;
    font-weight:bold!important;
}

.scroll{overflow-x:auto;padding-bottom:3px}
.scroll::-webkit-scrollbar{height:9px}
.scroll::-webkit-scrollbar-track{background:#020a12}
.scroll::-webkit-scrollbar-thumb{background:#14527a;border:2px solid #020a12}

table{border-collapse:collapse;min-width:1160px;width:100%;table-layout:fixed}
th,td{border:1px solid #123956}

/* Helle Trennlinien zwischen den einzelnen Wochentagen */
.dayhead:not(:last-child){border-right:2px solid #1c6389}
.subhead th:nth-child(3n){border-right:2px solid #1c6389}
tbody td:nth-child(3n){border-right:2px solid #1c6389}
.info-row td:not(:last-child){border-right:2px solid #1c6389}
th{padding:7px;font-size:12px}
.dayhead{
    color:#d9f6ff;
    background:linear-gradient(180deg,#0a3452,#062238);
    font-size:13px;
    letter-spacing:.2px;
    border-color:#1b6794;
}
.dayhead span{display:block}
.dayhead small{display:block;margin-top:2px;color:#6ca0ba;font-weight:normal;font-size:10px}
.subhead th{background:#061727;color:#63bce9;font-size:10px;letter-spacing:.8px;text-transform:uppercase;padding:5px}

td{height:48px;padding:3px;position:relative;background:rgba(1,10,18,.7)}
tbody tr:nth-child(even) td{background:rgba(5,25,41,.65)}

.entryform{display:grid;grid-template-columns:1fr 1.5fr .8fr 34px 34px;gap:4px;align-items:center}
input{
    width:100%;
    min-width:0;
    height:32px;
    background:var(--input);
    color:#e9f8ff;
    border:1px solid #1b4968;
    border-radius:3px;
    padding:7px 6px;
    font-size:12px;
    outline:none;
    box-shadow:inset 0 0 7px rgba(0,0,0,.45);
}
input::placeholder{color:#496d82}
input:focus{border-color:#42baf7;box-shadow:0 0 9px rgba(42,174,243,.2),inset 0 0 7px rgba(0,0,0,.4)}
input:disabled{color:#697d89;background:#101b24;border-color:#243846}

.save,.lock{
    height:32px;
    border:1px solid #245777;
    border-radius:3px;
    cursor:pointer;
    color:#e9faff;
    background:#062238;
    transition:.15s ease;
}
.save:hover{border-color:#54c9ff;background:#0a3a5a;box-shadow:0 0 10px rgba(49,177,244,.18)}
.lock:hover{border-color:#739ab0;background:#152a39}
.lock.is-locked{background:#35131a;border-color:#a43c4a}

.locked{background:rgba(53,12,19,.68)!important}
.redline{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--red);box-shadow:0 0 7px rgba(255,50,70,.6);z-index:3;pointer-events:none}

.info-row td{
    height:144px;
    min-height:144px;
    padding:7px;
    background:linear-gradient(180deg,rgba(4,25,41,.96),rgba(2,14,25,.96))!important;
    border-top:2px solid #1c6389;
    vertical-align:middle;
}
.day-info-cell{position:relative}
.info-title{
    display:inline-block;
    margin:0 0 4px 1px;
    color:#62c8f5;
    font-size:9px;
    font-weight:bold;
    letter-spacing:1.2px;
}
.infoform{
    display:grid;
    grid-template-columns:minmax(0,1fr) 34px;
    gap:4px;
    align-items:center;
}
.infoform textarea{
    width:100%;
    min-width:0;
    height:112px;
    resize:vertical;
    background:var(--input);
    border:1px solid #1b4968;
    border-radius:3px;
    color:#e9f8ff;
    font-family:inherit;
    font-size:11px;
    line-height:1.35;
    padding:7px 8px;
    outline:none;
    box-shadow:inset 0 0 7px rgba(0,0,0,.45);
}
.infoform textarea:focus{border-color:#42baf7;box-shadow:0 0 9px rgba(42,174,243,.2),inset 0 0 7px rgba(0,0,0,.4)}
.info-save{
    height:30px;
    border:1px solid #287da9;
    border-radius:3px;
    cursor:pointer;
    color:#dff8ff;
    background:#07304a;
    font-weight:bold;
}
.info-save:hover{
    border-color:#62d0ff;
    background:#0a4566;
    box-shadow:0 0 10px rgba(49,177,244,.18);
}
.day-info-text{
    min-height:112px;
    height:112px;
    padding:7px 8px;
    border:1px solid #1b4968;
    background:var(--input);
    color:#e9f8ff;
    border-radius:3px;
    font-size:11px;
    line-height:1.35;
    white-space:normal;
}
.empty-info{color:#496d82;font-style:italic}

footer{
    position:relative;
    z-index:1;
    text-align:center;
    padding:15px 15px 28px;
}

.fu-button{
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-width:300px;
    min-height:70px;
    padding:8px 15px;
    color:#e9f9ff;
    clip-path:polygon(5% 0,95% 0,100% 18%,100% 82%,95% 100%,5% 100%,0 82%,0 18%);
}

.fu-logo-box{
    width:58px;
    height:58px;
    flex:0 0 58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #64cfff;
    background:#edfaff;
    box-shadow:0 0 13px rgba(81,198,255,.2);
    overflow:hidden;
}
.fu-logo-box img{
    display:block;
    width:52px;
    height:52px;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.fu-caption{font-size:13px;letter-spacing:1px;font-weight:bold;text-transform:uppercase;color:#bfeeff}
.fu-arrow{margin-left:auto;color:#69cfff;font-size:18px}
.footer-note{margin-top:9px;color:#547b91;font-size:10px;letter-spacing:.6px}

/* Login */
.login{display:grid;place-items:center;padding:20px;min-height:100vh}
.loginbox{
    position:relative;
    width:min(470px,94vw);
    background:linear-gradient(145deg,rgba(5,25,42,.97),rgba(2,11,20,.98));
    border:1px solid #1d6591;
    border-top:2px solid #4ec4ff;
    padding:32px;
    box-shadow:0 0 40px rgba(0,99,165,.18),inset 0 0 35px rgba(26,142,207,.05);
}
.login-snowflake{font-size:42px;color:#8bdcff;text-align:center;text-shadow:0 0 18px #22a9ff;margin-bottom:4px}
.login-kicker{text-align:center;color:#4fb9ed;font-size:10px;letter-spacing:2px;font-weight:bold}
.loginbox h1{text-align:center;font-size:25px;line-height:1.15;margin:8px 0 7px}
.loginbox>p{text-align:center;color:#7198ad;font-size:13px;margin:0 0 18px}
.loginbox input{height:42px;margin:0 0 12px;font-size:14px}
.loginbox button{width:100%;height:42px;border:1px solid #36a8e5;background:linear-gradient(180deg,#0b4e76,#06283f);color:#e6f9ff;font-weight:bold;letter-spacing:1px;cursor:pointer}
.loginbox button:hover{box-shadow:0 0 18px rgba(41,176,245,.25);border-color:#80d9ff}
.error{margin-bottom:13px;padding:9px 10px;background:#3c151c;border:1px solid #a43d4c;color:#ffabb5;font-size:12px}
.login-info{display:block;width:max-content;margin:15px auto 0;color:#76cfff;text-decoration:none;font-size:11px;letter-spacing:1px}
.login-info:hover{text-decoration:underline}

@media(max-width:850px){
    .top{align-items:flex-start}
    .titleblock{align-items:flex-start}
    .title-icon{width:40px;height:40px;flex-basis:40px;font-size:24px}
    .top h1{font-size:18px}
    .eyebrow{font-size:8px}
    .top-actions{flex-direction:column-reverse;align-items:flex-end;gap:5px}
}

@media(max-width:700px){
    .top{padding:10px}
    .top-actions .user{font-size:10px}
    main{padding:8px}
    .intro-panel{padding:10px}
    .week{padding:7px}
    .week h2{font-size:15px;flex-wrap:wrap}
    .week h2>span:last-child{font-size:11px}
    table{min-width:1120px}
    .entryform{grid-template-columns:90px 130px 70px 32px 32px}
    input{font-size:11px;padding:6px 5px}
    .fu-button{min-width:250px;min-height:64px}.fu-logo-box{width:50px;height:50px;flex-basis:50px}.fu-logo-box img{width:45px;height:45px}
}