/* CSS Reset */
*, *::before, *::after{
    box-sizing: border-box; 
}

*{
    margin: 0; 
    padding: 0; 
}

ul, ol {
    list-style: none; 
}

html:focus-within{
    scroll-behavior: smooth; 
}

input, button, textarea, select{
    font: inherit; 
}

body {
    line-height: 1.5;
}

h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

a:not([class]){
    text-decoration-skip-ink: auto; 
    color: currentColor;
    cursor: pointer;
}

img, picture, svg, video, canvas{
    max-width: 100%;
    height: auto; 
    vertical-align: middle; 
    font-style: italic; 
    background-repeat: no-repeat; 
    background-size: cover;
}


@media (prefers-reduced-motion: reduce){
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

body, html{
    height: 100%; 
    scroll-behavior: smooth; 
}    
/* End Reset */
 
    
    @font-face {
        font-family: 'Atkinson Hyperlegible';
        font-style: normal;
        font-weight: 400;
        src: 
            /* url('../fonts/OpenSans-Regular.ttf'),
            url('../fonts/OpenSans-Regular.woff') format('woff'), */
            url('../fonts/Atkinson-Hyperlegible-Regular-102a.woff2') format('woff2');
        /* IE9 Compat Modes */
    }

    @font-face {
        font-family: 'Atkinson Hyperlegible';
        font-style: normal;
        font-weight: 700;
        src: 
            /* url('../fonts/OpenSans-SemiBold.ttf'),
            url('../fonts/OpenSans-SemiBold.woff') format('woff'), */
            url('../fonts/Atkinson-Hyperlegible-Bold-102a.woff2') format('woff2');

    }

    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 400;
        src: 
            /* url('../fonts/OpenSans-Regular.ttf'),
            url('../fonts/OpenSans-Regular.woff') format('woff'), */
            url('../fonts/OpenSans-400-600-700-800-latin.woff2') format('woff2');
        /* IE9 Compat Modes */
    }

    @font-face {
        font-family: 'Open Sans';
        font-style: normal;
        font-weight: 700;
        src: 
            /* url('../fonts/OpenSans-SemiBold.ttf'),
            url('../fonts/OpenSans-SemiBold.woff') format('woff'), */
            url('../fonts/OpenSans-400-600-700-800-latin.woff2') format('woff2');

    }

    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: 
            /* url('../fonts/OpenSans-SemiBold.ttf'),
            url('../fonts/OpenSans-SemiBold.woff') format('woff'), */
            url('../fonts/GoogleMaterialIcons.woff2') format('woff2');

    }

    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 20px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
    }

    a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
        cursor: default;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        margin: 0;
        padding: 0;
        border: none;
        font: inherit;
        font-size: 100%;
        vertical-align: baseline;
    }   

    *, ::after, ::before {
        box-sizing: border-box;
        scroll-behavior: smooth
    }

    @media (prefers-reduced-motion:reduce) {
        *, ::after, ::before {
            -webkit-animation-delay: -1ms;
            animation-delay: -1ms;
            -webkit-animation-duration: 1ms;
            animation-duration: 1ms;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
            background-attachment: initial;
            scroll-behavior: auto;
            transition-delay: 0s;
            transition-duration: 0s
        }
    }


    html, textarea, input, p {
        font-family: "Open Sans", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-size: 1rem;
        font-weight: 400;
        color: inherit;
        background-color: inherit;
        -webkit-tap-highlight-color: transparent;
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    h2 { font-size: 150%; font-weight:800; margin: 0 0 5px 0; }
    h3 { font-size: 100%; font-weight:700; margin: 8px 0 0 0; color: #336; }
    select { padding: 6px; background-color: #fff; border-radius: 8px; border: 1px solid #aaa;  }

    a, button, button i { cursor: pointer; }

    :root {
        --icon-size: 36px;
        --menu-bg: #fff;
        --menu-fg: #333;
        --menu-hover-bg: #f0f0f0;
        --menu-shadow: 0 4px 24px rgba(0,0,0,0.06);
      }

      body {
        background: #ececec;
      }

      /* NAV */
      /* Header */
      .nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 16px;
        background: var(--menu-bg);
        position: relative;
        z-index: 10;
        box-shadow: var(--menu-shadow);
      }
      .logo {
        font-size: 1.6rem;
        font-weight: bold;
        letter-spacing: 1px;
        color: var(--menu-fg);
        user-select: none;
        white-space:nowrap;
        text-decoration: none;
        transition: color 0.2s;
      }
      .logo:hover {
        color: #1976d2;
      }
      /* Hamburger Icon Button */
      .nav-toggle {
        background: none;
        border: none;
        cursor: pointer;
        display: none;
        outline: none;
        padding: 8px;
      }
      .nav-toggle .material-icons {
        font-size: 40px;
        color: var(--menu-fg);
      }
      /* Navigation Menu */
      .nav-menu {
        display: flex;
        gap: 5px;
      }
      .nav-menu a {
        text-decoration: none;
        color: var(--menu-fg);
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 15px;
        transition: background 0.2s;
        border-radius: 10px;
        padding: 6px 12px;
      }
      .nav-menu a:hover {
        background: var(--menu-hover-bg);
      }
      .nav-menu .material-icons {
        font-size: var(--icon-size);
        margin-bottom: 3px;
      }
  
/* END NAV */

    .hidden { display: none; }
    .centered { text-align: center; }

    main { margin: auto; max-width: 750px; min-width:280px; padding: 10px 8px 120px 8px; 
            min-height: 100vh; }

    .horizontal { text-align: center; margin: 10px 0; }
    .button { padding: 10px 25px; 
        border-radius: 20px; 
        border: 0; 
        font-weight: 700; 
        font-size: 95%; 
        letter-spacing: 1px; 
        text-decoration: none; 
        text-align:center; 
        cursor:pointer; 
        display:inline-block; 
        /* white-space: nowrap;  */
        box-shadow: rgba(7, 7, 18, 0.6) 0 6px 12px -10px;
    }
    
    .Adminbox { background-color: #231D7B; border-radius: 10px; padding: 8px 14px; max-width: 750px; 
        color: #fff; margin:0 auto 20px auto; 
        box-shadow: rgba(7, 7, 18, 0.6) 0 10px 20px -10px;
    }
    .Adminbox textarea { width: 100%; height: 6rem; border-radius: 6px; box-sizing: border-box; resize: none; font-size: 115%; }
    h3.adminpanel { width: 100%; text-align: center; color: #fff; font-weight: 700; }
    .ButtonAdmin { background-color: #f3d10f; margin: 10px 0 5px 0; color: #000; }
    .ButtonAdmin:hover { background-color: #f8e67e; }
    .ButtonUser { background-color: #00c17e; color: #fff; }
    .ButtonUser:disabled { background-color: #6e7773; color: #fff; }
    .ButtonUser:hover { background-color: #6ef79e; color: #333; }
    .ButtonUser:disabled:hover { background-color: #6e7773; color: #fff; }
    .buttondisc { background-color: #5a5cc6; color: #fff; font-size: 16px; font-weight: 800; border: 0; border-radius: 20px; padding: 1px; line-height: 50%; vertical-align: -4px; }
    .buttondiscdisabled { background-color: #8087a9; }
    .minibutton { padding: 4px 8px; border-radius: 10px; border: 0; font-weight: 700; 
        font-size: 95%; text-decoration: none; text-align:center; cursor:pointer;color:#000;
        box-shadow: rgba(7, 7, 18, 0.6) 0 5px 10px -15px;
    }
    .miniestbutton { padding: 2px 10px; letter-spacing: 1px; border-radius: 4px; border: 0; font-weight: normal; font-size: 80%; 
        text-decoration: none; text-align:center; cursor:pointer;color:#000;
        box-shadow: rgba(7, 7, 18, 0.6) 0 5px 10px -5px;
        display: grid;
        align-items: center; 
     }
    .undobutton { border: 1px solid rgb(60, 0, 0,.8); background-color:#0000007a; margin: 0 10px; color: #fff; }
    .delbutton { border: 1px solid rgba(60, 0, 0,.8); background-color:#ffe6e6; margin: 5px 10px 5px 0; color: #000 }
    .recoverbutton { border: 1px solid rgba(0, 60, 0); background-color:#d2ffd5; margin: 5px 10px 5px 0; color: #000; }
    .bigicon { font-size: 80px !important; }
    .iconbutton { background-color:rgba(0, 0, 0, 0); border: 0;}
    p.instruction { color: #fff; margin: 0 0 10px 0; }
    .qtext { padding: 10px; background-color: #fff; border:  0; color: #006; }
    .qr { width:100% }
    .QRgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
    .QRgrid div:last-child { justify-self: stretch; padding: 20px; }
    .fullwidth { width: 100% }
    .maxanswerfieldset { display:inline-block; width:fit-content; background-color: #fff; border: none; border-radius: 6px; padding: 2px 8px; margin-right: 5px; }
    .maxanswerfields { border: none; width: 30px; text-align: center; color: #336; }
    .maxanswerfields:focus { font-size: 24px; outline: none !important; }
    .adminrole div { display: flex; align-items: flex-start; } 
    .adminrole input { margin: 6px 6px 0 0 ;}
    hr.admindivider { height: 2px; color: #fff; widtH:100%; background-color: #fff; border:none; margin: 8px 0; }
    .participants { display: flex; flex-wrap: wrap; margin-bottom:15px; }
    .participants div {
        box-shadow: rgba(170, 170, 170, 0.4) 4px 4px 4px 0px;
        background-color: #f3d10f;
        white-space: pre-wrap;
        overflow: visible;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
        padding: 3px 20px;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(107, 107, 107);
        border-radius: 5px;
        opacity: 1;
        align-self: flex-start;
        order: 1;
        min-height: 0px;
        width: max-content;
        flex-grow: 0;
        height: max-content;
        margin: 0px 8px 8px 0px;
        flex-grow:1;
        text-align: center;
        max-width: 20%;
        min-width: fit-content;
    }
    .participants .editable {
        cursor: pointer;
    }
    .participants .me {
        background-color: #5ae271;
        cursor: pointer;
    }

    .bold { font-weight: 700; }
    .green { color: #090; }

    .smallprint, a.smallprint { font-size: 90%; line-height: 140%; margin-bottom: 5px; }
    a.smallprint { color: #666; text-decoration: none; cursor: pointer; }

    .textfill {
        border: 2px solid black;
        background-color: rgb(255, 238, 141);
        resize: none;
        overflow: hidden;
        position: relative;
        margin: 0 20px 20px 0;
        display: flex;
        justify-content: center;
        border-color: rgba(20,20,20, 0.15);
        border-image: none;
        background-color: #ffee8d;
        box-shadow: rgb(170, 170, 170) 8px 8px 8px 0px;
        animation-name: reveal;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out; 
      }

    .rot_1  { rotate: 0.5deg;  }
    .rot_2 { rotate: -0.1deg; }
    .rot_3 { rotate: -0.3deg; }
    .rot_4 { rotate: 0.2deg; }
    .rot_5 { rotate: -0.3deg; }

      .textfill-textarea, .hidden-clone {
        width: 100%;
        height: 100%;
        padding: 15px 20px;
        box-sizing: border-box;
        resize: none;
        border: none;
        background: transparent;
        outline: none;
        white-space: pre-wrap; /* Zeilenumbruch aktivieren */
        overflow: hidden;
        overflow-wrap: break-word;
        font-family: 'Open Sans', sans-serif;
        text-align: center;
      }
      .hidden-clone {
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
      }

      .speakerbar {
        display: flex; 
        justify-content: space-between; 
        width: 100%; 
        margin-bottom: 15px;
      }

      .timerandnext { white-space:nowrap;margin: 0px 20px 10px 0px;display:flex; }

      .stickies { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
      .stickies form { margin: 0px 15px 0 5px; }
      .stickies .textfill-textarea, .stickyarea {
        min-width: 40%;
        max-width: 100%;
        height: 250px;
        order: 4;
        min-height: 240px;
        z-index: 2;
    }
    .stickies i {
        order: 10;
        padding:20px;
        cursor: pointer;
        width: 120px;
        height: 120px;
    }

    .stickies i {
        order: 10;
        padding:20px;
        cursor: pointer;
        width: 120px;
        height: 120px;
    }
    
    .stickyedit { width: 100%; display: block; height: 100%;}
    /* .stickies textarea:focus, .stickyarea:focus-within {
        outline: none !important;
        border: 2px solid rgba(210, 181, 16, 0.835);
        box-shadow: 0 0 10px #719ECE;
    }
    .stickyedit:focus {
        outline: none !important;
    } */
    .stickyarea { position:relative; }
    .stickyarea button.saveanswer { 
        position: absolute; 
        bottom: 6px; 
        right: 6px; 
        z-index: 50; 
        font-size: 15px; 
        padding: 8px 25px; 
        background-color: #231d7b;
        color: #f3d10f;
        font-weight: normal;
        display:none;
    }
    .stickyarea:focus-within button { display:unset; }

    .ABnarrow { width: 300px; display: flex; flex-flow: column; }
    
    .timer {
        background-color: #231D7B;
        min-width: 90px;
        max-width: 90px;
        min-height: 40px;
        width: 90px;
        flex-grow: 1;
        height: max-content;
        margin: 0px 10px 0px 0px;
        z-index: 2;
        white-space: pre-wrap;
        overflow: visible;
        font-size: 20px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        letter-spacing: 2px;
        line-height: 1.4;
        padding: 5px 10px;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(107, 107, 150);
        border-radius: 10px;
        opacity: 1;
    }

    a i.material-icons,#showqr { cursor: pointer; }  
    .downloads a { text-decoration: none; margin: 2px 0; clear: both; display: block; }
    .downloads i { font-size: 20px; color: rgb(255, 255, 255); padding: 0 10px 0 0; vertical-align: text-bottom; }

    ul.inputs li { margin-bottom: 3px; }
    ul.r-inputs {
        color: #006;
        font-size: 80%;
        padding-right:10px;
        position: relative;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        display: grid;
        justify-items: stretch;
        overflow: auto;
        overflow-wrap: break-word;
        column-gap: 12px;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        /* grid-auto-flow: row; */
        border-radius: 0px;
        opacity: 1;
        align-self: flex-start;
        min-width: 100%;
        order: 14;
        min-height: 0px;
        height: fit-content;
        flex-grow: 0;
        flex-shrink: 0;
        margin: 20px 0px 0px;
        z-index: 6;
    }
    ul.r-inputs li { 
        /* background: -webkit-linear-gradient(rgb(251, 247, 228, 0.5) 0%, rgb(254, 235, 180, 0.5) 100%); */
        background-color: #fff;
        box-shadow: rgb(170, 170, 170, 0.3) 4px 4px 8px 0px;
        overflow: hidden;
        justify-content: space-between;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(107, 107, 107, 0.6) rgba(107, 107, 107, 0.8) rgba(107, 107, 107, 0.8) rgba(107, 107, 107, 0.6);
        border-radius: 10px;
        padding: 8px 10px 28px 11px;
        opacity: 1;
        cursor: pointer;
        align-self: stretch;
        min-width: 50%;
        order: 1;
        flex-grow: 1;
        height: auto;
        margin: 0px 8px 8px 0px;
        z-index: 7;
        width: 100%;
        display: flex;
        position: relative;
    }
    ul.r-inputs div, ul.r-inputs li, ul.r-inputs i {
        cursor: pointer;
    } 
    .heart-on  { position: absolute; right: 10px; bottom: 5px; color: #f55; z-index:100; 
        text-shadow: rgba(255, 255, 236, 0.9) 0px 0px 8px;
     }
    .heart-off { position: absolute; right: 10px; bottom: 5px; color: rgba(85, 0, 0, 0.1);   }

    .r-hearts { vertical-align: middle;
        /* background: -webkit-linear-gradient(left, rgb(255, 214, 214) 0%, rgb(255, 255, 255) 100%); */
        /* border-radius: 10px; */
        border-top: 1px solid rgba(0, 0, 0, 0.2); 
        background-color: #fff;
        padding-left: 10px; 
        position: relative;
        left: -10px;
        margin: 10px 0 5px 0;
    }
    .r-hearts::after { 
        content: 'favorite';
        font-family: 'Material Icons';
        padding-left: 5px;
        position:relative;top:2px;
        color: rgb(224, 117, 117);
    }

    .profile, .intro {
        background-color: rgb(255, 255, 255);
        box-shadow: rgba(7, 7, 18, 0.6) 0 10px 20px -10px;
        align-self: center;
        min-width: 100%;
        max-width: 600px;
        order: 2;
        min-height: 60px;
        height: max-content;
        flex-grow: 0;
        flex-shrink: 0;
        width: 100%;
        margin: 0px 10px 0 0;
        z-index: 8;
        overflow: visible;
        justify-content: flex-start;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(107, 107, 107);
        border-radius: 10px;
        padding: 15px;
        opacity: 1;
    }
    .profile label {
        color: #666;
        clear:both;
        display: block;
        margin-bottom: 10px;
    }
    .listtabs {
        display: flex; justify-content: left;
        gap: clamp(4px, 2vw, 8px);
        padding: 0 clamp(10px,2vw,20px);
        overflow-x:scroll;
    }
    .listtabs a {
        text-decoration: none;
        /* padding: 10px 20px 5px 20px; */
        padding: 3px clamp(8px, 2vw, 20px); 

    }
    .listtabs div {
        background-color: #8087a9;
        color: #fff;
        font-weight: 600;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        padding:5px 0;
    }
    .listtabs div.selected {
        background-color: #37489e;
    }

    .profile input, .profile select, .intro input[type=email] {
        clear: both;
        display: block;
        border: 1px solid #aaa;
        border-radius: 8px;
        padding: 4px 8px; 
        outline: 0;
        width: 100%; 
    }

    /* .intro { margin: 20px 0; } */
    .intro input[type=email] { display:inline-block; max-width: 300px; margin: 5px 10px 5px 0;}

    .profile button {
        margin-top: 10px;
    }

    #signupForm input {
        padding-right: 30px; /* Platz für den Haken */
        position: relative;
    }
    #signupForm label {
        position: relative;
    }
    /* Haken für gültige Felder */
    #signupForm span.check {
        color: rgb(0, 100, 0);
        position: absolute;
        right: 10px;
        top: 70%;
        transform: translateY(-50%);
        font-size: 1.2em;
        z-index: 20;
    }
 
    .alert { color: #c00; margin: 10px 0; }

    @keyframes reveal {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
  
    @keyframes pulse {
        from { transform: scale3d(0.95, 0.95, 0.95);  }
        80% { transform: scale3d(1.07, 1.07, 1.07); }
        to { transform: scale3d(1, 1, 1); }
    }
  
    .testmarker { 
        /* background-color: #fcc; */
        text-shadow: 
        0 0 5px rgb(255, 255, 255),
        0 0 15px rgb(255, 108, 108),
        0 0 10px rgb(255, 108, 108);
        /* position: relative; */
    }

    .flash { margin: 15px 0; border:1px solid; border-radius: 5px; 
        padding: 10px 20px; display: inline-block; 
        animation-name: pulse;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        display:inline-block; }
    .f_alert { color: #cc0; background-color: #ffc; }
    .f_error { color: #600; background-color: #fdd; }
    .f_, .f_message { color: #060; background-color: #dfd;
        box-shadow: rgba(7, 7, 18, 0.3) 0 10px 20px -10px;
    }

    /* Dashboard Projects Table */
    /* .t-table { border: 1px solid #339; border-radius: 10px; margin: 10px 2px 0 0; }
    .t-table i { color: #aaa; position: relative; top:3px; }
    .t-table a { text-decoration: none;  }
    .t-header i { color: inherit; }
    .t-header, .t-row { display: block; padding: 3px 5px; }
    .t-header { border-top-left-radius: 10px; border-top-right-radius: 10px; font-weight: 600; 
                background-color: #cad1f0; border-bottom: 1px solid #a4aac7; }
    .t-row { border-bottom: 1px solid #ddd; }
    .t-row:last-child { border-bottom: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; }
    .t-row:nth-child(odd) { background-color: #f4f4f4; }
    .item { display: table-cell; width: 120px; margin: 2px 5px; vertical-align:top; padding: 3px 5px; }
    .t-session .item:nth-child(1) { min-width: 250px; }
    .t-session .item:nth-child(2) { width: 20px; text-align: right; }
    .t-session .item:nth-child(3) { width: 20px; text-align: right; }
    .t-session .item:nth-child(4) { min-width: 120px; }
    .t-session .item:nth-child(5) { width: 120px; text-align: right;}
    .t-session .item:nth-child(6) { width: 30px; text-align: right; }
    
    .t-question .item:nth-child(1) { min-width: 40px; text-align: right; }
    .t-question .item:nth-child(2) { width: 100%; }
    .t-question .item:nth-child(3) { min-width: 40px; text-align: right; }
    .t-question .item:nth-child(4) { min-width: 40px; text-align: right; } */

    .context-menu {
        background-color: #fff; 
        width:100px; 
        border-radius: 8px; 
        border: 1px solid #006; 
        padding: 5px; 
        z-index: 100;
        position:absolute;
        display:none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
    }

    .setting { cursor: pointer; }
    .context-menu a, .context-menu a.visited { color: #006; text-decoration: none; cursor: pointer; }
    .context-menu i { padding: 0 4px; }

    /* FOOTER */
    /* FOOTER */
    /* FOOTER */
    /* footer {
        position: sticky;
        position: -webkit-sticky;
        bottom: 0;
        background-color: #dee6f2;
        min-height: 105px;
        overflow: hidden auto;
        justify-content: center;
        height: max-content;
        max-height: 220px;
        z-index: 50;
        box-shadow:  0px -5px 13px -4px rgba(0,0,0,0.45);
    } */

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 125px;
    overflow: hidden;
    background-color: #dee6f2;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    z-index: 50;
    box-shadow:  0px -5px 13px -4px rgba(0,0,0,0.45);
    transition: transform 0.3s ease-in-out;
}

.progress-bar-bg {
    width: 100%;
    height: 3px;
    background: rgb(204, 209, 246);
    position: absolute;
    top: 0;
    left: 0;
  }
.progress-bar-bg-rate {
    width: 100%;
    height: 3px;
    background: rgb(204, 209, 246);
    position: absolute;
    top: 3px;
    left: 0;
  }
  .progress-bar-fill {
    height: 100%;
    background: #1e8c39;
    width: 0%;
    transition: width 0.3s;
  }
  .progress-bar-fill-rate {
    height: 100%;
    background: rgba(107, 193, 190, 0.6);
    width: 0%;
    transition: width 0.3s;
  }

    .p-list-wrapper { 
        /* overflow-x: auto; */
        overflow-y: auto;
        padding: 0 8px;
        box-sizing: border-box;
        max-height: 110px;
        width: 100%;
        scrollbar-width: thin;
        scrollbar-color: #aaa transparent;
    } 
    
    .page-rate, .page-yes-no-other {
        height: 90px;
        overflow-y: auto;
    }

    .p-list { display: flex; width:100%; 
        /* flex-wrap: wrap;  */
        /* justify-content: center; align-items: center; 
        flex-wrap:nowrap; max-height: 110px; overflow-x: auto; */
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        /* min-width: max-content; */
        margin: 0 auto;
        padding-bottom: 20px;
    }

    /* .page-rate .p-list, .page-yes-no-other .p-list {
        flex-wrap: wrap;
        min-width: unset;
        gap:2px;
    } */

    .page-rate .stickies, .page-yes-no-other .p-stickies {
        display:none;
    }

    .p-item {
        width: 100px; 
        min-width: 100px; 
        height: 40px;
        text-align: center;
        margin: 3px 2px;
        height: fit-content;
        /* flex-shrink: 0; */
    }

    .p-name {
        background-color: #3f4887;
        white-space: nowrap; /* Verhindert Zeilenumbrüche */
        overflow: hidden;
        text-overflow: ellipsis; /* Zeigt "..." am rechten Rand bei Überlänge */
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        text-align: center; /* Text linksbündig ausrichten */
        line-height: 1.4;
        padding: 1px 10px;
        border-radius: 2px;
        align-self: center;
        width: 100%;
        height: max-content;
        border: 1px solid #8e97bc;
        margin-right: 4px;
    }

    .p-name_alt {
        background-color: #3f4887;
        white-space: pre-wrap;
        overflow: hidden;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
        text-align: center;
        line-height: 1.4;
        padding: 1px 10px;
        border-radius: 2px;
        align-self: center;
        width: 100%;
        height: max-content;
        border: 1px solid #8e97bc;
        margin-right: 4px;
    }

    .p-stickies {
        width: 99%;
        position:relative;
        min-height: 43px;
    }

    .p-mini-sticky {
        background-color: rgb(252, 218, 118);
        box-shadow: 0px 0px 0px 1px rgba(200,172,90), rgba(0,0,0, 0.2) 2px 3px 4px 0px;
        overflow: hidden;
        overflow-wrap: break-word;
        justify-content: flex-start;
        border-style: solid;
        border-width: 1px;
        /* border-color: rgba(200, 172, 90, 0.8); */
        border-bottom: 4px solid rgba(252, 218, 118);
        /* border-radius: 0px; */
        padding: 2px;
        opacity: 1;
        align-self: flex-start;
        /* max-width: 90%; */
        order: 1;
        min-height: 38px;
        max-height: 38px;
        width: 95%;
        /* flex-grow: 1; */
        height: 35px;
        margin: 3px 0px 4px;
        z-index: 4;
        white-space: pre-wrap;
        font-size: 3.5px;
        font-weight: 400;
        color: rgba(39, 44, 60, 0);
        text-shadow: rgb(41, 40, 40) 1px 1px 2px;
        line-height: 1.4;
        max-height: 27px;
        height: max-content;
        /* position:relative; */
        left: 2px;
        text-align: center;
    }

    .p-mini-sticky {
        width: 46px;
        position:absolute;
        top:0; 
    }
    .p-stickies .p-mini-sticky:nth-child(1) { left:0; z-index: 1; }
    .p-stickies .p-mini-sticky:nth-child(2) { left:51px; z-index: 5; }
    .p-mini-sticky:nth-child(3) { left:23px; z-index: 2; }
    .p-mini-sticky:nth-child(4) { z-index: 3; }
    .p-mini-sticky:nth-child(5) { z-index: 4; }
    .sn4 .p-mini-sticky:nth-child(3) { left:18px; }
    .sn4 .p-mini-sticky:nth-child(4) { left:35px; }
    .sn5 .p-mini-sticky:nth-child(3) { left:12px; }
    .sn5 .p-mini-sticky:nth-child(4) { left:23px; }
    .sn5 .p-mini-sticky:nth-child(5) { left:36px; }


    /* .p-stickies {
        width: 99%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 43px;
        gap: 3px; 
    } */

    .p-admin-mini-sticky {
        background-color: rgb(252, 218, 118);
        box-shadow: 0px 0px 0px 1px rgba(200,172,90), rgba(0,0,0, 0.2) 2px 3px 4px 0px;
        overflow: hidden;
        overflow-wrap: break-word;
        justify-content: flex-start;
        border-style: solid;
        border-width: 1px;
        border-bottom: 4px solid rgba(252, 218, 118);
        padding: 2px;
        opacity: 1;
        align-self: flex-start;
        order: 1;
        min-height: 38px;
        max-height: 38px;
        width: 40px;
        flex-grow: 1;
        height: 35px;
        margin: 3px 0px 4px;
        z-index: 4;
        white-space: pre-wrap;
        font-size: 3.5px;
        font-weight: 400;
        color: rgba(39, 44, 60, 0);
        text-shadow: rgb(41, 40, 40) 1px 1px 2px;
        line-height: 1.4;
        max-height: 27px;
        height: max-content;
        position:relative;
        left: 2px;
        text-align: center;
        margin-right: 5px;
    }

    .todelete {
        background-color: #c55;
        box-shadow: 0px 0px 0px 1px rgb(200, 90, 90), rgba(0,0,0, 0.2) 2px 3px 4px 0px;
        border-bottom: 4px solid rgb(200, 90, 90);
    }

    .pstate-0 {}
    .pstate-3 { filter:grayscale(1);  }
    .pstate-4 .p-mini-sticky { display:none; }
    
    .pstate-1 .p-name { background-color: #009b65; border-color: #6fc0ab;  }
    .pstate-2 .p-name { background-color: #1f54bf; border-color: #1f54bf;  }
    .pstate-3 .p-name { opacity: 0.5; }

    .p-done div { filter: grayscale(1); }
    .p-done>div:first-child { opacity: 0.5;}

    .stickyfordelete { background-color: #aa425e; border-color: #6b172d; }

    .intro p { margin: 5px 0 15px 0; } 

    .summary {
        width: 100%; 
        text-align: center;
        padding-top:3px;
    }

    .nomore {
        border: 1px solid red; 
        color: #666;
    }

/* Report */
.answer { margin-bottom: 8px; }

/* Basic modal styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    backdrop-filter: blur(6px);
    z-index:100;
}

.modal {
    background: #fff;
    padding: 20px 25px 25px 25px;
    width: calc(100% - 20px);
    min-width: 320px;
    max-width: 320px;
    min-height: 80px;
    border-radius: 8px;
    position: fixed;
    top:100px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}

.qrmodal {
    background: #231D7B;
    padding: 20px 25px 25px 25px;
    width: calc(100% - 20px);
    min-width: 320px;
    max-width: 320px;
    min-height: 80px;
    border-radius: 8px;
    position: fixed;
    top:100px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    transition: opacity 0.3s ease;
}

.modal h3 {
    margin:0 0 20px 0;

}

.modal input[type=submit] {
    width: 100%;
    margin: 5px 0 10px 0;
}

    .modal input[type=text] {
    clear: both;
    display: block;
    border: 1px solid #999;
    border-radius: 8px;
    padding: 6px 8px;
    margin: 10px 0; 
    outline: 0;
    width: 100%; 
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
}

/* Showing modal */
.modal.show {
    display: block;
}

/* Hide page scroll when modal is open */
body.modal-open {
    overflow: hidden;
}


    /* 500-750px: Nur Icons, kein Text */
    @media (min-width: 501px) and (max-width: 750px) {
        .nav-menu a {
          font-size: 0; /* Text ausblenden, aber nicht das Icon */
          padding: 8px 4px;
        }
        .nav-menu .material-icons {
          margin-bottom: 0;
          font-size: 30px;
        }
        .nav-menu a span:last-child { /* Der Text-Span */
          display: none;
        }
        .logo {
          font-size: 1.1rem;
        }
        .nav-menu {
          gap: 9px;
        }
      }
      /* Responsive: Mobile */
      @media (max-width: 500px) {
        .nav-header {
          padding: 6px 16px;
        }
        .logo {
          font-size: 1.0rem;
        }
        .nav-toggle {
          display: block;
          position: absolute;
          top: 0px;
          right: 16px;
          padding-top: 3px;
          z-index: 200; /* Höher als das Menü */
        }
        .nav-toggle .material-icons {
            font-size: 30px;
         }
        .nav-menu {
          display: none;
          flex-direction: column;
          position: fixed;
          gap: 0;
          top: 0;
          left: 0;
          right: 0;
          background: var(--menu-bg);
          box-shadow: var(--menu-shadow);
          padding-top: 20px; /* Damit Menü nicht unter Header/Logo/Toggle liegt */
          z-index: 100;
          animation: menuDown 0.25s cubic-bezier(0.42, 0, 0.58, 1);
        }
        .nav-menu.open {
          display: flex;
        }
        .nav-menu a {
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          font-size: 18px;
          padding: 10px 24px;
          border-radius: 0;
          border-bottom: 1px solid #e0e0e0;
        }
        .nav-menu .material-icons {
          margin-bottom: 0;
          margin-right: 18px;
          font-size: 30px;
        }
        @keyframes menuDown {
          0% { transform: translateY(-100%); opacity: 0; }
          100% { transform: translateY(0); opacity: 1; }
        }
      }



@media (max-width:300px) {
    main {
        padding: 0 2px;
    }
    
    .p-list { flex-wrap:nowrap; max-height: 110px; overflow-x: auto; }
    
}

@media (max-width:500px) {
    .stickies { grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); }
    .stickies .textfill-textarea, .stickyarea {
      height: 180px;
      order: 4;
      min-height: 180px;
      z-index: 2;
  }

  .stickies form { margin: 0px 6px 0 5px; }

    .stickies .textfill-textarea, .stickyarea { 
        height: 180px;
    }

    .textfill {
        margin: 5px 6px 9px 5px;
        box-shadow: rgb(170, 170, 170, .3) 5px 5px 5px 0px;
    }
    .speakerbar { 
        margin-bottom: 0;
    }
    .speakerbar h2 { margin-bottom: 5px; }
    
}

@media (min-width:501px) {
    .stickies .textfill-textarea, .stickyarea { 
        height: 340px;
        min-height: 300px;
    }
}