:root {
   --color-bg-body: #eee;
   --color-bg: #fff;
   --color-tx: #2f2c2a;

   /* Adobe Julia vorschlag Miriam Email 15.10. */
   --color-header-bg: #e3a978;
   --color-header-tx: #ffffff;

   --color-menu-bg: #f0d9b5;
   --color-menu-tx: #2f2c2a;
   --color-menu-tx-hover: #5c5855;

   --color-link-tx: #e3a978;
   --color-link-tx-hover: #f0d9b5;

   --color-button-bg: var(--color-menu-bg);
   --color-button-bg-hover: var(--color-header-bg);
   --color-button-tx-hover: #fff;

   --color-footer-bg: var(--color-menu-bg);

   --font-size-basic: 18px;
   --font-size-menue: 16px;
   --font-size-small: 16px;

   --font-size-site-title: 48px;
   --font-size-header-widget: 24px;
}

.wrap {
   max-width: 960px;
}

body, .content {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato,
      Helvetica, Arial, sans-serif;
   font-size: var(--font-size-basic);
   color: var(--color-tx);
}

body {
   background-color: var(--color-bg);
}

.title-area a {
   font-size: var(--font-size-site-title);
   padding-left: 10px;
}

.site-inner {
   padding-top: 0;
}

.content {
   padding-top: 20px;
}

.site-header {
   background-color: var(--color-header-bg);
}

.site-header .widget-area {
   width: auto;
   max-width: 600px;
   padding-right: 10px;
}

.site-title a, .site-title a:hover, .title-area a, .textwidget a:hover {
   color: var(--color-header-tx);
}

.header-widget-area h2 {
   font-size: var(--font-size-header-widget);
}

.nav-primary {
   background-color: var(--color-menu-bg);
   position: sticky;
   top: 0;
   z-index: 9999;
}

.site-footer, .site-footer a {
   font-size: 16px;
   color: #ccc;
   padding: 20px 0;
}

.genesis-nav-menu .sub-menu a, .nav-primary a {
   color: var(--color-menu-tx);
   font-size: var(--font-size-menue);
}

button, .wpcf7-submit {
   background-color: var(--color-header-bg) !important;
   color: var(--color-tx) !important;
   border-radius: 5px !important;
   margin-top: 10px !important;
}

button:focus, button:hover {
   background-color: var(--color-menu-bg);
   color: var(--color-menu-tx);
}

input, textarea {
   font-size: var(--font-size-input);
   color: var(--color-tx);
   padding: 10px;
   margin: 5px 0 20px 0;
   border-radius: 5px;
   border-width: 2px;
   box-shadow: 2px 3px 6px hsla(0, 0%, 0%, 0.2);
   text-transform: none;
}

.textarea-exercise:focus {
   border: none;
}

.textarea-exercise {
   height: 95%;
   width: 100%;
   border: none;
   box-shadow: none;
   resize: none;
   padding: 0px;
   margin-top: -10px;
}

/* Container für die beiden Fieldsets (Textfeld + Eigenschaften */
.fieldset-container {
   display: flex;
   flex-wrap: wrap;
   align-items: stretch;
   gap: 20px;
   margin: 0;
   padding: 0;
}

/* Fieldset rechts mit fester Breite für Textfeld*/
.fieldset-container .flexible {
   flex: 1;
   padding-bottom: 0;
   border: none;
   border: 2px solid #dcdcdc;
   border-radius: 10px;
   box-shadow: 2px 3px 6px hsla(0, 0%, 0%, 0.2);
}

/* Fieldset rechts mit fester Breite für die Eigenschaften*/
.fieldset-container .fixed {
   width: 240px;
   border: none;
   padding: 0 15px 15px 15px;
   border: 2px solid #dcdcdc;
   border-radius: 10px;
   box-shadow: 2px 3px 6px hsla(0, 0%, 0%, 0.2);
}

.fieldset-container legend {
   font-weight: bold;
   margin-left: 10px;
   padding: 5px;
}

.property-group:not(:last-child) {
   margin-bottom: 15px;
}

.property-group:has(input[type='checkbox']) {
   margin: 0px;
}

.property-group label {
   font-size: 18px;
   display: block;
}

.properties dt, .properties dd {
   margin: 0;
}

.properties dt select, .properties dd select, .fixed select {
   max-height: 32px;
   color: black;
   padding: 5px;
}

.check-container {
   display: flex;
   align-items: center;
   font-size: 18px;
   line-height: 1.2;
   padding-left: 5px;
}

.check-container input[type='checkbox'] {
   transform: scale(1.5);
   margin-right: 8px;
   position: relative;
   top: 8px;
   flex-shrink: 0;
}

.statistic {
   font-size: smaller;
   font-style: italic;
}

.noafd {
   font-weight: bold;
   font-size: 16px;
   background-color: #fffacd;
   padding: 0 15px;
   box-shadow: 2px 3px 6px hsla(0, 0%, 0%, 0.2);
   margin: 10px 0 5px 0;
}

.hidden {
   display: none;
}

.red {
   color: red;
}

.blue {
   color: blue;
}

.green {
   color: green;
}

.bold {
   font-weight: bold;
}

.mark {
   color: blue;
   font-weight: bold;
}

.disabled{
   color: #aaaaaa;
   background-color: #eeeeee;
}

.inline-input.correct {
   background: lightgreen;
}

.inline-input.wrong {
   background: red;
   color: white;
}

.exercise-container {
   text-align: center;
}

.exercise-inner {
   display: inline-block;
   text-align: left;
}

.exercise-header {
   font-weight: bold;
   text-align: center;
   border: 5px double silver;
   box-shadow: 2px 3px 6px hsla(0, 0%, 0%, 0.2);
   padding: 10px;
   margin-bottom: 20px;
   line-height: 120%;
}

.exercise-text {
   font-size: 20px;
   line-height: 250%;
}

.exercise-credits {
   font-size: smaller;
   font-style: italic;
   margin: 10px 0;
   text-align: left;
}

@media only screen and (max-width: 1023px) {
   .site-header .widget-area, .title-area {
      width: 100%; /* volle Breite auf Mobile */
      float: none; /* nicht mehr rechts! */
      margin: 10px auto 0;
      text-align: center;
   }

   .responsive-menu-icon::before,
   .genesis-nav-menu .menu-item a,
   .genesis-nav-menu .current-menu-item a {
      color: var(--color-menu-tx);
   }

   .genesis-nav-menu .menu-item a:hover, .genesis-nav-menu .menu-item a:focus {
      background-color: #fff;
      color: var(--color-menu-tx-hover);
   }

   .genesis-nav-menu .current-menu-item a {
      background-color: #fff;
   }
}

.wpcf7-form-control-wrap textarea {
   height: 120px;
}

@media only screen and (max-width: 600px) {
   .genesis-nav-menu.responsive-menu a,
   .genesis-nav-menu.responsive-menu a:hover,
   .genesis-nav-menu.responsive-menu .sub-menu a,
   .genesis-nav-menu.responsive-menu .sub-menu a:hover {
      color: var(--color-menu-tx) !important;
   }
}

@media only screen and (max-width: 480px) {
   .site-inner, .site-inner .wrap {
      padding: 0;
   }

   .content {
      padding: 20px;
   }
}