/*###orange  #e96c07*/
/*###türkis  #009770*/
/*###grau  #706f6f*/

/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-pro-v21-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-sans-pro-v21-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v21-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v21-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-600italic - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-pro-v21-latin-600italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-sans-pro-v21-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v21-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v21-latin-600italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-700 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-pro-v21-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-sans-pro-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v21-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* source-sans-pro-900 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/source-sans-pro-v21-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/source-sans-pro-v21-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-sans-pro-v21-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-sans-pro-v21-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-sans-pro-v21-latin-900.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

body {font-family: 'Source Sans Pro', sans-serif !important;}


* {
  margin: 0;
  padding: 0;
}

/* scroll-padding-top steht jetzt in css/tokens.css und haengt dort an
   der tatsaechlichen Kopfhoehe. Der feste Wert von 200px hat zu keiner
   einzigen der vier Bildschirmbreiten gepasst. */

@media (min-width:1400px) {
 .container,
 .container-sm,
 .container-md,
 .container-lg,
 .container-xl,
 .container-xxl {
  max-width:1512px
 }
}

/* .frame-container-default stand frueher in der Liste darueber und
   war dadurch ab 1400px 1512px breit - 145px breiter als das Menue.
   Die Breite der Inhaltselemente kommt jetzt aus der Regel weiter
   unten im Abschnitt INHALTSBREITE. */


main a {
  color:#52bfd3 ;
  text-decoration: none;
}
td, tr {}


.frame-custom-22 .gallery-item img {  width: 80%;}
.frame-custom-23 .gallery-item img {  width: 60%;}
.frame-custom-24 .gallery-item img {  width: 40%;}
.frame-custom-25 .gallery-item img {  width: 20%;}
.frame-custom-26 .gallery-item img {  width: 10%;}

.frame-custom-27 .gallery-item img {  width: 80%;float: left;}
.frame-custom-28 .gallery-item img {  width: 60%;float: left;}
.frame-custom-29 .gallery-item img {  width: 40%; float: left;}
.frame-custom-30 .gallery-item img {  width: 20%;float: left;}
.frame-custom-31 .gallery-item img {  width: 10%;float: left;}



.frame a[class=""], .frame a:not([class]) {
  color: #303030;
}

.container .row .col .row .container {padding:0;}
.container .row .col .row .container .row {padding:0; margin:0;}
.container .row .col .row .container .row .col {padding:0; margin:0;}
/* main h2 {font-size: 2rem;} entfernt - steht jetzt im Abschnitt
   UEBERSCHRIFTEN weiter unten, abhaengig von der Header Class. */

/* Brotkrumen: Optik seit 23.09.2026 in css/brotkrumen.css.
   Hier bleibt nur das Ausblenden auf der Startseite. */
#pageid1 .breadcrumps {display: none;}

/* Der gesamte Kopfbereich steckt seit dem 16.09.2026 in css/menu.css.
   Die Regeln fuer .kopfbereich, .mobilehead und #hamburger sind
   hier ersatzlos entfernt - das Markup gibt es nicht mehr. */
/* Die Fusszeile steckt seit dem 17.09.2026 in css/footer.css.
   Die frueheren Regeln fuer "footer", ".footer_social_wrapper" und
   ".copyright" sind hier ersatzlos entfernt - sie haben die neue
   Fusszeile ueberschrieben, unter anderem mit einem schwarzen
   Hintergrund und einem "!important" auf der Hover-Farbe. */


