/* =====================================================
   eiti.de – statische HTML5-Version
   ===================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    color: #080d19;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.25;

    background: linear-gradient(
        to bottom,
        #fafaff 0,
        #dce0f5 270px,
        #7b86d1 620px,
        #202d70 100%
    );
    background-attachment: fixed;
}

a {
    color: #15295d;
    text-decoration: none;
}

a:hover {
    color: #0016a8;
    text-decoration: underline;
}

img,
svg {
    max-width: 100%;
}

a:focus-visible {
    outline: 2px solid #294cff;
    outline-offset: 3px;
}

/* Seitenbreite */

.page {
    width: 1000px;
    max-width: calc(100% - 32px);
    margin: 0 auto;
}

/* Obere Navigation */

.top-nav {
    position: relative;
    z-index: 10;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid #172d9e;
    border-radius: 0 0 5px 5px;

    background: linear-gradient(
        to bottom,
        #7189f6 0%,
        #304bd4 46%,
        #123bbd 100%
    );

    box-shadow: 0 1px 4px #555b92;
}

.top-nav > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-nav li {
    position: relative;
    margin: 0;
    padding: 0;
}

.top-nav > ul > li > a {
    display: block;
    min-height: 27px;
    padding: 5px 12px 4px;
    border-radius: 12px 12px 0 0;

    background: linear-gradient(
        to bottom,
        #7087f4,
        #273fc6
    );

    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 18px;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 1px #172a8d;
}

.top-nav > ul > li > a.active,
.top-nav > ul > li > a:hover {
    background: linear-gradient(
        to bottom,
        #dce4ff,
        #a9b8ed
    );
    color: #27314b;
    text-decoration: none;
    text-shadow: none;
}

/* Untermenü */

.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    min-width: 210px;
    margin: 0;
    padding: 5px;
    background: #cbd4ef;
    box-shadow: 0 4px 8px #26346a55;
    list-style: none;
}

.has-submenu:hover > .submenu,
.has-submenu:focus-within > .submenu,
.has-submenu.is-open > .submenu {
    display: block;
}

.submenu a {
    display: block;
    padding: 8px;
    color: #202b4c;
    font-size: 14px;
    text-transform: none;
}

.submenu a:hover {
    background: #e3e8f7;
    text-decoration: none;
}

/* Header-Panorama */

.site-header {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    border-radius: 0 0 5px 5px;

    background-color: #8996a8;
    background-image: url("img/canvas.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;

    box-shadow: 0 1px 3px #111b45;
}

/*
   Das Logo ist eine eigenständige Grafik.
   Es wird rechts im Header angezeigt.
   Das Logo muss einen transparenten Hintergrund haben,
   wenn das Panorama sichtbar bleiben soll.
*/

.header-logo {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;

    display: block;
    width: auto;
    height: 160px;
    max-width: none;

    object-fit: contain;
    object-position: right top;
}

/* Hauptfläche */

.sheet {
    overflow: hidden;
    border: 1px solid #2a4bc9;
    border-radius: 5px;
    background: #d7e0f5;
    box-shadow: 0 2px 4px #1b2b6655;
}

/* Zwei Spalten */

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 24px;
    min-height: 667px;
    padding: 10px 10px 20px 15px;
}

.content {
    min-width: 0;
}

.breadcrumbs {
    margin: 7px 0 36px;
    color: #10141e;
    letter-spacing: 0.3px;
}

/* Überschrift und Text */

.welcome {
    min-width: 0;
}

.welcome h1 {
    margin: 0 0 12px;
    color: #293143;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.2;
}

.welcome p {
    margin: 0 0 12px;
    line-height: 1.25;
}

.welcome .paragraph-space {
    height: 22px;
    margin: 0;
}

/* Fachgebietsliste */

.skills {
    margin: 0 0 25px;
    padding: 0 0 0 28px;
    list-style: none;
}

.skills li {
    position: relative;
    margin: 0 0 5px;
    color: #1d2b55;
    letter-spacing: 0.15px;
}

.skills li::before {
    position: absolute;
    left: -18px;
    color: #2547b9;
    font-weight: bold;
    content: "»";
}

/* Maskottchen */

.avatar {
    float: right;
    display: block;
    width: 170px;
    height: 210px;
    margin: 5px 0 12px 20px;
    object-fit: contain;
}

/* Text unter der Liste */

.welcome .creative {
    margin-top: 0;
    margin-bottom: 22px;
}

.welcome .team-title {
    margin-bottom: 16px;
}

.welcome .team-subtitle {
    margin-bottom: 12px;
}

.welcome strong {
    font-weight: bold;
}

.welcome small {
    font-size: 13px;
    letter-spacing: 0.3px;
}

/* Rechte Seitenleiste */

.sidebar {
    min-width: 0;
    padding-top: 0;
}

.side-module {
    margin: 0 0 10px;
}

.side-module h2 {
    min-height: 32px;
    margin: 0;
    padding: 7px 10px 5px;

    background: #164ed3;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
}

/* Seitenmenü */

.side-menu {
    margin: 0;
    padding: 0;
    background: #b4bfd9;
    list-style: none;
}

.side-menu li {
    min-height: 34px;
}

.side-menu li:nth-child(even) {
    background: #a9b7d6;
}

.side-menu li.selected {
    background: #899bbd;
}

.side-menu a {
    display: block;
    padding: 9px 10px 7px;
    color: #293550;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.side-menu a:hover {
    background: #d1d9ed;
    text-decoration: none;
}

/* Öffnungszeiten */

.opening-content {
    min-height: 72px;
    padding: 18px 5px 14px;
    background: #adbee7;
}

.opening-content p {
    margin: 0;
    padding-left: 0;
    line-height: 1.35;
    white-space: nowrap;
}

.opening-content .saturday {
    padding-left: 38px;
}

/* Footer */

.site-footer {
    position: relative;
    height: 46px;
    background: #164edb;
}

/* RSS-Icon */

.rss-icon {
    position: absolute;
    bottom: 16px;
    left: 6px;

    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;

    border: 1px solid #e1b45a;
    border-radius: 2px;
    background: linear-gradient(to bottom, #ffdf88, #ff9a19);
}

.rss-icon svg {
    display: block;
    width: 27px;
    height: 27px;
}

/* Tablet */

@media (max-width: 760px) {
    .page {
        max-width: calc(100% - 16px);
    }

    .top-nav {
        padding-right: 5px;
        padding-left: 5px;
    }

    .top-nav > ul {
        gap: 3px;
    }

    .top-nav > ul > li > a {
        padding-right: 7px;
        padding-left: 7px;
        font-size: 11px;
    }

    .site-header {
        height: 190px;
        background-size: cover;
    }

    .header-logo {
        height: 125px;
    }

    .layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 12px;
    }

    .sidebar {
        grid-row: 1;
    }

    .welcome h1 {
        font-size: 26px;
    }

    .avatar {
        width: 130px;
        height: auto;
    }
}

/* Smartphone */

@media (max-width: 430px) {
    .top-nav > ul > li > a {
        padding-right: 5px;
        padding-left: 5px;
        font-size: 10px;
    }

    .site-header {
        height: 150px;
    }

    .header-logo {
        height: 100px;
    }

    .welcome h1 {
        font-size: 23px;
    }

    .avatar {
        float: none;
        display: block;
        margin: 15px auto;
    }

    .opening-content p {
        white-space: normal;
    }
}