body > header {
    margin: 1ch !important;
    padding: 1ch;
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--box-bg) 65%, transparent);
    border: 1px solid var(--graphical-fg);
}
body > header div {
    max-inline-size: var(--eff-line-length);
    margin-inline: auto;
}
body > header * {
    margin: 0;
    padding: 0;
}
/****************** flash-glow animation ******************/
/* attract attention to the full text search field */
.flash-glow {
    border-color var(--accent);
    animation: flashGlow 700ms ease;
}
/* Keyframes for animation */
@keyframes flashGlow {
    0% {
        box-shadow: 0 0 0 color-mix(in srgb, var(-accent) 0%, transparent);
        /* transform: scale(1); */
    }
    30% {
        box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 100%, transparent);
        /* transform: scale(1.03); */
    }
    100% {
        box-shadow: 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
        /* transform: scale(1); */
    }
}
/****************** main-menu header_row_1 ******************/
/* Container */
header > #header_row_1 {
    margin-bottom: 1ch;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
}

/* Form streckt sich auf 100% */
header #header_row_1 form {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    flex: 1 1 auto;
    width: auto;
    max-inline-size: var(--eff-line-length);
}

header > #header_row_1 form button[type="submit"] {
  display: none;
}

/* Visible frame for search field, width in ch to match placeholder width */
header > #header_row_1 > form > #search-container {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid var(--graphical-fg);
    border-radius: 4px;
    background: transparent;
    width: 100%;           /* allow the container to take all unused space in row */
    max-width: 25ch;       /* default: just large enough for the placeholder string */
    overflow: hidden;
    transition: all 600ms ease; /* let search field grow and shrink slowly */
}

/* search container fills unused space in row */
header > #header_row_1 > form > #search-container > input {
    width: 100%;
    border: none;   /* hide the frame of the search field, use frame */
    outline: none;  /* of the container instead. */
    background: transparent;
    box-sizing: border-box;
    font: inherit;
    font-family: var(--subtitle-font);
}
/* On hover or focus, let search field grow to maximum width. */
header > #header_row_1 > form > #search-container:focus-within,
header > #header_row_1 > form > #search-container:hover {
    border-color var(--accent);
    max-width: 100%;
    padding: 0.35em 0.5em;
    box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 100%, transparent);
}
/* Also grow the font of the placeholder */
header > #header_row_1 > form > #search-container > input:focus,
header > #header_row_1 > form > #search-container > input:hover {
    font-family: inherit;
}
/****************** main-menu header_row_2 ******************/
#main-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#main-menu > * {
    list-style: none;
    align-items: center;
}

#main-menu .tool-bar > li { padding:0; }

/* hide checkbox  */
#toggle {
  display: none;
}

/* Label always fill the whole container */
#main-menu > label {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
   menu z-index: 1;
  }

/* Headlines h1 is Link to self.homepage */
#main-menu > h1 > a {
    padding-right: 2rem; {# Distance Brand logo to hamburger for wrap without overlap#}
}
h1, .h1{
    z-index: 1; /* Standard über Label */
    font-size: 2.3rem;
    font-weight: unset;
}
/****************** Page main section ******************/
h2, .h2 {font-size:2rem;font-weight:bold}
h3, .h3 {font-size:1.5rem;font-weight: normal;}
h4, .h4 {font-size:1.2rem;font-weight:bold;}
h5, .h5 {font-size:1.2rem;font-weight:normal;}
h6, .h6 {font-size:1.1rem;font-weight:normal;}
main {margin-top: 3ch; marign-bottom: 3ch;}
.sub-title, sub-title {font-size: 0.8em; font-family: var(--subtitle-font);}
form { padding-top: calc(1 * var(--rhythm));}
form table {width: 100%;}
form table {
  border-collapse: separate;   /* default is collapse; required for border-spacing */
  border-spacing: 0 2rem;      /* horizontal vertical — here 12px vertical gap between rows */
}
form input[type="text"], input:not([type]) {width: 100%; max-with: 100%; display: block;}
form input[type="submit"] {font-size: 4rem;}
/****************** Page main section ******************/

#main-menu > label:after {
    position: absolute;
    right: 0;
    top: 0;
    content:"\2261";
    font-size: 3rem;
    line-height: calc(2 * var(--rhythm));
    display: inline-block;
}

{# checked means hamburger visible, dropdown menu is hidden #}
#toggle:checked ~ label {
    z-index: 1;
}
#toggle:checked ~ menu {
    display: none;
}

{# not checked means the dropdown menu is visible, opened #}
#toggle:not(:checked) ~ label {
    z-index: 3;
}
#toggle:not(:checked) ~ menu {
    display: block;
    z-index: 3;
}
/****************** Page footer section ******************/
footer menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    gap: var(--gap);
}
footer * { color: var(--color-secondary) !important;}
/****************** Wide Screen ******************/
@media screen and (min-width: 500px) {
    #main-menu {
        z-index: auto;
        flex-direction: row;
        align-items: center;
    }
    #main-menu > h1 > a {
    padding-right: 0; {# For wide screen is no hamburger therefore no padding needed#}
    }
    #main-menu > label:after,
    #main-menu > label {
        display: none; {# Hide hamburger on wide screen #}
    }
    #main-menu > menu,
    #toggle:not(:checked) ~ menu,
    #toggle:checked ~ menu {
        display: flex;
        flex-direction: row;
        flex-grow: 1;
        justify-content: center;
        z-index: auto;
    }
}
/****************** End of header_footer.css ******************/
