/*
made by motionarts as CC BY-NC-SA
https://motionarts.at
*/

@font-face {
    font-family:'Source Sans Pro';
    src: url('../fonts/sourcesanspro-bold-webfont.woff2') format('woff2'),
    	url('../fonts/sourcesanspro-bold-webfont.woff') format('woff');
	  font-style: normal;
    font-weight: bold;
      font-display: swap;
}
@font-face {
    font-family:'Source Sans Pro';
    src: url('../fonts/sourcesanspro-bolditalic-webfont.woff2') format('woff2'),
    	url('../fonts/sourcesanspro-bolditalic-webfont.woff') format('woff');
	  font-style: italic;
    font-weight: bold;
	   font-display: swap;
}

@font-face {
    font-family:'Source Sans Pro';
    src: url('../fonts/sourcesanspro-regular-webfont.woff2') format('woff2'),
    	url('../fonts/sourcesanspro-regular-webfont.woff') format('woff');
	  font-style: normal;
    font-weight: normal;
      font-display: swap;
}
@font-face {
    font-family:'Source Sans Pro';
    src: url('../fonts/sourcesanspro-italic-webfont.woff2') format('woff2'),
    	url('../fonts/sourcesanspro-italic-webfont.woff') format('woff');
	  font-style: italic;
    font-weight: normal;
	   font-display: swap;
}

@font-face {
    font-family:'Source Sans Pro';
    src: url('../fonts/sourcesanspro-semibold-webfont.woff2') format('woff2'),
    	url('../fonts/sourcesanspro-semibold-webfont.woff') format('woff');
	  font-style: normal;
    font-weight: 300;
      font-display: swap;
}
@font-face {
    font-family:'Source Sans Pro';
    src: url('../fonts/sourcesanspro-semibolditalic-webfont.woff2') format('woff2'),
    	url('../fonts/sourcesanspro-semibolditalic-webfont.woff') format('woff');
	  font-style: italic;
    font-weight: 300;
	   font-display: swap;
}

/* ===========================================
   BODY
 =========================================== */

