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%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
.mod_visitors .invisible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    float: left;
	width:0px;
	height:0px;
}
/**
 * CLICKPRESS CSS-Grid
 * @author: Stefan Schulz-Lauterbach
 *
 * thanks to Dinko Skopljak for co-working
 */
.justify-items-start {
  justify-items: start;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-stretch {
  justify-items: stretch;
}

.content-start {
  align-content: start;
}

.content-center {
  align-content: center;
}

.content-end {
  align-content: end;
}

.items-start {
  align-items: start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: end;
}

.items-stretch {
  align-items: stretch;
}

.items-baseline {
  align-items: baseline;
}

[class*=grid_] {
  display: grid;
  grid-gap: 1rem;
}
[class*=grid_] > .block {
  margin-bottom: 0;
}

@media (min-width: 576px) {
  .grid_mobile_100 {
    grid-template-columns: 1fr;
  }
  .grid_mobile_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_mobile_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_mobile_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_mobile_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_mobile_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_mobile_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_mobile_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_mobile_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_mobile_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_mobile_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_mobile_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_mobile_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_mobile_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_mobile_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_mobile_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .gap_mobile_0 {
    grid-gap: 0;
  }
  .gap_mobile_1 {
    grid-gap: 1rem;
  }
  .gap_mobile_2 {
    grid-gap: 2rem;
  }
  .gap_mobile_3 {
    grid-gap: 3rem;
  }
  .gap_mobile_4 {
    grid-gap: 4rem;
  }
  .gap_mobile_5 {
    grid-gap: 5rem;
  }
  .gap_mobile_6 {
    grid-gap: 6rem;
  }
  .gap_mobile_7 {
    grid-gap: 7rem;
  }
  .gap_mobile_8 {
    grid-gap: 8rem;
  }
  .gap_mobile_9 {
    grid-gap: 9rem;
  }
  .gap_mobile_10 {
    grid-gap: 10rem;
  }
  .gap_mobile_11 {
    grid-gap: 11rem;
  }
  .gap_mobile_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 768px) {
  .grid_tablet_100 {
    grid-template-columns: 1fr;
  }
  .grid_tablet_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_tablet_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_tablet_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_tablet_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_tablet_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_tablet_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_tablet_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_tablet_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_tablet_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_tablet_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_tablet_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_tablet_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_tablet_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_tablet_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_tablet_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_tablet_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_tablet_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_tablet_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .gap_tablet_0 {
    grid-gap: 0;
  }
  .gap_tablet_1 {
    grid-gap: 1rem;
  }
  .gap_tablet_2 {
    grid-gap: 2rem;
  }
  .gap_tablet_3 {
    grid-gap: 3rem;
  }
  .gap_tablet_4 {
    grid-gap: 4rem;
  }
  .gap_tablet_5 {
    grid-gap: 5rem;
  }
  .gap_tablet_6 {
    grid-gap: 6rem;
  }
  .gap_tablet_7 {
    grid-gap: 7rem;
  }
  .gap_tablet_8 {
    grid-gap: 8rem;
  }
  .gap_tablet_9 {
    grid-gap: 9rem;
  }
  .gap_tablet_10 {
    grid-gap: 10rem;
  }
  .gap_tablet_11 {
    grid-gap: 11rem;
  }
  .gap_tablet_12 {
    grid-gap: 12rem;
  }
}
@media (min-width: 992px) {
  .grid_desktop_100 {
    grid-template-columns: 1fr;
  }
  .grid_desktop_50_50 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_33_33_33 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid_desktop_75_25 {
    grid-template-columns: 3fr 1fr;
  }
  .grid_desktop_25_75 {
    grid-template-columns: 1fr 3fr;
  }
  .grid_desktop_66_33 {
    grid-template-columns: 2fr 1fr;
  }
  .grid_desktop_60_40 {
    grid-template-columns: 3fr 2fr;
  }
  .grid_desktop_40_60 {
    grid-template-columns: 2fr 3fr;
  }
  .grid_desktop_33_66 {
    grid-template-columns: 1fr 2fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_50_25_25 {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .grid_desktop_25_50_25 {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid_desktop_25_25_50 {
    grid-template-columns: 1fr 1fr 2fr;
  }
  .grid_desktop_40_30_30 {
    grid-template-columns: 4fr 3fr 3fr;
  }
  .grid_desktop_30_40_30 {
    grid-template-columns: 3fr 4fr 3fr;
  }
  .grid_desktop_30_30_40 {
    grid-template-columns: 3fr 3fr 4fr;
  }
  .grid_desktop_20_40_40 {
    grid-template-columns: 1fr 2fr 2fr;
  }
  .grid_desktop_40_20_40 {
    grid-template-columns: 2fr 1fr 2fr;
  }
  .grid_desktop_40_40_20 {
    grid-template-columns: 2fr 2fr 1fr;
  }
  .grid_desktop_25_25_25_25 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid_desktop_40_20_20_20 {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  .grid_desktop_20_40_20_20 {
    grid-template-columns: 1fr 2fr 1fr 1fr;
  }
  .grid_desktop_20_20_40_20 {
    grid-template-columns: 1fr 1fr 2fr 1fr;
  }
  .grid_desktop_20_20_20_40 {
    grid-template-columns: 1fr 1fr 1fr 2fr;
  }
  .grid_desktop_20_20_20_20_20 {
    grid-template-columns: repeat(5, 1fr);
  }
  .gap_desktop_0 {
    grid-gap: 0;
  }
  .gap_desktop_1 {
    grid-gap: 1rem;
  }
  .gap_desktop_2 {
    grid-gap: 2rem;
  }
  .gap_desktop_3 {
    grid-gap: 3rem;
  }
  .gap_desktop_4 {
    grid-gap: 4rem;
  }
  .gap_desktop_5 {
    grid-gap: 5rem;
  }
  .gap_desktop_6 {
    grid-gap: 6rem;
  }
  .gap_desktop_7 {
    grid-gap: 7rem;
  }
  .gap_desktop_8 {
    grid-gap: 8rem;
  }
  .gap_desktop_9 {
    grid-gap: 9rem;
  }
  .gap_desktop_10 {
    grid-gap: 10rem;
  }
  .gap_desktop_11 {
    grid-gap: 11rem;
  }
  .gap_desktop_12 {
    grid-gap: 12rem;
  }
}

/*# sourceMappingURL=clickpress-grid.css.map */

html { font-family: 'Montserrat';color:#fff;
background: #000000;font-size:1em;
background: radial-gradient(circle, rgba(80, 80, 80, 1) 0%, rgba(30, 30, 30, 1) 26%, rgba(0, 0, 0, 1) 100%);}
body {font-size:1em;}


/* montserrat-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 200;
  src: url('../../files/fonts/montserrat-v31-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../../files/fonts/montserrat-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../../files/fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../../files/fonts/montserrat-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../../files/fonts/montserrat-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../../files/fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../../files/fonts/montserrat-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: url('../../files/fonts/montserrat-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


#wrapper {max-width:1400px;margin:0 auto;padding:20px;}

/* varela-round-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  src: url('../../files/fonts/varela-round-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.logo {text-align:center;margin:50px auto;max-width:400px;}

.bekanntbox {background:rgba(255, 255, 255, 0.05);border:1px #B4963F solid;border-radius:0px;padding:20px;text-align:center;}
.nlbox {background:rgba(255, 255, 255, 0.05);border:1px #B4963F solid;border-radius:0px;margin:40px 0;padding:20px;text-align:center;}
.nlbox a, .nlbox a:active, .nlbox a:visited {color:#000000 !important;background:#B4963F;border:1px #B4963F solid;border-radius:0px;display:inline-block;padding:10px 20px;text-decoration:none;}
.nlbox a:hover {color:#ffffff !important;background:#B4963F;}

h1 {font-size:3.5em;text-transform:uppercase}
h2 {font-size:2.5em;padding-bottom:-5px !important;margin:0;    line-height: 1em;text-transform:uppercase}
h3 {font-size:1.5em;padding:0;margin:0;padding-top:10px;text-transform:uppercase}

footer {font-size:0.9em;opacity:0.5;}
footer a, footer a:active,footer a:visited {color:#fff;text-decoration:none;}

main a, main a:active, main a:visited {color:#B4963F;}

  .bereich1,
  .bereich2,
  .bereich3 {cursor:pointer;}
  
  .bereich1 h3,
  .bereich2 h3,
  .bereich3 h3 {font-weight:400;}
  
    .bereich1 h2,
  .bereich2 h2,
  .bereich3 h2{
    position: relative;
    margin-bottom: 0px;
    padding-bottom: 18px;
  }
  .bereich2 figure {text-align:center;}
  
  .bereich2 img {height:150px;width:auto;transform: rotate(5deg);}
  
  .bereich1 h2::after,
  .bereich2 h2::after,
    .bereich3 h2::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 72%;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(180,150,63,0),
      rgba(180,150,63,0.6),
      rgba(180,150,63,0)
    );
  }


.bereich1 {padding-bottom:5em;}
.bereich2 {padding-bottom:8em;margin-right:120px;}

.slogan {font-size:1.25em;}
.bekanntbox ul {margin:0;padding:0;margin-top:25px;}
.bekanntbox li {list-style-type:none;}
.bekanntbox ul span {display:flex;align-items: center;color:#B4963F;
    justify-content: space-evenly;}
        .bildschatten {}
        
    .bildschatten img {-webkit-box-shadow: 0px 0px 50px 10px rgba(0,0,0,0.5); 
box-shadow: 0px 0px 50px 10px rgba(0,0,0,0.5);margin:50px 20px;}

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

@media (max-width: 992px) {
    h1 {font-size:2.5em;}
    h2 {font-size:1.75em;}
    h3 {font-size:1.25em;}
}

@media (max-width: 768px) {
    .spalte1 {display:none;}
    main .spalte3 img {max-height:150px;width:auto;}
    .bereich1 {padding-bottom:2em;}
.bereich2 {padding-bottom:2em;margin-right:0px;}
.slogan {margin:20px 0 40px 0;}
.bekanntbox {margin-bottom:20px;}

.start .grid_mobile_50_50 {        grid-template-columns: repeat(2, 1fr);}
.julia .content-image figure {    width: 150%;
    margin-left: -50%;}
    main .block {overflow:visible;}



  .spalte3 {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  .bereich1,
  .bereich2,
  .bereich3 {

    text-align: center;
    padding: 22px 16px 24px;
    margin: 0;
    border-radius: 20px;
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.04),
      rgba(255,255,255,0.015)
    );
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  }

  .bereich1 figure,
  .bereich3 figure {
    margin: 0 0 14px;
  }

  .bereich1 h2,
  .bereich2 h2,
  .bereich3 h2 {
    margin: 0 0 10px;
    line-height: 1.05;
  }

  .bereich1 h3,
  .bereich2 h3,
  .bereich3 h3 {
    margin: 0;
    line-height: 1.35;
  }




}


.max500 {max-width:500px}

iframe {max-width:100% !important;min-height:290px !important}

@media (max-width: 575px) {
        h1 {font-size:2em;}
    h2 {font-size:1.5em;}
    h3 {font-size:1.1em;}
    footer {font-size:0.8em;}
    .max500 {max-width:100%}
    
}

strong, b {font-weight:500 !important;}
h1 strong, h2 strong, h3 strong, h1 b, h2 b, h3 b {font-weight:700 !important;}
/* Heller Look (Entwurf A hell v2) für alle Seiten, dazu das Hub-Raster der Startseite (Klasse "hub").
   Überschreibt das dunkle custom_relaunch.css, das vorher geladen wird. */
html { background:#fff; color:#1a1a1a; }
body {
  --gold:#b4963f; --gold-d:#9a7e33; --dark:#1a1a1a; --warm:#faf8f3; --muted:#7a7468; --line:#eee6d6;
  background:#fff; color:var(--dark); font-family:'Montserrat', sans-serif; margin:0;
}
#wrapper { min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; padding:clamp(14px, 2.4vh, 28px) clamp(20px, 3vw, 48px); gap:clamp(12px, 2vh, 22px); box-sizing:border-box; }
body.hub a { color:inherit; text-decoration:none; }
body.hub #container, body.hub #main, body.hub #main > .inside { height:100%; min-height:0; }
body.hub #main > .inside { display:flex; flex-direction:column; justify-content:center; }

/* Header: Logo links, klein */
#header, #header .inside { padding:0; margin:0; text-align:left; }
#header .logo, #header figure, #header .content-image { margin:0; max-width:none; text-align:left; }
#header img { height:clamp(12px, 1.6vh, 16px); width:auto; filter:brightness(0); display:block; }

/* Unterseiten: Inhalt auf hellem Grund */
body:not(.hub) #main > .inside { max-width:1100px; margin:clamp(24px, 6vh, 64px) auto; }
body:not(.hub) #main { color:#333; font-size:15px; line-height:1.7; }
body:not(.hub) #main h1, body:not(.hub) #main h2, body:not(.hub) #main h3 { color:var(--dark); font-family:'Montserrat', sans-serif; text-transform:uppercase; letter-spacing:.03em; line-height:1.1; }
body:not(.hub) #main h1 { font-size:clamp(30px, 4vw, 52px); font-weight:700; margin:0 0 28px; padding-bottom:18px; position:relative; }
body:not(.hub) #main h1::after { content:""; position:absolute; left:0; bottom:0; width:56px; height:3px; background:var(--gold); }
body:not(.hub) #main .text-center h1::after, body:not(.hub) #main h1[style*="center"]::after { left:50%; transform:translateX(-50%); }
body:not(.hub) #main h2 { font-size:clamp(22px, 2.6vw, 34px); font-weight:300; margin:32px 0 12px; }
body:not(.hub) #main h2 strong, body:not(.hub) #main h2 b { font-weight:700 !important; }
body:not(.hub) #main h3 { font-size:clamp(15px, 1.4vw, 18px); font-weight:700; margin:24px 0 8px; }
body:not(.hub) #main [style*="color: rgb(255, 255, 255)"], body:not(.hub) #main [style*="color:#fff"], body:not(.hub) #main [style*="color: #fff"] { color:var(--dark) !important; }
body:not(.hub) #main a { color:var(--gold-d); text-decoration:underline; text-underline-offset:3px; }
body:not(.hub) #main a:hover { color:var(--gold); }
body:not(.hub) #main iframe { border:1px solid var(--line) !important; background:var(--warm); }
body:not(.hub) #main strong, body:not(.hub) #main b { color:var(--dark); }
body:not(.hub) #main ol, body:not(.hub) #main ul { padding-left:1.2em; }

/* Spalten-Raster für Element-Gruppen (ersetzt das Clickpress-Grid): Klasse "raster raster-50-50" usw.
   Wie Clickpress: 1rem Abstand, Spalten ab 768 px, darunter eine Spalte */
.raster { display:grid; grid-template-columns:1fr; gap:1rem; align-items:center; }
.raster-spalte > :first-child { margin-top:0; }
@media (min-width:768px) {
  .raster-50-50 { grid-template-columns:1fr 1fr; }
  .raster-33-33-33 { grid-template-columns:repeat(3, 1fr); }
  .raster-66-33 { grid-template-columns:2fr 1fr; }
}
#footer .raster { align-items:center; }

/* Raster: links PlanB und Shop, Mitte Bildrahmen, rechts Social Media und Newsletter */
body.hub .mod_article.hub { height:100%; display:grid; grid-template-columns:1fr minmax(0, auto) 1fr; grid-template-rows:1fr 1fr;
  grid-template-areas:"planb frame social" "shop frame newsletter"; gap:clamp(12px, 2vh, 20px) clamp(16px, 2.4vw, 40px); max-height:640px; margin:auto 0; align-self:center; }
body.hub .hub-planb { grid-area:planb; } body.hub .hub-shop { grid-area:shop; }
body.hub .hub-frame { grid-area:frame; } body.hub .hub-social { grid-area:social; } body.hub .hub-newsletter { grid-area:newsletter; }
body.hub .mod_article.hub > * { margin:0; min-height:0; }

/* Kacheln */
body.hub .hub-tile { position:relative; background:var(--warm); border:1px solid var(--line); padding:clamp(16px, 2.4vh, 28px); display:grid; grid-template-columns:1fr 44%; grid-template-rows:auto auto; align-items:center; column-gap:16px; overflow:hidden; transition:border-color .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
body.hub .hub-tile .content-text { grid-column:1; grid-row:1; }
body.hub .hub-tile .content-image { grid-column:2; grid-row:1 / span 2; margin:0; }
body.hub .hub-tile .content-image img { width:100%; height:auto; max-height:clamp(120px, 24vh, 240px); object-fit:contain; display:block; transition:transform .5s; }
body.hub .hub-tile .content-hyperlink { grid-column:1; grid-row:2; margin-top:10px; }
body.hub .hub-tile .content-hyperlink a { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
body.hub .hub-tile .content-hyperlink a::after { content:""; position:absolute; inset:0; }
body.hub .hub-tile:hover { border-color:var(--gold); transform:translateY(-3px); }
body.hub .hub-tile:hover .content-image img { transform:scale(1.06); }

body.hub .hub-tile .rte p, body.hub .hub-tile .rte h2 { margin:0; }
body.hub .hub-tile .hub-label { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-d); font-weight:600; }
body.hub .hub-tile h2 { font-size:clamp(18px, 2.8vh, 28px); line-height:1.05; text-transform:uppercase; letter-spacing:.03em; font-weight:300; color:var(--dark); margin:6px 0 !important; }
body.hub .hub-tile h2 strong { font-weight:700; display:block; }
body.hub .hub-tile .rte p:not(.hub-label) { font-size:13px; color:var(--muted); }

/* Kacheln ohne Bild: Social Media, Newsletter */
body.hub .hub-plain { grid-template-columns:1fr; align-content:center; }
body.hub .hub-plain:hover { transform:none; }
body.hub .hub-social .content-hyperlink { grid-row:auto; margin:0; }
body.hub .hub-social .content-hyperlink:first-of-type { margin-top:10px; }
body.hub .hub-social .content-hyperlink a { display:flex; align-items:center; gap:10px; position:relative; padding:clamp(6px, 1vh, 10px) 0; border-bottom:1px solid #e6dcc8; font-size:13px; letter-spacing:.06em; color:var(--dark); font-weight:700; }
/* Icons aus files/icons (weiße Glyphen), per Maske in Gold eingefärbt */
body.hub .hub-social .content-hyperlink a::before { content:""; flex:0 0 22px; width:22px; height:22px; background:var(--gold); -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }
body.hub .hub-social a[href*="instagram"] { --icon:url("../../files/icons/insta.svg"); }
body.hub .hub-social a[href*="tiktok"] { --icon:url("../../files/icons/tiktok.svg"); }
body.hub .hub-social a[href*="facebook"] { --icon:url("../../files/icons/facebook.svg"); }
body.hub .hub-social .content-hyperlink a::after { content:"→"; position:absolute; inset:auto 0 auto auto; color:var(--gold); }
body.hub .hub-social .content-hyperlink a:hover { color:var(--gold); }
/* Newsletter: Akkordeon (Standard-Element) mit Alias auf das KlickTipp-Formular */
body.hub .hub-newsletter { overflow:visible; z-index:5; }
body.hub .hub-nl-box { position:relative; margin-top:14px; }
body.hub .hub-nl-box .handorgel__header { margin:0; font-size:inherit; }
body.hub .hub-nl-box .handorgel__header__button { display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; background:var(--gold); color:#fff;
  font:700 12px/1 'Montserrat', sans-serif; letter-spacing:.12em; text-transform:uppercase; padding:13px 22px; transition:background .3s; }
body.hub .hub-nl-box .handorgel__header__button::after { content:"+"; font-size:16px; font-weight:400; transition:transform .3s; }
body.hub .hub-nl-box .handorgel__header--open .handorgel__header__button::after { transform:rotate(45deg); }
body.hub .hub-nl-box .handorgel__header__button:hover, body.hub .hub-nl-box .handorgel__header--open .handorgel__header__button { background:var(--dark); }
body.hub .hub-nl-box .handorgel__content { position:absolute; left:calc(-1 * clamp(16px, 2.4vh, 28px) - 1px); right:calc(-1 * clamp(16px, 2.4vh, 28px) - 1px); top:calc(100% + 12px);
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold); box-shadow:0 24px 50px -20px rgba(0,0,0,.35); z-index:30; }
body.hub .hub-nl-box .handorgel__content:not(.handorgel__content--open) { border-width:0; box-shadow:none; }
body.hub .hub-nl-box .handorgel__content__inner { padding:16px; }
body.hub .hub-nl-box .handorgel__content__inner iframe { min-height:330px !important; }
/* KlickTipp lädt das Formular nach dem Öffnen nach, deshalb Höhe freigeben (sonst abgeschnitten) */
body.hub .hub-nl-box .handorgel__content--open { height:auto !important; }
/* Ohne Höhen-Animation feuert handorgel kein transitionend, Inhalt daher direkt einblenden */
body.hub .hub-nl-box .handorgel__content--open .handorgel__content__inner { opacity:1 !important; }
body.hub .hub-nl-box .handorgel__header__button:focus { outline:none; }
body.hub .hub-nl-box .handorgel__header__button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
/* Contao gibt Artikeln .block mit overflow:hidden, die schwebende Box muss heraus */
body.hub .mod_article.hub { overflow:visible; }

/* Bildrahmen in der Mitte */
body.hub .hub-frame { position:relative; height:min(100%, 640px); aspect-ratio:1; border:3px solid var(--gold); overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:6%; box-sizing:border-box; align-self:center; }
body.hub .hub-frame .content-image, body.hub .hub-frame figure { position:absolute; inset:0; margin:0; }
body.hub .hub-frame img { width:100%; height:100%; object-fit:cover; display:block; }
body.hub .hub-frame::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 50%, rgba(255,255,255,.96) 78%); z-index:1; }
body.hub .hub-frame .content-text { position:relative; z-index:2; }
body.hub .hub-frame .rte p { margin:0; }
body.hub .hub-name { font-size:clamp(26px, 4.2vh, 44px); letter-spacing:.04em; line-height:1; font-weight:300; color:var(--dark); }
body.hub .hub-name strong { font-weight:700; }
body.hub .hub-claim { font-weight:800; font-style:italic; color:var(--gold); font-size:clamp(16px, 2.4vh, 24px); margin-top:8px !important; }

/* Footer kompakt */
#footer { border-top:1px solid var(--line); padding-top:clamp(10px, 1.6vh, 16px); font-size:13px; color:var(--dark); opacity:1; }
#footer, #footer * { color:var(--dark); background:none; }
#footer a:hover { color:var(--gold); }
#footer p { margin:0; }

/* Mobil: Bild oben, Kacheln 2 × 1, Social und Newsletter volle Breite */
@media (max-width:980px) {
  body.hub #wrapper { min-height:0; }
  body.hub .mod_article.hub { grid-template-columns:1fr 1fr; grid-template-rows:none; max-height:none;
    grid-template-areas:"frame frame" "planb shop" "social social" "newsletter newsletter"; }
  body.hub .hub-frame { height:auto; width:100%; aspect-ratio:4/3; padding:16px; }
  body.hub .hub-frame img { object-position:50% 20%; }
  body.hub .hub-frame::after { background:linear-gradient(transparent 40%, rgba(255,255,255,.97) 72%); }
  body.hub .hub-name { font-size:24px; } body.hub .hub-claim { font-size:15px; color:var(--gold-d); }
  body.hub .hub-tile { grid-template-columns:1fr; padding:14px; row-gap:8px; }
  body.hub .hub-tile .content-image { grid-column:1; grid-row:1; }
  body.hub .hub-tile .content-image img { height:64px; max-height:none; }
  body.hub .hub-tile .content-text { grid-row:2; }
  body.hub .hub-tile .content-hyperlink { display:none; }
  body.hub .hub-tile h2 { font-size:17px; }
  body.hub .hub-tile:not(.hub-plain) .rte p:not(.hub-label) { display:none; }
  body.hub .hub-plain { padding:16px; }
  body.hub .hub-plain h2 strong { display:inline; }
  body.hub .hub-plain .content-text { grid-row:auto; }
  /* Social Media mobil wie am Desktop: Liste mit Icon, Name, Pfeil */
  body.hub .hub-social .content-hyperlink { display:block; grid-column:1; grid-row:auto; margin:0; }
  body.hub .hub-social .content-hyperlink a { padding:12px 0; font-size:13px; }
  /* Newsletter mobil: Box klappt im Fluss auf */
  body.hub .hub-nl-box .handorgel__header__button { width:100%; justify-content:center; padding:15px 22px; }
  body.hub .hub-nl-box .handorgel__content { position:static; margin-top:10px; box-shadow:none; }
  #footer { text-align:center; }
}