textarea {
  width: 100%;
  height: 300px;
}

.container {
  padding: 50px 10%;
  font-family: Helvetica, sans-serif;
}



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

#faq article,
#faq aside,
#faq details,
#faq figcaption,
#faq figure,
#faq footer,
#faq header,
#faq hgroup,
#faq menu,
#faq nav,
#faq section {
  display: block
}

#faq body {
  line-height: 1
}

#faq ol,
#faq ul {
  list-style: none
}

#faq blockquote,
#faq q {
  quotes: none
}

#faq blockquote:before,
#faq blockquote:after,
#faq q:before,
#faq q:after {
  content: '';
  content: none
}

#faq table {
  border-collapse: collapse;
  border-spacing: 0
}

#faq {
  font-family: "Ubuntu", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 140%;
  color: #666;
  font-size: 16px;
}

#faq h1 small,
#faq h2 small,
#faq h3 small,
#faq h4 small,
#faq h5 small,
#faq h6 small {
  font-size: 70%;
  display: block;
  margin-bottom: 30px;
  margin-top: 10px;
}

#faq ul {
  margin-left: 15px;
  list-style: disc;
}

#faq h1 {
  font-size: 28px;
  color: #444;
}

#faq h2 {
  font-size: 26px;
  color: #444;
}

#faq h3 {
  font-size: 24px;
  color: #444;
  margin-bottom: 10px;
}

#faq h4 {
  font-size: 22px;
  color: #444;
}

#faq h5 {
  font-size: 20px;
  color: #444;
}

#faq h6 {
  font-size: 18px;
  color: #444;
}

#faq p {
  margin-bottom: 10px;
}

#faq p:last-of-type {
  margin-bottom: 0;
}

#faq p~h3,
#faq p~h4,
#faq p~h5,
#faq p~h6 {
  margin-top: 30px;
}

#faq .container {
  padding: 100px 10%;
}

#faq .flexbox {
  display: flex;
  justify-content: space-between;
}

#faq .col-2 {
  width: 49%
}

/* Container */
#faq .accordion {
  overflow: hidden;
}

/* Einzelnes Panel */
#faq .tab {
  margin-bottom: 5px;  
}

/* Trigger */
#faq .tab>summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0077c0;
  color: #fff;
  cursor: pointer;  
  list-style: none;
  padding: 20px 30px;
  /* entfernt Standard-Dreieck */
  -webkit-tap-highlight-color: transparent;
}

#faq .tab>summary::-webkit-details-marker {
  display: none;
}

/* Safari/Chrome */
#faq .tab>summary::marker {
  content: "";
}

/* Firefox */

/* Pfeil */
#faq .tab>summary::after {
  content: "\276F";
  /* ❯ */
  width: 1em;
  height: 1em;
  text-align: center;
  transform: rotate(90deg);
  transition: transform .2s ease;
}

#faq .tab[open]>summary::after {
  transform: rotate(270deg);
}

/* Inhalt (mit sanfter Höhe-Animation) */
#faq .tab .tab-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
  background: #fff;
  color: inherit;
}

#faq .tab[open] .tab-content {
  max-height: 100vh;
  background-color: #e0ecf8;
  /* ausreichend groß für deinen Inhalt */
}

#faq .tab .tab-content {
  padding: 20px 30px;
}

/* Fokus sichtbar lassen */
#faq .tab>summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media screen and (max-width: 1024px){
  #faq .flexbox{
    flex-wrap: wrap;
  }

  #faq .col-2{
    width:100%;
  }
}