body {
    object-fit: contain;
		padding: 0 0.1em;
    margin: 0 auto;
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 1.2em;
		font-weight: normal;
		line-height: 1.4em;
    color: #111;
    z-index: 50 !important;
}

  .bg-pattern {
      height: 100%;
      width: 100%;
      margin: 0 auto;
      background-image: url("../images/bg_pattern.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  /* -------------------------------------------
   BODY TABLET
   ------------------------------------------- */

  /* responsive breakpoints */
  @media screen and (min-width: 450px) and (max-width: 849px) { /* evl. < 955 => ab <= 954 */

  body {
		font-size: 1.1em;
		line-height: 1.3em;
    margin: 0;
    }
  }

  /* -----------------------------------------
   BODY MOBILE (< 450px)
   ------------------------------------------- */
   
  /* responsive breakpoints */
  @media screen and (max-width: 449px) {
  
  body {
    height: 100%;
    width: 100%;
		padding: 0;
    margin: 0;
		font-size: 1em;
		line-height: 1.1em;
  }

  .bg-pattern {
    background-image: none;
  }
}

/* ===========================================
  BASICS
 =========================================== */
strong {
		font-weight: bold;
    color: #222;
}

em {
		font-style: italic;
}

p {
		color: #111;
		font-family: Source Sans Pro, Helvetica, sans-serif;
		font-weight: normal;
		text-transform: none;
    line-height: 1.5em;
		display: block;
		max-width: 100%;
    margin: 0;
    padding: 0;
}

sup {
  position: relative;
  top: -0.2em;
  font-size: 0.6em;
  line-height: 1;
}

q {
		font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
		color: #222;
		font-family: Source Sans Pro, Helvetica, sans-serif;
		font-weight: bold;
		letter-spacing: 0.05em;
		text-transform: none;
}

ul, ol {
		padding: 0 0.5em 0 1.5em;
}

li {
		padding: 0 0 0 0;
    line-height: 1.3em;
} 

a {
		color: #500000;
		text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-decoration-color: #640000; 
    font-weight: normal;
    line-height: 1;
    font-weight: bold;
}

  a:focus, a:hover {
    font-weight: bold;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    color: #aa1400;
    text-decoration-color: #640000;
    line-height: 1;
  }

button {
		border-radius: 6px;
		margin: 0.25em 0.5em 0.25em 0.5em;
		padding: 0.5em 1em 0.5em 1em;
		text-align: center;
		text-decoration: none;
		font-size: 1.2em;
		cursor: pointer;
}

  /* ===========================================
   PRIMARY
   =========================================== */

  .primary-container {
    background-color: rgb(253, 253, 253);
    max-width: 910px;
    margin: 0.5em auto; /* ← centers the block */
    padding: 0.5em 1em;
    display: flex;
    flex-direction: column;
    min-height: 100vh;      /* so footer doesn't float mid-screen */
    border-radius: 6px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 200 !important;
  }

  /* -------------------------------------------
   PRIMARY TABLET
   ------------------------------------------- */

  /* responsive breakpoints */
  @media screen and (min-width: 450px) and (max-width: 849px) { /* evl. < 955 => ab <= 954 */

    .primary-container {
      margin: 0 auto; /*← centers the block */
      min-width: 95vw;
      padding: 0.3em;
    }
  }

  /* -----------------------------------------
   PRIMARY MOBILE (< 450px)
   ------------------------------------------- */
   
  /* responsive breakpoints */
  @media screen and (max-width: 449px) {

    .primary-container {
      margin: 0 auto; /* ← centers the block */
      width: 100%;
      padding: 0;
    }
  }

  /* ===========================================
   HEADER
   =========================================== */

  .header {
    display: flex;
    justify-content: space-between;
    margin: 0;
    flex-wrap: wrap;
    line-height: 1;
  }

  .logo-container {
    margin: 0 auto;
    width: 60%;
    height: auto;
  }

  div.logo-container a {
    line-height: normal;
    justify-content: center;
  }

  img.logo {
    width: 100%;
    height: 9em;
    line-height: 9em;
    padding: 0.5em;
  }

  /* ===========================================
   LANGUAGES NAV
   =========================================== */

  /*.language-nav {
    margin-left: auto; /* pushes nav to the right in the flex row 
  }*/

   /* .languages-wrapper {
    display: flex;
    gap: 0.2em;
   padding: 0.3em 0.5em 0 50em; 
    margin: 0;
    font-size: 1.1em;
    text-transform: uppercase;
    font-weight: bold;
    list-style: none;
  }

  .languages-wrapper li a {
    color: #991200;
    text-decoration-color: #740000;
    font-weight: bold;
    padding: 0.1em 0.5em 0.1em 0.5em;
    line-height: 1;
  }

  .languages-wrapper a:focus, .languages-wrapper li a:hover {
    font-weight: bold;
    color: #991200;
    text-decoration-color: #740000;
    background-color: rgb(245, 223, 200);
    border-radius: 6px;
    padding: 0.1em 0.5em 0.1em 0.5em;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  }

  .languages-wrapper li a.active {
    font-weight: bold;
    color: #ffffff;
    text-decoration-color: #fff;
    background-color: rgb(206, 63, 0);
    border-radius: 6px;
    padding: 0.1em 0.5em 0.1em 0.5em;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  } */

  /* -------------------------------------------
   LANGUAGES TABLET
   ------------------------------------------- */

  /* responsive breakpoints 
  @media screen and (min-width: 700px) and (max-width: 849px) { /* evl. < 955 => ab <= 954

    .languages-wrapper {
      padding: 0.3em 0.5em 0 28em;
    }
  }

  /* responsive breakpoints 
  @media screen and (min-width: 450px) and (max-width: 699px) { /* evl. ???

    .languages-wrapper {
      padding: 0.3em 0.5em 0 15em;
    }
    
    .language-nav {
      margin-bottom: 1em;
    }
  }

  /* -------------------------------------------
   LANGUAGES MOBILE
   ------------------------------------------- */

  /* responsive breakpoints 
  @media screen and (max-width: 449px) {

    .languages-wrapper {
      padding: 0.3em 0.5em 0 4em;
    }
  }

  /* screen-reader-only by default */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link.sr-only:focus {
    position: static;      
    width: auto;           
    height: auto;         
    margin: 0;
    padding: 0.5em 0 0.5em 0.5em;            
    clip: auto;             
    overflow: visible;
    white-space: normal;
    color: #000;
    text-decoration-color: #000;
    background-color: #fff;
    padding: 0.1em 0.5em 0.1em 0.5em;
    font-size: 1.1em;
    font-weight: bold;
    }

  /* ===========================================
   MAIN NAV
   =========================================== */

  .main-nav {
    display: flex;
    border-radius: 6px;
    margin: 0.5em 0;
    background-color: rgb(206, 63, 0);
    color: #ffffff;
    font-weight: bold;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  }

  /* -------------------------------------------
   SUBMENUS BASISZUSTAND: immer erstmal zu
   ------------------------------------------- */

  .main-nav .submenu {
    list-style: none;
    display: none;
  }

  /* Zeige Submenu, wenn der zugehörige Link aria-expanded="true" hat */
  .nav-item > a[aria-expanded="true"] + .submenu,
  .submenu-item > a[aria-expanded="true"] + .submenu {
    display: block;
  }

  .icon-arrow-right,
  .icon-arrow-down {
    display: inline-flex;
    align-items: left;
    justify-content: left;
    font-family: inherit;
    margin: 0 0.2em;
    padding: 0;
    width: 0.9em;
  }

/*   .icon-arrow-right {
    /* padding: 0 0.1em 0 0.1em; 
  } */

/*   .icon-arrow-down { 
    /* padding: 0 0 0.2em 0; 
  } */

  /* Rechtsdreieck */
  .icon-arrow-right::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-top: 0.35em solid transparent;
    border-bottom: 0.35em solid transparent;
    border-left: 0.45em solid currentColor;
  }

  /* Runterdreieck */
  .icon-arrow-down::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-left: 0.35em solid transparent;
    border-right: 0.35em solid transparent;
    border-top: 0.45em solid currentColor;
  }

  /* Standard: nur Arrow-Right anzeigen */
  .main-nav .icon-arrow-down {
    display: none;
  }

  .main-nav ul {
    display: flex;
    align-items: stretch;
    padding: 0;
    margin: 0;
  }

  .main-nav li {
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .main-nav a {
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.605em;
    margin: 0 0.66em 0 0.66em;
    transition: color 0.2s ease-in-out;
    text-decoration: none;
    color: inherit;
    line-height: 1.1em;
  }

  .main-nav a .nav-label {
    text-decoration: underline;
  }

  .main-nav a:focus, .main-nav a:hover {
    color: #991200;
    text-decoration-color: #740000;
    background-color: rgb(245, 229, 223);
    border-radius: 6px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);
  }

  .main-nav a.active {
    background-color: rgb(245, 229, 223);
    border-radius: 0;
    color: #900000;
    text-decoration-color: #740000;
    border-radius: 6px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  }

  /* Wenn aria-expanded="true": Right ausblenden, Down einblenden */
  .main-nav a[aria-expanded="true"] .icon-arrow-right {
    display: none;
  }

  .main-nav a[aria-expanded="true"] .icon-arrow-down {
    display: inline-block;
  }

  /* ===========================================
   SUBLEVEL MENUs >= 850
   =========================================== */
  
  /* responsive breakpoints */
  @media screen and (min-width: 850px) {

    .main-nav > ul > li:last-child > ul {
      left: auto;
      right: 0;  /* rechts ausrichten */
    }

    .submenu-item .nav-label {
      padding: 0;
      margin: 0;
    }

    .submenu.level-1 {
      /* display: none; */
      position: absolute;
      top: 100%; /* aligns below the parent link */
      left: 0;
      min-width: 15em;
      background-color: rgba(240, 240, 240, 0.96);
      padding: 0.4em;
      margin: 0;
      border-radius: 6px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 500;
    }

    .submenu.level-1 a {
      color: #333;
      text-decoration-color: #222;
      padding: 0.4em;
      margin: 0;
      transition: color 0.2s ease-in-out;
    }

    .submenu.level-1 li {
      /* background-color: rgb(245, 229, 223); */
      padding: 0.2em 0;
      margin: 0;
    }
      
    .nav-item {
      position: relative; /* needed for submenu absolute positioning */
    }

    /* Hover/Fokus im Submenu */
    .submenu.level-1 a:hover,
    .submenu.level-1 a:focus {
      background-color: rgb(206, 63, 0);
      border-radius: 6px;
      color: #fff;
      text-decoration-color: #fff;
      padding: 0.4em;
    }
    
    .submenu.level-1 a.active {
      background-color: rgb(206, 63, 0);
      border-radius: 6px;
      color: #fff;
      text-decoration-color: #fff;
      padding: 0.4em;
    }

    .submenu.level-2 a {
      color: #222;
      text-decoration-color: #111;
      border-radius: 6px;
      font-size: 1em;
      font-weight: lighter;
      padding: 0.4em;
      margin: 0;
      transition: color 0.2s ease-in-out;
      text-transform: none;
    }

    .submenu.level-2 li {
      background-color: #fff;
      padding: 0;
      margin: 0;
    }

    .submenu.level-1 a:hover,
    .submenu.level-1 a:focus {
      background-color: rgb(206, 63, 0);
      border-radius: 6px;
      color: #fff;
      text-decoration-color: #fff;
      padding: 0.4em;
    }

    .submenu.level-2 a.active {
      font-weight: bold;
      color: #fff;
      text-decoration-color: #fff;
      background-color: rgb(206, 63, 0);
      padding: 0.4em;
    }

    .hamburger-menu {
        display: none !important;
    }

    .closebutton {
        display: none !important;
    }
  }

  /* ===========================================
   MAIN NAV TABLET
   =========================================== */

  /* responsive breakpoints */
  @media screen and (min-width: 450px) and (max-width: 849px) { /* evl. < 955 => ab <= 954 */
    .main-nav {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: 50vw;
      background-color: rgba(240, 240, 240, 0.90);
      z-index: 900;
      padding: 1em 0.5em 2em 0.5em;
      font-size: larger;
      box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
      overflow-y: auto;
      transition: transform 0.3s ease-in-out;
    }
  }
  /* ===========================================
   MAIN NAV MOBILE
   =========================================== */
   
  /* responsive breakpoints */
  @media screen and (max-width: 449px) {

    .main-nav {
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      height: 100%;
      width: 85vw;
      background-color: rgba(240, 240, 240, 0.90);
      z-index: 900;
      padding: 1em 0 2em 0;
      box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
      overflow-y: auto;
      transition: transform 0.3s ease-in-out;
    }
  }

  /* ===========================================
   RESTLICHES MAIN NAV TABLET + MOBILE
   =========================================== */

    /* responsive breakpoints */
  @media screen and (max-width: 849px) { /* evl. < 955 => ab <= 954 */

    .main-nav.open {
      display: block;
    }

    .hamburger-menu {
      display: inline-block;
      margin: 2em 0;
      border: none;
      font-size: 2em;
      color: #991200;
      cursor: pointer;
      height: 60px;
      border-radius: 6px;
      background-color: rgb(245, 229, 223, 0.90);
      padding: 0 0.5em;
      box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 950;
    }

    .main-nav.open .closebutton {
      display: block;
      margin: 0.25em 0.5em 0.75em 0;
      padding: 0.25em 0.5em;
      background-color: #fff;
      box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
      border-radius: 6px;
      color: #000000;
      cursor: pointer;
      border: none;
      font-size: 2em;
      font-weight: bold;
      z-index: 1001 !important;
      transition: transform 0.3s ease; /* animation if hoover event */
    }

    /* reset nav stacking for vertical layout */
    .main-nav ul {
      display: block;
      margin: 0;
      background-color: #333;
      border-radius: 6px;
    }

    .main-nav li {
      display: block;
      list-style: none;
    }

    .main-nav a {
      display: block;
      list-style: none;
      font-size: 1.1em;
      padding: 0.4em;
    }

    .main-nav a:focus, .main-nav a:hover {
      border-radius: 6px;
      font-weight: bold;
      background-color: rgb(206, 63, 0);
      color: #fff;
      text-decoration-color: #fff;
      padding: 0.4em;
    }

    .main-nav a.active {
      font-weight: bold;
      background-color: rgb(206, 63, 0);
      color: #fff;
      border-radius: 6px;
      text-decoration-color: #fff;
      padding: 0.4em;
    }

    .submenu.level-1 {
      background-color: rgba(240, 240, 240, 0.97);
      border-radius: 0;
      padding: 0.4em;
      margin: 0;
      font-size: 1.05em;
      line-height: 1.1em;
    }

    .submenu.level-1 a {
      font-weight: bold;
      color: #333;
      text-decoration-color: #222;
      padding: 0.4em;
      margin: 0;
      font-size: 1.05em;
      transition: color 0.2s ease-in-out;
    }

    .submenu.level-1 li {
      padding: 0;
      margin: 0;
    }

    .submenu.level-2 {
      background-color: rgb(255, 255, 255);
      padding: 0 0 0.3em 0;
      padding: 0.4em;
      margin: 0;
      font-size: 1em;
    }

    .submenu.level-2 a {
      font-weight: bold;
      color: #222;
      text-decoration-color: #111;
      font-size: 0.95em;
      padding: 0.4em;
      text-transform: none;
      font-size: 1em;
    }

    .submenu.level-2 li {
      padding: 0;
      margin: 0;
    }

    .submenu.level-1 a:focus, 
    .submenu.level-1 a:hover, 
    .submenu.level-2 a:focus, 
    .submenu.level-2 a:hover {
      border-radius: 6px;
      padding: 0.4em;
      background-color: rgb(206, 63, 0);
      border-radius: 6px;
      color: #fff;
      text-decoration-color: #fff;
      transition: color 0.2s ease-in-out;
    }

    .submenu.level-2 a:focus, 
    .submenu.level-2 a:hover {
      text-transform: none;
    }

    .submenu.level-1 a.active {
      background-color: rgb(206, 63, 0);
      color: #fff;
      border-radius: 6px;
      text-decoration-color: #fff;
      padding: 0.4em;
    }

    .submenu.level-2 a.active {
      background-color: rgb(206, 63, 0);
      border-radius: 6px;
      color: #fff;
      text-decoration-color: #fff;
      padding: 0.4em;
      text-transform: none;
    }
  }

  /* ===========================================
   MAIN
   =========================================== */

  /* -------------------------------------------
   TITLE
   ------------------------------------------- */

  .title {
    padding: 0.8em;
    margin: 0.5em 0;
    background-color: #333;
    border-radius: 6px;
    font-size: 1.4em;
    color: #ffffff;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  }

  /* -------------------------------------------
   FILES & IMAGES
   ------------------------------------------- */

  .files {
    margin: 0.25em 1em 0 1em;
    padding: 0;
  }

  .files li {
    text-align: left;
    list-style: none;
  }

  /* generelles Bildverhalten */
  .files img {
    display: block;
    width: auto;      /* Verhältnis erhalten */
    max-width: 100%;  /* nicht breiter als Container */
    margin-left: auto;
    margin-right: auto;
  }

  /* "große" Dokumente: Landscape & PDFs */
  .files-large img {
    max-height: 400px;   /* Deine Standard-Höhe für Groß */
  }

  /* "kleine" Bilder: Portrait */
  .files-small img {
    max-height: 200px;   /* genau die Hälfte → "kleines Bild" */
  }

  figcaption {
    font-size: 0.8em;
    text-align: center;
    font-style: italic;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 1em;
  }

  .icon-copyright::before {
    content: "© ";
  }

  .file-link {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5em;
    text-decoration: none;
    line-height: 1;
    max-width: 90%;
    flex-wrap: nowrap;
    font-weight: bold;
    padding: 0 0.5em;
  }  
      
  .file-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 0.9em;
    width: 0.9em;
    height: 1.1em;
    border: 0.1em solid currentColor;
    border-radius: 0.05em;
    background:
    linear-gradient(currentColor 0 0) 0.15em calc(1px * 6)  / 0.6em 1px no-repeat,
    linear-gradient(currentColor 0 0) 0.15em calc(1px * 11)  / 0.6em 1px no-repeat,
    linear-gradient(currentColor 0 0) 0.15em calc(1px * 16)  / 0.6em 1px no-repeat;
  }

  .file-icon::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-top: 0.3em solid currentColor;
    border-left: 0.3em solid transparent;
    width: 0;
    height: 0;
  }

  .file-filename {
    flex: 1 1 auto;
    min-width: 0; /* verhindert, dass Flexbox künstlich breiter werden will */
  }

  /* -------------------------------------------
   MAINCONTENT
   ------------------------------------------- */

  .main-style {
    display: flex;
    gap: 2em;
    background-color: rgb(245, 229, 223);
    padding: 2.5em 1em 1em 1em;
    border-radius: 6px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  }

  .maincontent {
    margin-bottom: 1em;
    hyphens: auto;
  }

  .maincontent p,
  .maincontent ul,
  .maincontent ol {
    padding-bottom: 1em;
    margin-top: 0;
  }

  .maincontent li p {
    padding-bottom: 0;
  }

  .maincontent h2 {
    font-size: 1.4em;
    margin: 0 0 1em 0;
  }

  .maincontent h3 {
    font-size: 1.3em;
    margin: 1em 0 1em 0;
  }

  .maincontent h4 {
    font-size: 1.2em;
    margin: 1em 0 1em 0;
  }

  .maincontent .text,
  .maincontent .heading,
  .maincontent .person,
  .maincontent .image,
  .maincontent .button {
    margin: 1em 1em 1em 0;
    padding: 1em 1em 1em 0;
  }

  .maincontent .email,
  .maincontent .link,
  .maincontent .link_url {
    margin: 0 1em 0 0;
    padding: 0 0 1em 0;
  }

  /* -------------------------------------------
   SPACER & LINE
   ------------------------------------------- */

  /* Heights = Abstand */
  .maincontent-spacer {
    margin: 0;
    padding: 0.5em 1em 0.5em 0;
  }
  .maincontent-spacer--xs { height: 0.2em; }
  .maincontent-spacer--md { height: 0.4em; }
  .maincontent-spacer--lg { height: 0.8em; }
  .maincontent-spacer--xl { height: 1.3em; }

    /* Line in the middle of the space */
  .maincontent-line {
    border: none;
    border-top: 0.125em solid currentColor;
    opacity: 0.95;
    margin: 1em 1em 0 0;
    padding: 1em 0 1em 0;
  }

  .maincontent-line--lineA { width: 20%; }
  .maincontent-line--lineB { width: 40%; }
  .maincontent-line--lineC { width: 100%; }

  /* -------------------------------------------
   LINK
   ------------------------------------------- */

  .maincontent a.link {
    display: block;
    width: fit-content;
    margin: 0 1em 0 0;
    min-width: 0;
  }

  /* -------------------------------------------
   BUTTON
   ------------------------------------------- */
 
  .maincontent a.button {
    border-radius: 6px;
    margin: 1em 1em 1em 0;
    padding: 0.5em 0.75em;
    display: block;
    width: fit-content;
    justify-content: left;
    background-color: rgb(206, 63, 0);
    color: #ffffff;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    font-size: 1em;
    cursor: pointer;
    line-height: 1;  
  }

  .maincontent a.button:hover,
  .maincontent a.button:focus {
    color: #991200;
    background-color: rgb(245, 229, 223);
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
    line-height: 1;
  }

  /* -------------------------------------------
   PERSON
   ------------------------------------------- */

  /* person container */
  .maincontent .person {
    line-height: 1.35;
    font-size: 1em;
  }

  .maincontent .person .name {
    font-weight: bold;
  }

  .maincontent .person .contact {
    margin-top: 0.25em;
  }

    .maincontent .person .contact a {
      font-size: 0.9em;
      color: #500000;
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-decoration-color: #640000;
    }

    .maincontent .person .contact a:focus,
    .maincontent .person .contact a:hover {
      font-size: 0.9em;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      color: #aa1400;
      text-decoration-color: #640000;
    }

  /* -------------------------------------------
   EVENT
   ------------------------------------------- */

   .maincontent .event {
    margin: 0.5em 1em 0.5em 0;
    padding: 0;
  }

  .maincontent .event-title,
  .maincontent .event-description,
  .maincontent .event-meta,
  .maincontent .event-date,
  .maincontent .event-time,
  .maincontent .event-recurrence,
  .maincontent .event-location,
  .maincontent .event-info,
  .maincontent .event-note {
    margin: 0 0 0.25em 0;
    padding: 0;
    font: inherit;
    color: inherit;
  }

  .maincontent .event-title {
    font-weight: inherit;
  }

  .maincontent .event-description p,
  .maincontent .event-meta-text,
  .maincontent .event-meta-text p {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
  }

  .maincontent .event-meta-text p {
    display: inline;
  }


  /* -------------------------------------------
   QUOTE
   ------------------------------------------- */

  .maincontent .blockquote { 
    quotes: none;
    opacity: 0.75;
    border-left: solid 0.25em #111;
    margin: 1em 1em 1em 2em;
    padding: 0.2em 1em 0.2em 0;
  }

    .blockquote .quote {
        font-size: 1.2em;
        text-align: left;
        padding: 0 0 0 1em;
      }

    .blockquote .quote-footer {
      font-size: 1em;
      text-align: left;
      color: #222;
      font-style: italic;
      padding: 0.5em 0 0.2em 3em;
    }

  /* -------------------------------------------
   PROJECT
   ------------------------------------------- */

  .content {
    flex: 2;
    order: 1;
  }    

  .project h3 {
    font-size: 1.1em;
    margin: 2em 0 1em 0;
  }

  .project p {
    padding: 0.5em 0;
  }

  .project hr {
    margin: 2em 0 0 0;
    width: 100%;
  }

  .project-links ul, .project-links li {
    margin: 0;
    padding: 0;
  }

  .filter-btn {
    padding: 0.3em 0.5em;
    justify-content: left;
    background-color: #333;
    color: #ffffff;
    font-size: 0.9em;
    font-weight: bold;
    gap: 1em;
    margin-bottom: 1em;
  }
  
  .filter-clear {
    margin: 0.5em 0 0.5em 0;
    font-weight: bold;
    background-color: rgb(255, 255, 255);
    color: #000;
    border-radius: 6px;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    font-size: 1em;
  }

  .filter-clear:focus, .filter-clear:hover {
    background-color: rgb(206, 63, 0);
    color: #ffffff;
  }

  /* ===========================================
   MAIN CONTENT TABLET
   =========================================== */

  @media screen and (min-width: 450px) and (max-width: 849px) { /* evl. < 955 => ab <= 954 */

    img.logo {
      width: 100%;
      height: 9.5em;
      padding: 1em 0.5em 0.5em 1em;
    }
    
    .title {
      font-size: 1.3em;
      padding-left: 1em;
      margin-bottom: 1em;
    }
  
    .main-style {
      padding: 2em 1em 1em 1em;
    }

    .maincontent h2 {
      line-height: 1.4em;
    }

    .maincontent h3 {
      line-height: 1.3em;
      margin: 1em 0 1em 0;
    }

    .maincontent h4 {
      line-height: 1.4em;
    }

    .maincontent p {
      font-size: 1.2em;
      line-height: 1.3em;
      color: #222;
    }

    .maincontent .email,
    .maincontent .link,
    .maincontent .link_url {
      font-size: 1.2em;
      line-height: 1.3em;
      margin: 0 1em 0 0;
      padding: 0 0 1em 0;
    }

    /* -------------------------------------------
   FILES
   ------------------------------------------- */

    .files li {
      font-size: 1.2em;
    }

    .files-small img {
      max-height: 200px;  
    } */

    figcaption {
      font-size: 0.95em;
    }

    .icon-copyright::before {
      content: "© ";
    }

  /* -------------------------------------------
   SPACER & LINE
   ------------------------------------------- */

  .maincontent-spacer {
    padding: 0.2em 1em 0.2em 0;
  }

  .maincontent-line {
    opacity: 0.98;
  }


  /* -------------------------------------------
   PERSON
   ------------------------------------------- */

  /* person container */
  .maincontent .person {
    line-height: 1.2em;
    font-size: 1.1em;
  }

  .maincontent .person .name {
    font-weight: bold;
  }

  .maincontent .person .contact {
    margin-top: 0.25em;
  }

    .maincontent .person .contact a {
      font-size: 0.9em;
      color: #500000;
      text-decoration: underline;
      text-decoration-thickness: 1.5px;
      text-decoration-color: #640000;
    }

    .maincontent .person .contact a:focus,
    .maincontent .person .contact a:hover {
      font-size: 0.9em;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      color: #aa1400;
      text-decoration-color: #640000;
    }

  /* -------------------------------------------
   QUOTE
   ------------------------------------------- */
  
   .maincontent .blockquote { 
    margin: 1em 1em 0.5em 2em;
    padding: 0.2em 1em 0.2em 0;
  }

    .blockquote .quote {
        font-size: 1.2em;
        text-align: left;
        padding: 0 0 0 1em;
      }

    .blockquote .quote-footer {
      font-size: 1em;
      text-align: left;
      color: #222;
      font-style: italic;
      padding: 0 0 0.2em 4em;
    }
  }

  /* ===========================================
   MAIN CONTENT MOBILE
   =========================================== */
     
  /* responsive breakpoints */
  @media screen and (max-width: 449px) {

    img.logo {
      width: 100%;
      height: 9.5em;
      padding: 1.5em 0.5em 0.5em 1.5em;
    }
    
    .title {
      font-size: 1.3em;
      line-height: 1.3em;
      padding-left: 1em;
      margin-bottom: 1em;
      border-radius: 0;
    }
  
    .main-style {
      padding: 2em 1em 1em 1em;
    }

    .maincontent h2 {
      line-height: 1.2em;
    }

    .maincontent h3 {
      line-height: 1.3em;
      margin: 1em 0 1em 0;
    }

    .maincontent h4 {
      line-height: 1.4em;
    }

    .maincontent p {
      font-size: 1.1em;
      line-height: 1.3em;
      color: #111;
    }

    .maincontent .email,
    .maincontent .link,
    .maincontent .link_url {
      font-size: 1.1em;
      line-height: 1.2em;
      margin: 0 1em 0 0;
      padding: 0 0 1em 0;
    }

    /* -------------------------------------------
   FILES
   ------------------------------------------- */

    .files li {
      font-size: 1.2em;
    }

    .files-small img {
      max-height: 120px;  
    } 

    figcaption {
      font-size: 0.9em;
    }

  /* -------------------------------------------
   SPACER & LINE
   ------------------------------------------- */
  
  .maincontent-spacer {
    padding: 0.2em 1em 0.2em 0;
  }

  .maincontent-line {
    opacity: 0.98;
  }
}
  /* ===========================================
   FOOTER (>= 850px)
   =========================================== */

  .footer {
    background-color: #ececec;
    margin-top: 0.6em;
    padding: 1em;
    text-align: center;
    border-radius: 6px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  }

  .footer-buttons {
    padding: 1em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 1em;
    margin-bottom: 0.5em;
  }

  .footer-buttons ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;      
    gap: 1em;
    justify-content: center;
    padding: 0;
    margin: 0;
    }

  .footer-buttons li {
    list-style: none;
  }

  .footer-buttons a {
    display: inline-block;
    padding: 0.5em 1em;
    font-size: 1em;
    line-height: 1.3em;
    background-color: rgb(206, 63, 0);
    color: #ffffff;
    border-radius: 6px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  }

  .footer-buttons a:focus, .footer-buttons a:hover, .footer-buttons a.active {
    color: #991200;
    background-color: rgb(245, 229, 223);
    border-radius: 6px;
    padding: 0.5em 1em;
    font-size: 1em;
    line-height: 1.3em;
    font-weight: bold;
    text-decoration: none;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
  }

  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    gap: 1.5em;
    margin-top: 0;
  }

  .footer-legal ul {
    display: flex;
    flex-direction: row;      
    gap: 1em;
    list-style: none;
    font-weight: bold;
    margin: 0;
    align-items: center;
    padding: 0;
  }

  .footer-legal li {
    list-style: none;
  }

  .footer-legal ul a {
    padding: 0.5em 1em;
    font-size: 0.9em;
    line-height: 1.4em;
    font-weight: bold;
  }

  .footer-legal ul a:focus, .footer-legal ul a:hover, .footer-legal ul a.active {
    padding: 0.5em 1em;
    font-size: 0.9em;
    line-height: 1.4em;
    background-color: rgb(245, 229, 223);
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
    font-weight: bold;
    border-radius: 6px;
    z-index: 300px;
  }

  .copyright {
    margin: 2em 0 0 0;
    padding: 0 0 0 1em;
    font-size: 0.9em;
    color: #2e2222;
    text-align: left;
  }

  /* ===========================================
   FOOTER MOBILE (< 850px)
   =========================================== */

  /* responsive breakpoints */
  @media screen and (max-width: 849px) { /* evl. < 955 => ab <= 954 */


  .footer-buttons {
    justify-content: center;
  }

    .footer-buttons ul {
      gap: 0.8em;
      padding: 0.3em 0.5em;
    }

    .footer-buttons a {
      padding: 0.3em 0.5em;
    }

    .footer-buttons a:focus, .footer-buttons a:hover, .footer-buttons a.active {
      padding: 0.3em 0.5em;
    }

    .footer-legal {
      justify-content: center;
      font-size: 1em;
      margin-top: 0.3em;
    }

    .footer-legal ul {
      flex-direction: column;
      text-align: center;
    }

    .footer-legal ul a {
      padding: 0.3em;
    }

    .copyright {
      font-size: 0.9em;
      text-align: center;
    }
  }

  /* ===========================================
   FORM MAIN (>= 850px)
   =========================================== */

  .form-page .hp {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .form-page .k-form .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em 1.25em;
  }

  .form-page label { 
    display: flex; 
    flex-direction: column; 
    gap: 0.3em;
    background-color: rgb(245, 229, 223);
    padding: 0.2em 0.5em;
    border-radius: 6px;
    font-size: 1.2em;
    color: #740000;
  }

  .form-page h6 { 
    display: flex; 
    flex-direction: column; 
    gap: 0.3em;
    background-color: rgb(245, 229, 223);
    padding: 0.5em 0.5em 1em 0.5em;
    margin: 0.5em 0 0 0;
    border-radius: 6px;
    font-size: 1.1em;
    color: #740000;
  }

  .form-page input[type="text"],
  .form-page input[type="date"],
  .form-page textarea {
    padding: 0.1em 1em;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 6px;
    line-height: 1.1em;
  }

  .form-page ::placeholder {
    color: #666;
    font-style: italic;
    line-height: 1em;
    font-size: 0.8em;
  }

  .form-page ::-webkit-input-placeholder {
    line-height: 1em;
    font-size: 0.8em;
  }

  .form-page label.error input,
  .form-page label.error textarea { 
    border-color: rgb(206, 63, 0); 
  }

  .form-page label em { 
    color: rgb(206, 63, 0); 
    font-style: normal; 
    font-size: 1.1em; 
  }

  /* Preview chips */
  .tag-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3em;
    margin: 0.1em 0 0.4em 0;
  }

  .tag-chip {
    background: rgb(206, 63, 0);
    color: #fff;
    padding: 0.2em 0.5em;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
  }

  /* kleines "x" */
  .tag-chip .remove-chip {
    margin-left: 0.4em;
    cursor: pointer;
    font-weight: bold;
  }

  /* select style NUR für Tag-Selects */
  .tag-select {
    width: 100%;
    min-height: 2em;
    max-height: 4em;
    padding: 0 1em;
    font-size: 0.9em;
    line-height: 1em;
    border-radius: 6px;
    border: 1px solid #ccc;
  }

  select[multiple] option {
    padding: 0.1em 0.2em;
    font-size: 0.85em;
    border-radius: 6px;
  }

  /* Ausgewählte Optionen (sofern der Browser es zulässt) hervorheben */
  select[multiple] option:checked {
    background-color: rgb(206, 63, 0) !important;
    color: #ffffff !important;
    font-weight: bold;
    border-radius: 6px;
  }

  .submit-button {
    /* display: flex; */
    margin: 0.5em 0 1em 0;
    padding: 0.2em;
    font-size: 1.2em;
    font-weight: bold;
    background-color: rgb(206, 63, 0);
    color: #ffffff;
  }

  .submit-button:focus, .submit-button:hover {
    background-color: rgb(245, 229, 223);
    color: #000;
  }

  /*label and optional-note nebeneinander */
  .form-page label.tag-field .tag-label-head {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5em;
  } 

  /* optional-note */
  .form-page label.tag-field .tag-label-head .optional-note {
    font-size: 0.9em;
    color: #555;
    white-space: nowrap;
  }

  /* ===========================================
   FORM MOBILE TABLET
   =========================================== */

  /* responsive breakpoints */
  @media screen and (min-width: 450px) and (max-width: 849px) { /* evl. < 955 => ab <= 954 */

  .form-page label.full { 
    grid-column: 1 / -1; 
  }

  .form-page .k-form .grid { 
    grid-template-columns: 1fr; 
  }

  .form-page label, .form-page h6 { 
    font-size: 1.2em;
  }

  .form-page input[type="text"],
  .form-page input[type="date"],
  .form-page textarea {
    padding: 0.1em 1em;
    font-size: 1.1em;
    line-height: 1.2em;
  }

  /* Preview chips */
  .tag-preview {
    gap: 0.3em;
    margin-top: 0.2em;
  }

  .tag-chip {
    padding: 0.15em 0.3em;
    border-radius: 6px;
    font-size: 0.95em;
  }

  /* select style NUR für Tag-Selects */
  .tag-select {
    font-size: 1em;
  }

  .submit-button {
    font-size: 1.1em;
    padding: 0.4em 0.4em;
  }
}

  /* ===========================================
   FORM MOBILE MOBILE
   =========================================== */

  /* responsive breakpoints */
  @media screen and (max-width: 449px) {

  .form-page label.full { 
    grid-column: 1 / -1; 
  }

  .form-page .k-form .grid { 
    grid-template-columns: 1fr; 
  }

  .form-page label, .form-page h6 { 
    font-size: 1.1em;
  }

  .form-page input[type="text"],
  .form-page input[type="date"],
  .form-page textarea {
    padding: 0.1em 0.2em;
    font-size: 1.1em;
    line-height: 1.2em;
  }

  /* Preview chips */
  .tag-preview {
    gap: 0.3em;
    margin-top: 0.2em;
  }

  .tag-chip {
    padding: 0.15em 0.3em;
    border-radius: 6px;
    font-size: 0.85em;
  }

  /* select style NUR für Tag-Selects */
  .tag-select {
    font-size: 1em;
  }

  .submit-button {
    padding: 0.3em;
    font-size: 1em;
  }
}