body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
#wrapper{width:960px;margin:0 auto}.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{float:left;margin-left:10px;margin-right:10px;display:inline}.mod_article [class^=ce_],.mod_article [class*=" ce_"],.mod_article [class^=content-],.mod_article [class*=" content-"],.mod_article [class^=mod_],.mod_article [class*=" mod_"],.mod_article [class^=module-],.mod_article [class*=" module-"]{margin-left:10px;margin-right:10px}.ce_sliderStart>.content-slider{margin-left:0;margin-right:0}.mod_article .mod_newsreader,.mod_article .mod_eventreader{margin-left:0;margin-right:0}.mod_article [class^=layout_]>*,.mod_article [class*=" layout_"]>*,.mod_article [class^=event_]>*,.mod_article [class*=" event_"]>*{margin-left:10px;margin-right:10px}.mod_article.grid1,.mod_article.grid2,.mod_article.grid3,.mod_article.grid4,.mod_article.grid5,.mod_article.grid6,.mod_article.grid7,.mod_article.grid8,.mod_article.grid9,.mod_article.grid10,.mod_article.grid11,.mod_article.grid12{margin-left:0;margin-right:0}#main .inside{overflow:hidden}.grid1{width:60px}.grid2{width:140px}.grid3{width:220px}.grid4{width:300px}.grid5{width:380px}.grid6{width:460px}.grid7{width:540px}.grid8{width:620px}.grid9{width:700px}.grid10{width:780px}.grid11{width:860px}.grid12{width:940px}.mod_article.grid1{width:80px}.mod_article.grid2{width:160px}.mod_article.grid3{width:240px}.mod_article.grid4{width:320px}.mod_article.grid5{width:400px}.mod_article.grid6{width:480px}.mod_article.grid7{width:560px}.mod_article.grid8{width:640px}.mod_article.grid9{width:720px}.mod_article.grid10{width:800px}.mod_article.grid11{width:880px}.mod_article.grid12{width:960px}.offset1{margin-left:90px!important}.offset2{margin-left:170px!important}.offset3{margin-left:250px!important}.offset4{margin-left:330px!important}.offset5{margin-left:410px!important}.offset6{margin-left:490px!important}.offset7{margin-left:570px!important}.offset8{margin-left:650px!important}.offset9{margin-left:730px!important}.offset10{margin-left:810px!important}.offset11{margin-left:890px!important}.offset12{margin-left:970px!important}.mod_article.offset1{margin-left:80px!important}.mod_article.offset2{margin-left:160px!important}.mod_article.offset3{margin-left:240px!important}.mod_article.offset4{margin-left:320px!important}.mod_article.offset5{margin-left:400px!important}.mod_article.offset6{margin-left:480px!important}.mod_article.offset7{margin-left:560px!important}.mod_article.offset8{margin-left:640px!important}.mod_article.offset9{margin-left:720px!important}.mod_article.offset10{margin-left:800px!important}.mod_article.offset11{margin-left:880px!important}.mod_article.offset12{margin-left:960px!important}@media (min-width:768px) and (max-width:979px){#wrapper{width:744px}.grid1{width:42px}.grid2{width:104px}.grid3{width:166px}.grid4{width:228px}.grid5{width:290px}.grid6{width:352px}.grid7{width:414px}.grid8{width:476px}.grid9{width:538px}.grid10{width:600px}.grid11{width:662px}.grid12{width:724px}.mod_article.grid1{width:62px}.mod_article.grid2{width:124px}.mod_article.grid3{width:186px}.mod_article.grid4{width:248px}.mod_article.grid5{width:310px}.mod_article.grid6{width:372px}.mod_article.grid7{width:434px}.mod_article.grid8{width:496px}.mod_article.grid9{width:558px}.mod_article.grid10{width:620px}.mod_article.grid11{width:682px}.mod_article.grid12{width:744px}.offset1{margin-left:72px!important}.offset2{margin-left:134px!important}.offset3{margin-left:196px!important}.offset4{margin-left:258px!important}.offset5{margin-left:320px!important}.offset6{margin-left:382px!important}.offset7{margin-left:444px!important}.offset8{margin-left:506px!important}.offset9{margin-left:568px!important}.offset10{margin-left:630px!important}.offset11{margin-left:692px!important}.offset12{margin-left:754px!important}.mod_article.offset1{margin-left:62px!important}.mod_article.offset2{margin-left:124px!important}.mod_article.offset3{margin-left:186px!important}.mod_article.offset4{margin-left:248px!important}.mod_article.offset5{margin-left:310px!important}.mod_article.offset6{margin-left:372px!important}.mod_article.offset7{margin-left:434px!important}.mod_article.offset8{margin-left:496px!important}.mod_article.offset9{margin-left:558px!important}.mod_article.offset10{margin-left:620px!important}.mod_article.offset11{margin-left:682px!important}.mod_article.offset12{margin-left:744px!important}}@media (max-width:767px){#wrapper{width:auto}.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{float:none!important;display:block!important;width:auto!important}.offset1,.offset2,.offset3,.offset4,.offset5,.offset6,.offset7,.offset8,.offset9,.offset10,.offset11,.offset12{margin-left:10px!important}}