main .frame a:not([class]) {   color: #373e42;}

main a {
  color: #52bfd3 !important;
}

main a:hover {color:#313131;}
main .table {max-width: 100%;}

.hellgrau {background: #efeeee; margin-bottom: 5%; margin-top: 5%; border: 4px solid white; box-shadow: 0px 0px 7px black;}


.tx-powermail   .col-sm-2 {    width: 100%;  }



/* ============================================================
   UEBERSCHRIFTEN h1 bis h5
   Stand: 17.09.2026

   Zwei Felder im Backend, zwei Aufgaben:
     "Typ"          -> welches Tag herauskommt (Bedeutung, SEO)
     "Header Class" -> wie die Ueberschrift aussieht (Optik)

   Das Aussehen haengt deshalb an den Klassen .h1 bis .h5, die
   "Header Class" ausgibt - nicht am Tag. Nur wenn dort nichts
   gewaehlt ist, liefert das Tag selbst die Optik. Eine h1 (Typ)
   mit Header Class "h2" sieht also aus wie eine h2, bleibt fuer
   Suchmaschinen und Screenreader aber die Hauptueberschrift.

   "Standard" bei Typ gibt h1 aus. Das ist keine Optik, sondern
   eine Einstellung und steht deshalb in autogentechnik.typoscript
   (lib.contentElement.settings.defaultHeaderType = 1).

   Bootstrap_package legt den Ueberschriftentext in ein <span>.
   Der Unterstrich der ersten Ebene haengt an diesem span - damit
   ist er immer genau so lang wie der Text (bei Umbruch: wie jede
   Zeile) und sitzt bei linker, zentrierter und rechter Ausrichtung
   richtig, ohne dass das CSS die Ausrichtung kennen muss.
   Ueberschriften ohne span (z.B. aus der Fluid-Vorlage) faengt
   die zweite Regelgruppe ab.

   Groessen: siehe die vier Bloecke am Ende dieses Abschnitts.
   Farben: in css/tokens.css unter "Ueberschriften".
   ============================================================ */

:root {
    /* Groessen ab 1440px. Die drei kleineren Breiten stehen
       weiter unten und setzen nur diese Werte neu. */
    --atg-h1-fs: 44px;
    --atg-h2-fs: 32px;
    --atg-h3-fs: 23px;
    --atg-h4-fs: 13px;
    --atg-h5-fs: 18.5px;

    /* Erste Ebene: Zeilenhoehe. 1.3 statt 1.14, seit der Strich
       bei Umbruch unter jeder Zeile liegt (23.10.2026) - bei 1.14
       blieben zwischen Strich und naechster Zeile nur 2,4 px. */
    --atg-h1-lh: 1.3;

    /* Unterstrich der ersten Ebene */
    --atg-h-rule: 3px;
    /* sichtbare Luft zwischen Unterlaenge (g, p) und Strich */
    --atg-h-rule-air: 2px;
    /* Strich -> naechster Inhalt, zusaetzlich zu .42em */
    --atg-h-rule-gap: 10px;

    /* Abgeleitete Werte, nicht von Hand aendern. Die em-Werte sind
       Masse der Schrift Source Sans Pro (an der Live-Seite
       gemessen, 23.10.2026):
       .049em  = Abstand Unterkante Schriftkasten -> Unterlaenge "g"
       .021em  = Unterkante Zeilenkasten -> Unterkante Schriftkasten
                 bei Zeilenhoehe 1.3, abgezogen vom Innenabstand.
       --atg-h-rule-hang ist damit, wie weit der Strich der letzten
       Zeile unter den Zeilenkasten ragt. Die Ueberschrift bekommt
       genau diesen Innenabstand unten, damit ihre Unterkante wie
       vorher mit der Unterkante des Strichs zusammenfaellt.
       Wer --atg-h1-lh aendert, muss .021em neu messen. */
    --atg-h-rule-pad: calc(var(--atg-h-rule-air) + var(--atg-h-rule) - .049em);
    --atg-h-rule-hang: calc(var(--atg-h-rule-pad) - .021em);
}

/* ---------- Gemeinsame Grundlage ---------- */

main :is(h1, h2, h3, h4, h5) {
    font-family: var(--atg-font);
    margin: 0 0 .42em;
    padding: 0;
    /* verteilt die Zeilen einer umbrechenden Ueberschrift
       gleichmaessig, statt eine kurze Restzeile zu lassen */
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: manual;
}

/* ---------- Ebene 1 ---------- */

main .h1,
main h1:not(.h1, .h2, .h3, .h4, .h5) {
    font-size: var(--atg-h1-fs);
    font-weight: 700;
    line-height: var(--atg-h1-lh);
    letter-spacing: -.012em;
    color: var(--atg-h1);
    /* Der Strich der letzten Zeile haengt an einem inline-span und
       zaehlt nicht zur Hoehe der Zeile. Der Innenabstand unten holt
       ihn in den Kasten der Ueberschrift zurueck - so endet die
       Ueberschrift wie vorher an der Unterkante des Strichs, und
       alle Abstaende darunter bleiben unveraendert (Innenabstand
       statt margin, weil margin mit dem Folgeelement verschmilzt). */
    padding-bottom: var(--atg-h-rule-hang);
    margin-bottom: calc(.42em + var(--atg-h-rule-gap));
}

/* Unterstrich am span, UNTER JEDER ZEILE (Festlegung 23.10.2026).
   Gezeichnet als Hintergrundverlauf, weil sich dessen Breite - anders
   als die eines Pseudoelements - weich animieren laesst.

   display: inline + box-decoration-break: clone: bricht die
   Ueberschrift um, zerfaellt der span in ein Stueck je Zeile, und
   jedes Stueck bekommt seinen eigenen Strich in seiner eigenen
   Laenge (clone). Ohne clone bekaeme nur das letzte Stueck den
   Innenabstand und der Strich laege nur unter der letzten Zeile.
   Bis 23.10.2026 war der span inline-block - ein Kasten, ein
   Strich unter dem ganzen Block.

   Der Innenabstand eines inline-Elements veraendert die Zeilen-
   hoehe nicht; der Strich liegt in der Luft zwischen den Zeilen.
   Deshalb die groessere Zeilenhoehe (--atg-h1-lh).

   Der Sammelselektor :is(.h1, h1:not(...)) meint ueberall dasselbe:
   "alles, was wie Ebene 1 aussieht" - also jede Ueberschrift mit
   Header Class h1 und jede h1 ohne Header Class. */
main :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)) > span {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding-bottom: var(--atg-h-rule-pad);
    background-image: linear-gradient(var(--atg-h-underline), var(--atg-h-underline));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 var(--atg-h-rule);
    transition: background-size .75s cubic-bezier(.22, .61, .36, 1);
}

/* Ueberschrift ohne span (kam am 23.10.2026 auf keiner Seite vor):
   hier traegt die Ueberschrift selbst den Strich, als ein Kasten -
   bei Umbruch also nur EIN Strich unter dem ganzen Block. Ein
   Strich je Zeile geht nur mit einem inline-Element im Inneren. */
main :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)):not(:has(> span)) {
    display: inline-block;
    max-width: 100%;
    padding-bottom: var(--atg-h-rule-pad);
    background-image: linear-gradient(var(--atg-h-underline), var(--atg-h-underline));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 var(--atg-h-rule);
    transition: background-size .75s cubic-bezier(.22, .61, .36, 1);
}

