new file mode 100644

Binary files /dev/null and "b/files/pub/Bilder/Edelbr\303\244nde/kuck-kuck/alde-gott-winzergenossenshaft-sasbachwalden-schwarzwald-kuckkuck-apertif-spirituosen-composing.png" differ

new file mode 100644

Binary files /dev/null and "b/files/pub/Bilder/Edelbr\303\244nde/kuck-kuck/alde_gott_winzergenossenshaft_gemeinde_sasbachwalden_schwarzwald_landschaft_wald_kuckkuck.JPG" differ

new file mode 100644

Binary files /dev/null and "b/files/pub/Bilder/Edelbr\303\244nde/kuck-kuck/kuck-kuck-vogel.png" differ

new file mode 100644

Binary files /dev/null and "b/files/pub/Bilder/Weinerlebnisse/Weinproben/alde_gott_winzergenossenshaft_sasbachwalden_schwarzwald_vinothek_weitblick_rotwein_\302\251peterbender.jpg" differ

@@ -74,13 +74,10 @@ h4 {

 }

 h5 {

-  color: $color-text;

-  font-weight: 400;

-  font-size: font-size(32px);

-

-  &.fw_normal {

-    font-weight: 400;

-  }

+  font-size: font-size(22px);

+  letter-spacing: 0.125em;

+  text-transform: uppercase;

+  margin-bottom: 0.25em;

 }

 @include for-tablet {

@@ -616,92 +616,60 @@

 .ce_accordion {

+  position: relative;

+  padding-bottom: 40px;

   + .ce_accordion {

     margin-top: 5px;

   }

   .toggler {

     cursor: pointer;

     display: block;

-    background-color: $color-bg-tertiary;

-    color: $color-text-invert;

-    font-size: font-size(25px);

-    padding: 10px 50px 10px 15px;

-    line-height: 30px;

-    position: relative;

-    outline: none;

-    overflow: hidden;

-    @include transition(all 0.25s ease);

+    @include headline($font-size: font-size(22px), $color: $color-bg-primary);

+    letter-spacing: 0.125em;

+    text-transform: uppercase;

+    margin: 0;

+    line-height: 1.3;

-    .arrow {

-      position: absolute;

-      top:0;

-      bottom: 0;

-      right: 0;

-      width: 50px;

-      fill: $color-bg-secondary;

-      @include transition(all 0.25s ease);

+    .title {

+      padding-bottom: 0.3em;

+      position: relative;

+

+      &:after {

+        position: absolute;

+        left: 0;

+        right: 0;

+        height: 0;

+        @include border-radius(99em);

+        border-color: currentColor;

+        content: "";

+        bottom: -0.15em;

+        border-bottom-width: 8px;

+        border-bottom-style: solid;

+      }

     }

-    /*&:before {

+    .ui-accordion-header-icon {

       position: absolute;

-      top:0;

+      left: 0;

       bottom: 0;

-      right: 0;

-      width: 50px;

-      content: '';

-      background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%20100%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M10%2C0%20L100%2C0%20L100%2C100%20L10%2C100%20L0%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;

-      -webkit-background-size: 100% 100%;

-      background-size: 100% 100%;

-      //@include transform(translate(50%,-50%));

-      @include transition(transform 0.25s ease);

-    }*/

-

-    &:before,

-    &:after {

-      z-index: 1;

-      position: absolute;

-      top: 50%;

-      font-size: 35px;

-      @include transform(translate(50%,-50%));

-      @include transition(all 0.25s ease);

-    }

-

-    &:before {

-      right: 20px;

-      content: '+';

-      opacity: 1;

-      visibility: visible;

-    }

-    &:after {

-      top: 22px;

-      right: 25px;

-      content: '–';

-      opacity: 0;

-      visibility: hidden;

+      -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 123 62' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M57.548,60.943c2.509,1.409 5.581,1.409 8.09,0l54.92,-36.13c2.31,-1.41 3.18,-5.08 1.74,-7.05l-7,-15c-1.39,-2.22 -5.14,-2.78 -7.46,-1.37l-46.24,30.23l-45.67,-29.95c-2.6,-1.69 -6.36,-0.84 -7.52,0.85l-7.22,15.24c-1.45,2.25 -0.29,5.64 1.73,7.05l54.63,36.13Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");

+      mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 123 62' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cpath d='M57.548,60.943c2.509,1.409 5.581,1.409 8.09,0l54.92,-36.13c2.31,-1.41 3.18,-5.08 1.74,-7.05l-7,-15c-1.39,-2.22 -5.14,-2.78 -7.46,-1.37l-46.24,30.23l-45.67,-29.95c-2.6,-1.69 -6.36,-0.84 -7.52,0.85l-7.22,15.24c-1.45,2.25 -0.29,5.64 1.73,7.05l54.63,36.13Z' style='fill:%23000000;fill-rule:nonzero;'/%3E%3C/svg%3E");

+      -webkit-mask-repeat: no-repeat;

+      mask-repeat: no-repeat;

+      width: 40px;

+      height: 20px;

+      background-color: $color-bg-secondary;

     }

     &.ui-state-active {

-      background-color: $color-bg-secondary;

-      color: $color-text-invert;

-      &:before {

-        opacity: 0;

-        visibility: hidden;

-      }

-      &:after {

-        opacity: 1;

-        visibility: visible;

-      }

-      .arrow {

-        @include transform(rotate(-90deg));

-        fill: $color-bg-tertiary;

-        max-height:50px;

+      .ui-accordion-header-icon {

+        @include transform(rotate(180deg));

       }

     }

   }

   .accordion {

-    padding: 1.5rem 1rem;

-    background: $color-bg-primary;

+    padding: 1.75em 0 0;

   }

 }

new file mode 100644

@@ -0,0 +1,24 @@

+

+<section class="<?= $this->class ?> ce_accordion ce_text block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>

+

+  <div class="<?= $this->toggler ?>"<?php if ($this->headlineStyle): ?> style="<?= $this->headlineStyle ?>"<?php endif; ?>>

+    <span class="title"><?= $this->headline ?></span>

+  </div>

+

+  <div class="<?= $this->accordion ?>">

+    <div>

+      <?php if (!$this->addBefore): ?>

+        <?= $this->text ?>

+      <?php endif; ?>

+

+      <?php if ($this->addImage): ?>

+        <?php $this->insert('image', $this->arrData); ?>

+      <?php endif; ?>

+

+      <?php if ($this->addBefore): ?>

+        <?= $this->text ?>

+      <?php endif; ?>

+    </div>

+  </div>

+

+</section>

new file mode 100644

@@ -0,0 +1,22 @@

+

+<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>

+<script>

+  jQuery(function($) {

+    $(document).accordion({

+      // Put custom options here

+      heightStyle: 'content',

+      header: '.toggler',

+      collapsible: true,

+      active: false,

+      create: function(event, ui) {

+        ui.header.addClass('active');

+        $('.toggler').attr('tabindex', 0);

+      },

+      activate: function(event, ui) {

+        ui.newHeader.addClass('active');

+        ui.oldHeader.removeClass('active');

+        $('.toggler').attr('tabindex', 0);

+      }

+    });

+  });

+</script>