@font-face {
    font-family: Belanosima;
    src: url('https://fonts.cdnfonts.com/css/belanosima');
}
@font-face {
    font-family: 'Open Sans';
    src: url('https://fonts.cdnfonts.com/css/open-sans');
}

:root {--accent:#507295; --textcolor:#333;}
*, *::before, *::after {box-sizing: border-box; font-family:inherit;}
html {-webkit-text-size-adjust:100%; accent-color:var(--accent); color:var(--textcolor); font:16px 'Open Sans', Arial, sans-serif; line-height:1.75; margin:0; padding:0;}
body {margin:0; padding:0;}

a {color:var(--textcolor); text-decoration-color:var(--accent); text-decoration-thickness:2px;}
.tags a {border:1px solid var(--accent); border-radius:15px; display:inline-block; font-size:14px; margin:2px; padding:2px 8px; text-decoration:none;}
a.bergfilm {background:hsl(80 40% 95%); border-color:hsl(80 40% 20%); color:hsl(80 40% 20%);}
a.doku {background:hsl(120 40% 95%); border-color:hsl(120 40% 20%); color:hsl(120 40% 20%);}
a.eintägig {background:hsl(160 40% 95%); border-color:hsl(160 40% 20%); color:hsl(160 40% 20%);}
a.feministisch {background:hsl(200 40% 95%); border-color:hsl(200 40% 20%); color:hsl(200 40% 20%);}
a.gratis {background:hsl(240 40% 95%); border-color:hsl(240 40% 20%); color:hsl(240 40% 20%);}
a.kinderfilm {background:hsl(280 40% 95%); border-color:hsl(280 40% 20%); color:hsl(280 40% 20%);}
a.kurzfilm {background:hsl(320 40% 95%); border-color:hsl(320 40% 20%); color:hsl(320 40% 20%);}
a.lgbtiq {background:hsl(360 40% 95%); border-color:hsl(360 40% 20%); color:hsl(360 40% 20%);}
a.openair {background:hsl(40 40% 95%); border-color:hsl(40 40% 20%); color:hsl(40 40% 20%);}

section {margin:0 auto; padding:0 10px; max-width:500px;}
header {margin:0 auto;}
footer {font-size:14px; padding:20px 10px; text-align:center;}
p {margin:15px 0 5px 0;}
ul, ol {margin:0; padding:0; padding-inline-start:10px;}
ul li, ol li {margin-inline-start:10px;}

h1, h2, h3, h4 {font-family:Belanosima, Arial, sans-serif; line-height:1.25;}
h1 {font-family:Belanosima, Arial, sans-serif; background:radial-gradient( var(--accent), var(--textcolor)); background-clip:text; color:transparent; margin:10px 0; text-align:center;}
.subdomain{font-variant:small-caps; letter-spacing:8px; word-break:break-all;}
nav{display:flex; justify-content:center;}
nav ul {display:flex; gap:10px; list-style-type:none; margin:5px auto 15px auto; -ms-overflow-style:none; /* Hide scrollbar in Internet Explorer and Edge */ overflow-x:auto; /* Enable horizontal scroll */ padding:0; scrollbar-width:none; /* Hide scrollbar in Firefox */}
nav ul::-webkit-scrollbar {display:none; /* Hide scrollbar in Webkit-based browsers (Chrome, Safari) */}
.menu-item {border-top:2px solid transparent; border-bottom:2px solid transparent; color:var(--textcolor); flex:none; padding:2px 5px; white-space:nowrap; /* Prevent breaking of text */}
.currentnav{border-top:2px solid var(--accent); border-bottom:2px solid var(--accent);}
.menu-item a {color:var(--accent); text-decoration:none;}
.currentnav a {color:var(--textcolor); text-decoration:none;}

.monotable {overflow-x:auto;}
table {border-collapse:collapse; margin:0 auto;}
td, th {border-bottom:1px solid #ccc; line-height:1.25; padding:5px 10px;}
td.tags {padding:0 5px;}
th {cursor:pointer;}
td.icononly {padding:5px 2px;}
tr.happening-today {background-color:#f2f6f8;}

.aligncenter {text-align:center;}
.alignright {text-align:right;}
.icon {height:18px; width:18px; margin-right:5px; vertical-align:bottom;}
a.icon {border:2px solid var(--accent);}
.festivale {color:var(--accent); font:bold 18px Belanosima, Arial, sans-serif;}


.header-inner {display:flex; flex-wrap:wrap; justify-content:center; gap:0 10px; margin-top:10px;}
.header-inner img {height:60px; flex-shrink:0;}