/* Ohne span muss die Ueberschrift auf Textbreite schrumpfen,
   sonst liefe der Strich durch den ganzen Container. */
main :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)):not(:has(> span)) {
    width: fit-content;
}

/* Der Strich faehrt ein, sobald die Ueberschrift ins Bild scrollt.
   Ausgeloest wird das von js/effekte.js: dort haengt seit dem
   17.09.2026 ein IntersectionObserver an jeder Ueberschrift der
   ersten Ebene und setzt die Klasse atg-rule-in, sobald sie
   sichtbar wird. Danach wird sie nicht mehr beobachtet - der
   Strich faehrt also einmal ein und bleibt.

   Vorher stand hier eine reine CSS-Loesung mit
   "animation-timeline: view()". Die Regel war richtig und der
   Browser kann sie auch - aber die Zeitachse blieb inaktiv
   (progress: null), weil sie im Seitenaufbau von bootstrap_package
   keinen scrollbaren Vorfahren findet. Der Strich stand deshalb
   statisch da, statt einzufahren. */
main :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)).atg-rule-in > span,
main :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)).atg-rule-in:not(:has(> span)) {
    background-size: 100% var(--atg-h-rule);
}

/* Ist JavaScript abgeschaltet, steht der Strich einfach sofort da. */
@media (scripting: none) {
    main :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)) > span,
    main :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)):not(:has(> span)) {
        background-size: 100% var(--atg-h-rule);
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    main :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)) > span,
    main :is(.h1, h1:not(.h1, .h2, .h3, .h4, .h5)):not(:has(> span)) {
        transition: none;
    }
}

