/* Coleoidea Seitenraster und responsive Grundstruktur */
.app{position:relative;width:min(100vw,177.7778vh);aspect-ratio:16/9;max-height:100vh;background:#fff;display:grid;grid-template-rows:162px minmax(0,1fr) 60px;overflow:auto}
header{height:142px;margin:20px 25px 0;border-bottom:.5px solid var(--line);display:grid;grid-template-columns:2fr 4fr 1fr;column-gap:15px;align-items:center;padding-bottom:20px}
.shell{min-height:0;margin:0 25px;display:grid;grid-template-columns:1fr 6fr;column-gap:15px;overflow:hidden}
aside{min-width:0;padding:20px 12px;overflow:auto}
main{min-width:0;min-height:0;padding:20px;overflow:auto}
.view{display:none}
.view.active{display:block;border-left:.125px solid #b8b8b8;margin-left:-21px;padding-left:20px}
@media(max-width:900px),(max-aspect-ratio:4/3){
.app{width:100%;min-height:100vh;max-height:none;aspect-ratio:auto;grid-template-rows:142px auto 60px}
header{height:122px;margin:20px 20px 0;grid-template-columns:2fr 4fr 1fr;column-gap:10px;padding-bottom:16px}
.shell{grid-template-columns:1fr;margin:0 20px;column-gap:0}
aside{border-bottom:.125px solid #b8b8b8;padding:12px}
main{padding:22px 16px}
.view.active{border-left:0;margin-left:0;padding-left:0}
}
header{position:relative;border-bottom:0;background:#fff}