/** ----------------------------------------
    Grundschrift & Basislayout
---------------------------------------- **/
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 400;
  src: url('/files/themes/fonds/merienda/merienda-v22-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Merienda';
  font-style: normal;
  font-weight: 700;
  src: url('/files/themes/fonds/merienda/merienda-v22-latin-700.woff2') format('woff2');
}

html {
  overflow-y: scroll;
  height: 100%;
  font-size: 16px;
  line-height: 24px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  border-top: 4px solid #9f111b;
  font-family: Merienda, Arial, sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.5;
  color: #292c37;
}
/* Anpassen Boxmodel */

*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*::before, 
*::after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/** ----------------------------------------
    Überschriften & Text
---------------------------------------- **/
h1, h2, h3, h4, h5 {
  font-weight: 700;
}

h1 {
  font-size: 2.2em;
  line-height: 1.26;
  margin-top: 0.64;
  color: #9f111b;
  margin-bottom: 1.26;
}

h2 { 
  font-size: 1.75em; 
  line-height: 1.71em;
  margin-top: 0.8572em;
  margin-bottom: 0.45em;
    }
h3 { 
  font-size: 1.3em; 
  line-height: 1.143em;
  margin-top: 1.143; 
  margin-bottom: 0.2em;
  
}

p, ul, ol { 
  margin-top: 0em;
  margin-bottom: 1.2em; 
}

li {
  margin-left: 0em;
}

hr {
  border: 1px solid #292c37;
  margin: -1px 0;
}

a,
a: visited { 
  color: #9f111b; 
  text-decoration: underline; 
}
a:hover, 
a:focus,
a:active { 
  color: #710c13; 
  outline: 0;
}

/** ----------------------------------------
    Allgemeines Layout
---------------------------------------- **/
#wrapper {
  width: 100%;
  max-width: 1280px;
  margin: 50px auto 0 auto;
  padding-top: 30px; /* Abstand unter fixierter Navigation */
}

/* ------------------------------------------ */
/* HEADER & NAVIGATION – elegant & funktional */
/* ------------------------------------------ */

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.96);
  transition: all 0.3s ease;
  padding: 0.6em 0;
}

#header .inside {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Navigation links (Desktop: links) */
#nav-main {
  order: 1;
  text-align: left;
  margin-right: auto;
}

/* Telefon rechts (Desktop) */
#telefon {
  order: 2;
  text-align: right;
  font-size: 1.1em;
  font-weight: 600;
  color: #01939a;
}

