:root {
      --content-max-width: 1150px;
      --header-height: 90px;
      --menu-height: 48px;
      --footer-height: 40px;
    } 

    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      background: #f8f9fa;
    }

    .site-header,
    .site-footer {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6c757d;
      background: linear-gradient(135deg, #e9ecef, #dee2e6);
      background-image: url('header.png');
      border: 1px dashed #adb5bd;
    }

    .site-header {
      min-height: var(--header-height);
      border-bottom:4px solid #0f5c4f;
      font-size:24px;
    }

    .site-footer {
      min-height: var(--footer-height);
      margin-top: auto;
      background-color:#444;
      color:#ccc;
      border-top:6px solid #999;
    }

    .content-wrap {
      width: 100%;
      max-width: var(--content-max-width);
      margin: 0 auto;
      padding-inline: 12px;
    }

    .menu-bar {
      min-height: var(--menu-height);
      background: #ffffff;
      border-bottom: 1px solid #dee2e6;
    }

    .menu-bar .nav-link,
    .lang-switcher .btn {
      font-weight: 500;
    }

    .main-area {
      _flex: 1;
      width: 100%;
      padding: 24px 0;
    }

    .left-panel,
    .content-panel {
      min-height: 420px;
      background: #ffffff;
      border: 1px solid #dee2e6;
      text-align:left;
      border-radius: 0.2rem;
      padding: 10px;
      box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);
    }

    .panel-placeholder {
      min-height: 100%;
      _display: flex;
      padding:10px;
      color: #6c757d;
      _border: 1px dashed #ced4da;
      border-radius: 0.2rem;
      _padding: 1rem;
      _background: #f8f9fa;
    }

    @media (max-width: 991.98px) {
      .main-area {
        padding: 16px 0;
      }

      .left-panel,
      .content-panel {
        min-height: 220px;
      }
    }

    @media (max-width: 767.98px) {
      .site-header {
        min-height: 60px;
      }

      .menu-inner {
        gap: 0.75rem;
      }

      .menu-left,
      .menu-right {
        width: 100%;
      }

      .menu-left .nav {
        justify-content: center;
      }

      .menu-right {
        display: flex;
        justify-content: center;
      }
    }

    .pmenu {
        text-align:left;
    }
    
    .pmenu a{
        display:block;
        width:100%;
        padding:5px;
        padding-left:10px;
        background-color: #fcfcfc;        
        text-decoration: none;
        border-radius:5px;
        border:1px solid #ccc;
        border-left:5px solid #ccc;
        margin-bottom:5px;
        color:#1b7e7d;
        font-weight:bold;
    }

    .proj_img_open {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills box, crops if needed */
    }
        .projekt_group_img {
  width: 100%;
  height: 220px;   /* same height for all images */
  overflow: hidden;
  border-radius: 8px;
        }

    .projekt_group {
        font-size:18px;
        font-weight:bold;
        border-bottom:2px solid #f1f1f1;
        margin-top:20px;
    }

    .cv_period {
        width:160px;
    }

    .piclist {
        width: 100%;
        height: 100px;   /* same height for all images */
        overflow: hidden;
        border-radius: 8px;
        margin-bottom:10px;
    }

    .piclist_img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* fills box, crops if needed */        
    }

    .menu_act{
        background-color:#f2f2f2;
        color:#800;
        border-radius:2px;
    }
    
    .menu_act a:visited {       
        color:#000;
       
    }

    .menu-bar {
        _background: linear-gradient(0deg,rgba(236, 236, 236, 1) 0%, rgba(255, 255, 255, 1) 100%);
        background-color:#444;
        border-top:2px solid #ccc;
        border-bottom:1px solid #888;
    }

    .menu-bar a {
        color:#eee;
    }

    .menu-bar .menu_act a {
        color: #000;
    }