:root {
  --col-gruen: #84944A;
  --col-beige: #E3C87F;
  --col-braun: #A9623D;
  --col-blau-hell: #ABCFDA;
  --col-blau: #475A6E;
  --col-schwarz: #3D3D3D;
  --col-weiss: #F5F2EC;
}

*, *::before, *::after 				       { -webkit-box-sizing: border-box; box-sizing: border-box; }
html 								                { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; background-color: #fafafa; font-size: 18px; } 
body						                    { margin: 0; -webkit-font-smoothing: antialiased; font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.container-row                      { width: 100%; margin: 0 auto; }
.container                          { display: flex; flex-direction: column; margin: 0 auto; width: 100%; max-width: 900px; align-items: center; padding: 7vh 20px; }
.container + .container             { padding-top: 0; }
header.container                    { padding: 20px 0; }
#logo                               { width: 272px; height: auto; max-width: 60vw; }
.text-center                        { text-align: center; }
.small                              { font-size: .8em; }
.hl.color-braun,
.color-braun                        { color: var(--col-braun); }
.bg-mattweiss                       { background-color: var(--col-weiss); }
.kreis-hintergrund                  { position: absolute; z-index: -1; transform: translateY(-20%); }
.image                              { line-height: 0; }
.mustercontainer                    { position: relative; z-index: 0; }
.image img                          { width: 100%; height: auto; }
.kreis-icon                         { display: inline-flex; width: 28px; height: 28px; border-radius: 100%; margin-right: 10px; background-color: var(--col-beige); align-items: center; justify-content: center; }
.no-padding                         { padding: 0; }
.container.no-padding               { padding-left: 20px; padding-right: 20px; }
.image .muster                      { position: absolute; z-index: -1; top: 0; left: 0; width: 70px; height: 100%; transform: translateX(-70px); overflow: hidden; }
.image .muster img                  { height: 100%; width: auto; }
.image .hl                          { margin: 1em 0; }

@media only screen and (orientation: landscape) {

  .container-row { display: flex; gap: 30px; padding: 7vh 0; justify-content: center; }
  .container-row.bg-mattweiss        { padding: 0; }
  .container-row.va-center           { align-items: center; }

  .container-row > .container.half-width {
    flex: 1 1 0;
    width: auto;
    max-width: 450px;
    margin: 0;
    padding: 0;
  }

  .container.half-width.narrow {
      width: fit-content;
      max-width: 100%;
      flex: 0 0 auto; /* verhindert 50%-Breite aus .half-width in Flex-Layouts */
      margin-right: 30px;
  }

  .image .absolute-caption          { position: absolute; margin: 0; transform: translate( calc( -100% - 30px) , calc( -100% - 30px) ); }

}

@media only screen and (orientation: portrait) {

  .text-center-mobile                { text-align: center;}

  .image                             { max-width: 80vw; margin: 0 auto; position: relative; }
  
  .kreis-hintergrund                 { width: 100%; transform: translate(-10%,-20%); }
  .kreis-hintergrund img             { max-width: 100%; height: auto; }

  .container.half-width:has(+.container.half-width .image) { padding-bottom: 0; }
  .container.half-width:has(.image)  { padding: 3vh 0; }

}

h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,pre { margin: 0; padding: 0; font-size: 1em; line-height: 1; }
* + .hl                             { margin-top: 2em; }
.hl                                 { margin-bottom: 1em; line-height: 1.1; text-wrap: balance; font-family: 'Yanone Kaffeesatz', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 500; color: var(--col-blau); }
.hl.hand                            { font-family: 'Devina Garden', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
.hl:has(+.hl)                       { margin-bottom: 0; }
.hl + .hl                           { margin-top: 5px; }
.hl + h1.hl                         { margin-top: 1em; }
.text:has(> .hl:only-child) > .hl   { margin: 0; }
.h1                                 { font-size: 2.8em; }
.h2                                 { font-size: 2.5em; }
.h3                                 { font-size: 2.2em; }
.h4                                 { font-size: 1.6em; }
.h5                                 { font-size: 1.4em; }
.h6                                 { font-size: 1.2em; }
@media only screen and (orientation: portrait) {
.h1,h2                              { font-size: 2.4em; }
.h3                                 { font-size: 2em; }
}

a:has(.icon)                        { display: inline-flex; padding: 0; color: var(--col-lila); align-items: center; text-decoration: none; line-height: 1; }

.btn                                { display: inline-flex; text-decoration: none; color: white; background-color: var(--col-blau-hell); padding: 15px 30px; line-height: 1; border-radius: 20px; }
.btn:hover                          { background-color: var(--col-blau); }

p, .p, li, dt  						          { line-height: 1.5; text-wrap: pretty; color: var(--col-schwarz); }
p a                                 { color: var(--col-braun); }
.contact-info                       { line-height: 2; }
.contact-info a                     { color: var(--col-schwarz); text-decoration: none; }
.contact-info a:hover               { color: var(--col-braun); text-decoration: underline; cursor: pointer; }
p.absolute-right-bottom             { position: absolute; right: 30px; bottom: 30px; }

ul li::marker                       { color: var(--col-gruen); }

.container > .text                  { width: 100%; }
.text ul + p,
.text p + ul,
.text p + p                         { margin-top: 1em; }

.text ul                            { margin-left: 1.5em; }

.h-combo.kreis:before               { content:""; display: block; background-image: url("/img/kreis-blau.png?test"); background-size: cover; width: 100px; height: 100px; position: absolute; z-index: -1; transform: translate(-50%,-10px); }
@media only screen and (orientation: portrait) {
.h-combo.kreis-only-mobile:before   { content:""; display: block; background-image: url("/img/kreis-blau.png?test"); background-size: cover; width: 100px; height: 100px; position: absolute; z-index: -1; transform: translate(-50%,-10px); }
}

footer                              { background-color: var(--col-beige); position: relative; z-index: 0; }      
footer p a                          { color: var(--col-schwarz); }
footer .muster                      { position: absolute; left: 0; top: 0; z-index: -1; width: 20vw; max-width: 500px; height: 100%; overflow: hidden; }
footer .muster img                  { width: 100%; height: auto; }
@media only screen and (orientation: portrait) {
  footer .muster                    { width: 60px; }  
  footer .muster img                { width: auto; height: 100%; }
}

@media only screen and (orientation: portrait) {
body                                { font-size: 18px; } 
}

/* Swiper */
.swiper-gallery                     { max-width: 1600px; margin: 0 auto; }
.swiper-gallery .swiper-slide       { background-color: white; line-height: 0; border-radius: 10px; overflow: hidden; }
.swiper-gallery .swiper-slide img   { width: 100%; height: 100%; object-fit: cover; }
@media only screen and (orientation: portrait) {
.swiper-gallery .swiper-slide       { aspect-ratio: 3 / 2; }
}

/* Fonts */

/* raleway-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v37-latin-300.woff2') format('woff2'); 
}

/* raleway-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v37-latin-regular.woff2') format('woff2'); 
}

/* raleway-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/raleway-v37-latin-500.woff2') format('woff2'); 
}

/* raleway-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/raleway-v37-latin-600.woff2') format('woff2'); 
}

/* yanone-kaffeesatz-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/yanone-kaffeesatz-v32-latin-regular.woff2') format('woff2'); 
}

/* yanone-kaffeesatz-500 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/yanone-kaffeesatz-v32-latin-500.woff2') format('woff2'); 
}

/* yanone-kaffeesatz-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/yanone-kaffeesatz-v32-latin-600.woff2') format('woff2'); 
}

/* Devina Garden */
@font-face {
  font-display: swap; 
  font-family: 'Devina Garden';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dg.woff2') format('woff2'); 
}