#telefon a {
  display: inline-block;
  text-align: right;  /* Rufnummer rechtsbündig */
  text-decoration: none;
  color: #01939a;
}

#telefon a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%239f111b" viewBox="0 0 24 24"><path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.05-.24c1.14.38 2.37.59 3.54.59a1 1 0 011 1v3.5a1 1 0 01-1 1C10.4 22.03 2 13.63 2 3.5a1 1 0 011-1H6.5a1 1 0 011 1c0 1.17.21 2.4.59 3.54a1 1 0 01-.25 1.05l-2.22 2.2z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}
/*------------------------------------------*/
/*Main - Desktop
/* ------------------------------------------ */

/* Nur Texte einrücken */
#main .content-text p,
#main .content-text h1,
#main .content-text h2,
#main .content-text h3,
#main .content-text h4,
#main .content-text h5,
#main .content-text ul,
#main .content-text ol,
#main .content-text li {
  padding-left: 10px;
  padding-right: 10px;
}

<div id="cookiebar" class="cookiebar" aria-label="Cookie-Hinweis">
  …
</div>



/* ----------------------------------------
   Kontaktformular – Grundlayout
---------------------------------------- */

/* Äußere Hülle des Formulars (Formular-Klasse in Contao: "kontakt-form") */
.kontakt-form {
  max-width: 700px;
  margin: 40px 0;
  padding: 25px 30px;
  background: #5DC8CD;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(0,0,0,0.05);
}

/* Abstand zwischen den Feldern */
.kontakt-form .widget {
  margin-bottom: 16px;
}

/* Label */
.kontakt-form .widget label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #292c37;
  font-size: 0.98em;
}

/* Sternchen für Pflichtfeld */
.kontakt-form .widget label .mandatory {
  color: #9f111b;
  font-weight: 700;
}

/* Input-Felder & Textarea */
.kontakt-form input.text,
.kontakt-form input[type="text"],
.kontakt-form input[type="email"],
.kontakt-form textarea.textarea,
.kontakt-form textarea {
  width: 100%;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 1em;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
}

/* Fokus-Zustand (wenn man ins Feld klickt) */
.kontakt-form input.text:focus,
.kontakt-form input[type="text"]:focus,
.kontakt-form input[type="email"]:focus,
.kontakt-form textarea:focus {
  border-color: #01939a;
  outline: none;
  box-shadow: 0 0 0 2px rgba(1,147,154,0.15);
}

/* Textarea darf höher werden */
.kontakt-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Fehlermeldungen (falls Contao Klassen setzt) */
.kontakt-form .error,
.kontakt-form .widget.error label {
  color: #9f111b;
}

.kontakt-form .widget.error input,
.kontakt-form .widget.error textarea {
  border-color: #9f111b;
}

/* Button einer evtl. Abschicken-Zeile */
.kontakt-form .submit,
.kontakt-form .widget-submit {
  text-align: right;
  margin-top: 20px;
}

.kontakt-form .submit button,
.kontakt-form .widget-submit button,
.kontakt-form .submit input[type="submit"] {
  background: #01939a;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 1em;
  font-weight: 600;
  cursor: pointer;
}

.kontakt-form .submit button:hover,
.kontakt-form .widget-submit button:hover,
.kontakt-form .submit input[type="submit"]:hover {
  background: #00868d;
}

/* Link im Formular (z. B. Datenschutz) */
.kontakt-form a {
  color: #9f111b;
  text-decoration: underline;
}

.kontakt-form a:hover {
  color: #710c13;
}

/* ----------------------------------------
   Mobile Anpassung
---------------------------------------- */
@media (max-width: 800px) {
  .kontakt-form {
    padding: 20px 16px;
    margin: 25px 0;
    box-shadow: none;
    border-radius: 0;
  }
}


/* ------------------------------------------ */
/* NAVIGATION – Desktop */
/* ------------------------------------------ */

/* Hamburger auf Desktop ausblenden */
.nav-toggle,
.nav-toggle-label {
  display: none;
}

