/* ======================================
   WERKSTATT / WORKSHOP
====================================== */

.workshop-area{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 640px;
  gap: 14px;
  align-items: start;
  margin-left: 40px;
}

/* Linke Textspalte */
.workshop-text{
  min-width: 0;
  background: #1f252b;
  color: #f4f4f4;
  padding: 18px 22px 22px;
  box-sizing: border-box;
}

.workshop-text h1{
  margin: 0 0 18px;
  font: 500 1.8rem/1.25 Arial, Helvetica, sans-serif;
  color: #f0de2f;
}

.goldene-regeln{
  margin: 0;
  padding-left: 1.5em;
}

.goldene-regeln li{
  margin: 0 0 18px;
  font: 400 1.4rem/1.22 Arial, Helvetica, sans-serif;
}

.quelle{
  margin: 12px 0 0;
  font: 400 0.95rem/1.35 Arial, Helvetica, sans-serif;
  color: #37bd9b;
}

.quelle a{
  color: #49beb9;
  text-decoration: none;
}

.quelle a:hover,
.quelle a:focus{
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 1100px){
  .workshop-area{
    grid-template-columns: 1fr;
  }

  .workshop-text{
    margin-bottom: 14px;
  }
}

@media (max-width: 700px){
  .workshop-text{
    padding: 14px 16px 18px;
  }

  .workshop-text h1{
    font-size: 1.05rem;
  }

  .goldene-regeln li{
    font-size: 0.98rem;
    margin-bottom: 15px;
  }

  .quelle{
    font-size: 0.9rem;
  }
}