/* ---------- Ebene 2 ---------- */

main .h2,
main h2:not(.h1, .h2, .h3, .h4, .h5) {
    font-size: var(--atg-h2-fs);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.006em;
    color: var(--atg-h2);
}

/* ---------- Ebene 3 ---------- */

main .h3,
main h3:not(.h1, .h2, .h3, .h4, .h5) {
    font-size: var(--atg-h3-fs);
    font-weight: 600;
    line-height: 1.32;
    color: var(--atg-h3);
}

/* ---------- Ebene 4: Kontextzeile ueber einer Ebene 1 ---------- */

main .h4,
main h4:not(.h1, .h2, .h3, .h4, .h5) {
    font-size: var(--atg-h4-fs);
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--atg-h4);
    margin-bottom: .95em;
}

/* ---------- Ebene 5: Titel in Karten, Teasern und News ---------- */

main .h5,
main h5:not(.h1, .h2, .h3, .h4, .h5) {
    font-size: var(--atg-h5-fs);
    font-weight: 600;
    line-height: 1.35;
    color: var(--atg-h5);
    margin-bottom: .35em;
}

/* Zweite Verwendung fuer Ebene 5: Label-Zeile im Fliesstext
   (FAQ-Frage, technische Daten, die zwei Oeffnungszeiten-Bloecke).
   Wird ueber die Klasse atg-label zugeschaltet. */
main .atg-label {
    border-left: 3px solid var(--atg-accent);
    padding-left: 12px;
    margin-bottom: .3em;
}

/* ============================================================
   INHALTSBREITE: Inhalt steht auf derselben Kante wie das Menue
   Stand: 17.09.2026

   Jedes Inhaltselement steckt in einem .frame-container. Der kam
   bisher aus Bootstrap und war ab 1400px 1512px breit, das Menue
   dagegen 1240px - Ueberschriften ragten links und rechts ueber
   die Menueleiste hinaus.

   Hier bekommt der Container dieselbe Geometrie wie .atg-container
   in css/menu.css: hoechstens --atg-content-max breit, seitlich
   --atg-gutter Abstand. Beide Werte stehen in css/tokens.css und
   werden von menu.css je Breite neu gesetzt. Aendert sich der
   Seitenrand des Menues, wandert der Inhalt automatisch mit.

   Gilt auf allen vier Breiten. Seit dem 18.09.2026 auch auf den
   beiden kleinen: dort war der Inhalt vorher schmaler als das
   Menue (14px je Seite bei 768-1023, 4px am Handy), und
   Ueberschriften standen sichtbar versetzt unter der Menueleiste.

   Es gibt bewusst KEINE eigenen Werte je Breite. Die Regel greift
   auf --atg-gutter und --atg-content-max zu, und die setzt
   menu.css ohnehin schon fuer jede Breite:
   100px / 32-80px / 30px / 20px / 16px ab 379px abwaerts.

   Nicht betroffen: Elemente mit der Klasse .hunderter und die
   .headerimage-Buehne. Beide setzen padding und max-width mit
   hoeherer Spezifitaet bzw. !important und bleiben randlos.
   ============================================================ */

main .frame-container {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--atg-content-max) + 2 * var(--atg-gutter));
    margin-inline: auto;
    padding-inline: var(--atg-gutter);
}


/* ============================================================
   Die drei kleineren Breiten. Hier werden nur die fuenf
   Groessen neu gesetzt - Farben, Gewichte und der Unterstrich
   bleiben ueberall gleich.
   ============================================================ */