#nav-main {
  overflow: visible;
}

/* Hauptmenü waagerecht */
#nav-main .level_1 {
  position: relative;
  margin: 0;
  padding: 0;
}

#nav-main .level_1 > li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
}

#nav-main a,
#nav-main strong {
  display: block;
  margin: 0 1em;
  font-size: 1.1em;
  font-weight: 700;
  text-decoration: none;
  color: #292c37;
  line-height: 1.5;
}

#nav-main a:hover,
#nav-main a:focus {
  color: #01939a;
}

/* Untermenü – Desktop: klassisches Dropdown */
#nav-main .level_2 {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: #ffffff;
  z-index: 1999;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

#nav-main li.submenu:hover > .level_2 {
  display: block;
}

#nav-main .level_2 > li {
  display: block;
  text-align: left;
}

#nav-main .level_2 > li a,
#nav-main .level_2 > li strong {
  padding: 5px 16px;
  color: #01939a;
  text-decoration: none;
}

#nav-main .level_2 > li a:hover {
  background: #e9f7f7;
  color: #00868d;
}

/* Pfeil hinter Menüpunkten mit Untermenü (ohne Font Awesome) */
#nav-main .level_1 > li.submenu > a::after,
#nav-main .level_1 > li.submenu > strong::after {
  content: "▼";           /* einfacher Pfeil nach unten */
  font-size: 0.7em;       /* etwas kleiner als Text */
  margin-left: 0.4em;     /* kleiner Abstand zum Wort */
}

/** ----------------------------------------
    FOOTER (Desktop-Basis)
---------------------------------------- **/
#footer {
  margin-top: 40px;
  border-top: 1px solid #ccc;
}

#footer .inside {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

#footer .box {
  flex: 0 0 33.333%;
  margin: 0;
  padding: 25px;
  color: white;
  box-sizing: border-box;
  position: relative;
}

#footer .box-left  { background-color: #01939a; }
#footer .box-middle{ background-color: #34C6CD; }
#footer .box-right { background-color: #5DC8CD; }

#footer .box a {
  color: #ffffff;
  text-decoration: underline;
}

#footer .box a:hover {
  color: #f9e6e8;
}

.footer-copyright {
  flex: 0 0 100%;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 0.74em;
  padding: 10px 0;
  color: #292c37;
  background: #e9f7f7;
  text-align: center;
}

/* ------------------------------------------ */
/* MOBILE: Hamburger-Menü + Untermenüs + Footer */
/* ------------------------------------------ */
@media (max-width: 800px) {

  /* Header entspannter auf Handy */
  #header {
    position: static;
  }

  #header .inside {
    flex-wrap: wrap;
    padding: 10px 20px;
  }


  /* Telefon oben, Block mittig (Nummer selbst bleibt rechtsbündig durch #telefon a) */
  #telefon {
    order: 1;
    width: 100%;
    margin: 0 0 8px 0;
    text-align: center;
  }

  /* Navigation darunter */
  #nav-main {
    order: 2;
    width: 100%;
    margin-right: 0;
    text-align: center;
  }

  /* HAMBURGER nur mobil anzeigen */
  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    cursor: pointer;
    margin-left: auto;
  }

  .nav-toggle-label span {
    display: block;
    height: 3px;
    border-radius: 3px;
    background: #01939a;
    transition: all 0.3s ease;
  }

  .nav-toggle {
    display: none;
  }

  /* Menüliste: STANDARD = VERSTECKT auf Handy */
  #nav-main .level_1 {
    display: none;
    margin: 10px 0 0 0;
    padding: 0;
  }

  #nav-main .level_1 > li {
    display: block;
    margin: 0.4em 0;
  }

  /* etwas Innenabstand für bessere Lesbarkeit */
  #nav-main .level_1 > li > a,
  #nav-main .level_1 > li > strong {
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Wenn #nav-toggle angehakt → Menü anzeigen */
  #nav-toggle:checked ~ ul.level_1 {
    display: block;
  }

  /* Untermenüs: zunächst zugeklappt */
  #nav-main .level_2 {
    position: static;
    max-height: 0;
    overflow: hidden;
    background: transparent;
    padding: 0;
    margin: 0;
    transition: max-height 0.3s ease-in-out;
    box-shadow: none;
  }

  /* Aufklappen, wenn das LI aktiv ist (Hover/Fokus)
     → auf Touch: Tipp auf den Menüpunkt öffnet die Unterpunkte */
  #nav-main li.submenu:hover > .level_2,
  #nav-main li.submenu:focus-within > .level_2 {
    max-height: 500px;
  }

  #nav-main .level_2 > li {
    list-style: none;
    text-align: center;
  }

  #nav-main .level_2 > li a,
  #nav-main .level_2 > li strong {
    padding: 4px 30px;   /* etwas mehr Einzug für Unterpunkte */
    color: #01939a;
    text-decoration: none;
  }

  /* Hamburger animiert zu X */
  #nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  #nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }
  #nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Footer-Boxen untereinander auf Handy */
  #footer .inside {
    flex-direction: column;
  }

  #footer .box {
    flex: 0 0 100%;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }

  #footer .box:last-child {
    border-bottom: none;
  }
}
/* =============================== */
/* Cookiebar – nur notwendige Cookies */
/* =============================== */

.cookiebar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #01939a;
  color: #ffffff;
  padding: 15px 20px;
  box-shadow: 0 -3px 10px rgba(0,0,0,0.15);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.cookiebar-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cookiebar-hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
}

.cookiebar-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.cookiebar-inner p {
  margin: 0;
  flex: 1;
  line-height: 1.5;
}

.cookiebar-inner a {
  color: #ffffff;
  text-decoration: underline;
}

.cookiebar-inner a:hover {
  color: #e6f4f4;
}

#cookie-ok {
  background: #ffffff;
  color: #01939a;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}

#cookie-ok:hover {
  background: #e6f7f7;
}

/* Mobile optimiert */
@media (max-width: 800px) {
  .cookiebar-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  #cookie-ok {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }
}
/* =========================
   Kacheln (Grid – überall)
========================= */

#main .inside .kachel-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr); /* 6-Spalten-Basis */
  gap:20px;
  margin:30px 0;
  padding:0 12px;
}

#main .inside .kachel-grid > .kachel{
  grid-column:span 2;              /* => 3 pro Zeile */
  background:#e9f7f7;
  padding:22px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#main .inside .kachel-grid > .kachel h3{margin:0 0 10px;color:#01939a;}
#main .inside .kachel-grid > .kachel p{margin:0 0 12px;}
#main .inside .kachel-grid > .kachel a{
  margin-top:auto;
  color:#9f111b;
  font-weight:600;
  text-decoration:none;
}
#main .inside .kachel-grid > .kachel a:hover{ text-decoration:underline; }

/* Hover + Tastatur */
#main .inside .kachel-grid > .kachel:hover,
#main .inside .kachel-grid > .kachel:focus-within{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  background-color:#f2fbfb;
}
#main .inside .kachel-grid > .kachel a:focus-visible{
  outline:3px solid #01939a;
  outline-offset:4px;
}
@media (prefers-reduced-motion: reduce){
  #main .inside .kachel-grid > .kachel{ transition:none; }
}

/* Spezialfall: genau 5 Kacheln → 4 und 5 je 50% */
#main .inside .kachel-grid > .kachel:nth-child(4):nth-last-child(2),
#main .inside .kachel-grid > .kachel:nth-child(5):nth-last-child(1){
  grid-column:span 3;
}