/* 1024 bis 1439px. Zwischen 1024 und 1280px laufen die Werte
   gleitend mit, genau wie im Kopfbereich: bei 1024px steht am
   wenigsten Platz zur Verfuegung, ab 1280px entspricht die
   Groesse der Design-Vorlage. */
@media (max-width: 1439.98px) {
    :root {
        --atg-h1-fs: clamp(34px, 0.625rem + 2.34375vw, 40px);
        --atg-h2-fs: clamp(26px, 0.625rem + 1.5625vw, 30px);
        --atg-h3-fs: 21px;
        --atg-h4-fs: 12.5px;
        --atg-h5-fs: 17.5px;
        --atg-h-rule-gap: 9px;
    }
}

/* 768 bis 1023px */
@media (max-width: 1023.98px) {
    :root {
        --atg-h1-fs: 30px;
        --atg-h2-fs: 24px;
        --atg-h3-fs: 20px;
        --atg-h4-fs: 12px;
        --atg-h5-fs: 17px;
        --atg-h-rule-gap: 8px;
    }
}

/* bis 767px. Lange Ueberschriften brechen hier zwangslaeufig um -
   bei 335px Inhaltsbreite passt keine Zeile mit 40 Zeichen in eine
   Zeile. text-wrap: balance verteilt die Zeilen gleichmaessig. */
@media (max-width: 767.98px) {
    :root {
        --atg-h1-fs: 27px;
        --atg-h2-fs: 21px;
        --atg-h3-fs: 18.5px;
        --atg-h4-fs: 11.5px;
        --atg-h5-fs: 16.5px;
        --atg-h-rule: 2px;
        --atg-h-rule-gap: 7px;
    }
}