/* Spezialfall: genau 2 Kacheln → beide je 50% */
#main .inside .kachel-grid > .kachel:nth-child(1):nth-last-child(2),
#main .inside .kachel-grid > .kachel:nth-child(2):nth-last-child(1){
  grid-column:span 3;
}

/* Tablet: 2 pro Zeile */
@media (max-width:1100px){
  #main .inside .kachel-grid{ grid-template-columns:repeat(4,1fr); }
  #main .inside .kachel-grid > .kachel{ grid-column:span 2; }
}

/* Mobil: 1 pro Zeile */
@media (max-width:800px){
  #main .inside .kachel-grid{ grid-template-columns:1fr; }
  #main .inside .kachel-grid > .kachel{ grid-column:auto; }
}
/* =========================
   Kacheln (Grid – überall)
========================= */

#main .inside .kachel-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr); /* 6-Spalten-Basis */
  gap:20px;
  margin:30px 0;
  padding:0 12px;
}

#main .inside .kachel-grid > .kachel{
  grid-column:span 2;              /* => 3 pro Zeile */
  background:#e9f7f7;
  padding:22px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

#main .inside .kachel-grid > .kachel h3{margin:0 0 10px;color:#01939a;}
#main .inside .kachel-grid > .kachel p{margin:0 0 12px;}
#main .inside .kachel-grid > .kachel a{
  margin-top:auto;
  color:#9f111b;
  font-weight:600;
  text-decoration:none;
}
#main .inside .kachel-grid > .kachel a:hover{ text-decoration:underline; }

/* Hover + Tastatur */
#main .inside .kachel-grid > .kachel:hover,
#main .inside .kachel-grid > .kachel:focus-within{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  background-color:#f2fbfb;
}
#main .inside .kachel-grid > .kachel a:focus-visible{
  outline:3px solid #01939a;
  outline-offset:4px;
}
@media (prefers-reduced-motion: reduce){
  #main .inside .kachel-grid > .kachel{ transition:none; }
}

/* Spezialfall: genau 5 Kacheln → 4 und 5 je 50% */
#main .inside .kachel-grid > .kachel:nth-child(4):nth-last-child(2),
#main .inside .kachel-grid > .kachel:nth-child(5):nth-last-child(1){
  grid-column:span 3;
}

/* Spezialfall: genau 2 Kacheln → beide je 50% */
#main .inside .kachel-grid > .kachel:nth-child(1):nth-last-child(2),
#main .inside .kachel-grid > .kachel:nth-child(2):nth-last-child(1){
  grid-column:span 3;
}

/* Tablet: 2 pro Zeile */
@media (max-width:1100px){
  #main .inside .kachel-grid{ grid-template-columns:repeat(4,1fr); }
  #main .inside .kachel-grid > .kachel{ grid-column:span 2; }
}

/* Mobil: 1 pro Zeile */
@media (max-width:800px){
  #main .inside .kachel-grid{ grid-template-columns:1fr; }
  #main .inside .kachel-grid > .kachel{ grid-column:auto; }
}
@media (max-width: 800px){
  body #main .inside .kachel-grid{
    grid-template-columns: 1fr !important;
  }
  body #main .inside .kachel-grid > .kachel{
    grid-column: auto !important;
    width: auto !important;
  }
}

.halbsatz-wrapper {
    max-width: 800px; /* optional, für bessere Lesbarkeit */
    margin: 2rem auto;
}

.halbsatz-top {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem; /* Abstand zu den Endsätzen */
}

.halbsatz-list {
    display: flex;
    flex-direction: column; /* WICHTIG: alles untereinander */
    gap: 0.3rem; /* Abstand zwischen den Endsätzen */
    padding-left: 18ch; /* leichte Einrückung unter "weil" */
}

.halbsatz-list div {
    font-size: 1.1rem;
    line-height: 1.4;
}

.produkt-liste {
  list-style: none;
  padding-left: 0;
}

.produkt-liste li {
  margin-bottom: 0.3rem;
}