.carousel-item-bodytext a {background-color:#216096; color:#fff !important; ; padding: 6px 14px; border-radius: 4px;}
.carousel-item-bodytext a:hover {background-color:#009770 !important; }
/*###SUCHE*/


.slick-slide img {
    display: block;
    width: 100%;
	margin: 0 auto;
}

.slider {
	display: table !important;
	table-layout: fixed !important;
	width: 100% !important;
	position: relative;
	background: #888;
}
.slick-prev, .slick-next {z-index: 100000;}
slider .container {max-width: inherit !important; width: 100% !important;}
slider .container .col, slider .container, 
slider .container .row {padding: 0; margin:0;}
slider h2 {display: none !important;}

 .slick-prev {left: 25px !important;}
.slick-next {right: 25px !important;}

.slick-next::before,
.slick-prev::before {color:#52bfd3; font-size: 30px;}

ul.slick-dots {
    bottom: 3% !important;
}

span.resetbutt a {max-width: 180px !important;}
/*###SUCHE*/






header .btn-tertiary {
  color: #000000;
	background-color: #efeeee;}

.hintergrundbild {
	/* Hintergrundbild entfernt: lag auf einer fremden Domain und wurde
	   unverschluesselt (http://) geladen -> vom Browser blockiert.
	   Ersatzbild ins fileadmin legen und hier eintragen. */
	background-repeat: no-repeat;
	height: auto;
    width: 100%;
    background-size: cover;

	padding: 5%;
}

.hintergrundbild p{
    color: white;
}
.hintergrundbild h2{
    color: white !important;
}



span.submitbutt input{
  box-sizing: border-box !important;
  display: inline-block!important;
  font-size: .888em!important;
  padding: 0.85em 0.2rem !important;
  line-height: 1em!important;
  color: #262626!important;
  background-color: #fff !important;
  border: 2px solid #262626!important;
  border-radius: 1.5em !important;
  text-decoration: none !important;
  text-align: center !important;
  margin: 0 !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  -webkit-transition: all .15s !important;
  transition: all .15s !important;
  margin-left: 10px !important;
  max-width: 120px !important;
  min-width: 100px !important;
}

#pageid2 .breadcrumps {display: none;}

.language ul li a {
    color: #fff;
}




.t3s-slickslider .slick-slide {
  padding: 0.1%;
}

/*++++++ Back to top btn ++++*/

#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
	z-index: 100000;
	border-radius: 2rem;
border: 2px solid #000;
	color: #000;
	margin:0;
	height: 40px;
	width: 40px;
	background: #fff;
	opacity: 0.8;
	transition: 0.3s;
}
#btn-back-to-top:hover {background: #000; color:#fff;}

/* Pfeil als Maske (--atg-ico-pfeil-hoch, bis 09.11.2026 das
   Zeichen fa-arrow-up aus Font Awesome). Farbe = Schriftfarbe
   des Knopfes, wechselt also beim Darueberfahren mit. */
#btn-back-to-top .atg-nach-oben__pfeil {
    display: inline-block;
    width: calc(var(--atg-totop-pfeil) * var(--atg-ico-pfeil-ratio));
    height: var(--atg-totop-pfeil);
    vertical-align: var(--atg-totop-pfeil-tief);
    background-color: currentColor;
    -webkit-mask: var(--atg-ico-pfeil-hoch) center / contain no-repeat;
            mask: var(--atg-ico-pfeil-hoch) center / contain no-repeat;
}


/*++++++ Back to top btn Ende ++++*/


#inhalt {margin-top:2%;}

.linemargin {margin:0;}  

.line {width: 43%;}

.footertext .textmedia {gap:0;}

.logoimage .gallery-item figure {max-width: 65%;margin: 0 auto;}


.hunderter .megazeil,
.hunderter .ce-outer,
.hunderter .ce-row,
.hunderter .ce-gallery,
.hunderter .ce-textpic,
.hunderter .image { width: 100% !important;}
.hunderter .container {padding: 0 !important;}
.hunderter .frame {width: 100%; height: auto; margin: 0;
padding: 0;}

.hunderter .ce-gallery[data-ce-columns="3"] .ce-column {
    width: 33.33333% !important;}

.hunderter {max-width: 100% !important; padding: 0 !important; z-index: 0;}
.hunderter .ce-gallery img {padding: 0;width: 100%; }
.hunderter .ce-column {padding: 0 !important ;}
.hunderter .textmedia {gap:0;}
.hunderter hr {height: 0; padding: 2% 0; background:none !important;}
.hunderter .frame-container-default {
  max-width: 100%; padding: 0; margin:0;
}


.headerimage {position: relative; width: 100%; overflow: hidden; margin-bottom: 0.5%;}
.headerimage .carousel-image picture {width: 100%;}
.headerimage .carousel .carousel-content-inner,
.headerimage  .frame-container {min-width: 100% !important; max-width: inherit !important; padding: 0; margin:0; }

#pageid1 .headerimage .carousel .carousel-content-inner {min-height: 60vh;}

.headerimage .carousel .carousel-content {  height: inherit;}
.headerimage .carousel-item-type-image .carousel-image img {	width: 100%;}
.headerimage .frame {padding: 0;}
.headerimage .carousel .item {height: auto;}


.headerimage .carousel-image {
  display: block;
	z-index: 1;
  width: 100%;
}

.frame-custom-10 .image {max-width: 50%;}
.frame-custom-11 .image {max-width: 65%;}
.frame-custom-12 .image {max-width: 80%;}


.frame-space-before-extra-small {margin-top:0.5%;display: block;}
.frame-space-before-small {margin-top:3%!important;display: block;}
.frame-space-before-medium {margin-top:6% !important;display: block;}
.frame-space-before-large {margin-top:9%;display: block;}

.frame-space-after-extra-small {margin-bottom:0.5%;display: block;}
.frame-space-after-small {margin-bottom:3%;display: block;}
.frame-space-after-medium {margin-bottom:6%;display: block;}
.frame-space-after-large {margin-bottom:9%; display: block;}

.textmedia, .textpic {
		grid-column-gap: rem;
	gap: 0rem 2rem;
}