/* diese CSS ist für ?version=2026 - manuelle Erweiterungen, die nicht aus dem ursprünglichen chatGPT-Template kommen */

/* Desktop: nur mainMenu_desktop */
nav#mainMenu_mobile.open { display: none; }
nav#mainMenu_mobile { display: none; }

@media(max-width:768px){
  nav#mainMenu_desktop { display: none; }
  nav#mainMenu_mobile.open { display: flex; }
}


/* AM Modi: Grid für die 3 Bilder + Menüleft + Content */
/* -- ZEILE 1: 3 BILDER - bzw. 2 wenn mobil -- */
figure.three_pics {
  grid-column: 1 / 4;   /* volle Breite über alle (3???) Spalten */
  grid-row: 1;
  display: grid;
  /*grid-template-columns: 1fr 1fr 1fr;*/
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  height: 180px;
  overflow: hidden;

  gap: 2px;
  margin-top: 2px;
}
@media(max-width:768px){
  figure.three_pics {
    grid-template-columns: 1fr 1fr 0px 0px 0px 0px 0px; /* nur 2 darstellen */
  }
}


figure.three_pics img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* -- GRID-GRUNDSTRUKTUR -- */
.subpage-grid {
 display: grid;
 grid-template-columns: 17em auto;
 gap: 0px;
 /*background-color: yellow;*/
}
.subpage-grid > div:nth-child(2) {
  padding-right: 0.5em;
}
@media(max-width:768px){
  .subpage-grid {
   grid-template-columns: 0 1fr; /* erste spalte aublenden */ 
   /*background-color: green;*/
  }
  .subpage-grid > div:nth-child(1) {
    display: none;  /* Menü komplett ausblenden */
    overflow: hidden;
  }
  .subpage-grid > div:nth-child(2) {
    width: calc(100vW - 0.5em - 0.5em); /* muss vermutlich wegen padding */
    padding-left: 0.5em;
    padding-right: 0.5em;
  }
}
/* GRID für Seiten ohne Menü - wird per TS als zusätzliche Klasse neben subpage-grid gesetzt (sehr ähnlich wie das normale grid bei mobil) */
.subpage-grid-no-menu {
  grid-template-columns: 0 1fr; /* erste spalte aublenden */ 
  /*background-color: green;*/
}
.subpage-grid-no-menu > div:nth-child(1) {
  display: none;  /* Menü komplett ausblenden */
  overflow: hidden;
}
.subpage-grid-no-menu > div:nth-child(2) {
  width: calc(100vW - 2em - 2em - 2em); /* muss vermutlich wegen padding + warum auch immer etwas mehr */
  padding-left: 2em;
  padding-right: 2em;
}

/* AM Modi */
table {
  width: 100%;
  table-layout: fixed; /* gleichmäßige Aufteilung - vor allem für die Anfängerkurse sinnvoll */
}
th, td {
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word; /* Fallback für ältere Browser */
}
footer {
  margin-top: 2em;
}


/* AM Modi */
.youtube {
  /*width: 620px;
  height: 420px;*/
  width: 90%;
  height: unset;
  aspect-ratio: 16 / 9;  
  frameborder: 0;
}
/* Responsive */
@media(max-width:768px){
  .youtube {
    width: calc(100vW - 0.5em - 0.5em);
    height: unset;
    aspect-ratio: 16 / 9;  
  }
}

/* AM Modi: mobil die Bilder in den News verkleinern */
@media(max-width:768px){
  .news-list-item > a > img,
  .news-single-img,
  .news-single-img > a > img
  {
    max-width: 100%; !important;
    height: unset !important;
  }
}

/* AM Modi: mobil AUF FOLGESEITEN bei NEWS die schon vom __frame kommenden grossen Ränder wieder verkleinern. Ist ein HACK! TODO: elegantere Lösung? */
@media(max-width:768px){
  .news-single-item
  {
    margin-left: -1em;
    margin-right: -3em;
  }
}



/* AM Modi # 2026: H1 wie section title aus der neuen Vorlage (das gilt aber nicht für den H1 im Banner) */
h1:not(.banner h1) { text-align:center; margin:50px 0 30px 0; font-size:2.2em; color:#1b1b1b; position:relative; }
h1:not(.banner h1):after { content:''; display:block; width:60px; height:4px; background:#e63946; margin:10px auto 0 auto; border-radius:2px; }

/* AM Modi # 2026: zusätzlich: H1 NICHT bold */
h1:not(.banner h1) { font-weight: normal; }

/* AM Modi # 2026: H1 wie section title aus der neuen Vorlage */
__#column2 __h1 {
    font-family: 'Gruppo', sans-serif;
	/*2025*/
	font-weight: 600;

    text-align: left;

    font-size: 2.8em;

    /*color: #727272;  2025:*/ color: #363636;
}


/* AM Modi: im Banner keine Punkte vor UL / LI - und Hx Grössen ignorieren */
.mainHeader li {
  list-style: none;
}
#mainMenu_mobile > li > a > h1, 
#mainMenu_mobile > li > a > h2, 
#mainMenu_mobile > li > a > h3, 
#mainMenu_mobile > li > a > h4, 
#mainMenu_mobile > li > a > h5, 
#mainMenu_mobile > li > a > h6,
#mainMenu_desktop > li > a > h1, 
#mainMenu_desktop > li > a > h2, 
#mainMenu_desktop > li > a > h3, 
#mainMenu_desktop > li > a > h4, 
#mainMenu_desktop > li > a > h5, 
#mainMenu_desktop > li > a > h6
{
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
  margin-left: 0.5em;
}

/* AM Modi: im subPage-MenuBanner keine Punkte vor UL / LI - und Hx Grössen anpassen */
.menu_sub_page li {
  list-style: none;
}
#__menu_left > ul.menu_sub_page > li > a > h1, 
#__menu_left > ul.menu_sub_page > li > a > h2, 
#__menu_left > ul.menu_sub_page > li > a > h3, 
#__menu_left > ul.menu_sub_page > li > a > h4, 
#__menu_left > ul.menu_sub_page > li > a > h5, 
#__menu_left > ul.menu_sub_page > li > a > h6
{
  font-weight: normal;
  margin: 0;
  margin-bottom: 0.5em;
  white-space: normal;
}
#__menu_left > ul.menu_sub_page > li > a > h2
{
  font-size: 2.2em;  
}
#__menu_left > ul.menu_sub_page > li > a > h3
{
  font-size: 1.2em;
  color:#e63946;
}
#__menu_left > ul.menu_sub_page > li > a > h6
{
  font-size: 1.2em;  
}


/* AM Modi: Footer-Links */
footer .footer-links a { font-size:unset;}


/* Link Symbol (nur innerhalb bodytext */
/*div.ce-bodytext a::before {
  content: '\f08e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1em;
  margin-right: 0.4em;
}*/
a:not(:is(#banner *, #__menu_left *, #breadcrumps *, .news-list-item *, .news-list-browse *, .mapid *, footer *, nav *)):not(.floating-button):not(:has(> img))::before {
  content: '\f08e';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 1em;
  margin-right: 0.4em;
  /*color: #c0181f;*/
}



/* warum auch immer hat der sonst 40px */ 
.menu_sub_page {
  padding-inline-start: 1em;
}


#breadcrumps ul {
    text-align: left;
    width: 18.75em;
    float: left;
    list-style: none;
    margin-top: 0.8em;
    /* warum auch immer hat der sonst 40px */ 
    padding-inline-start: 0px;
}


#breadcrumps li {
    display: inline;
    font-size: 0.9em;
    /*font-family: 'Alegreya',sans-serif;*/
    font-style: italic;
    /*color: #727272 2025:*/ color: #363636;
}

#breadcrumps a{
    text-decoration: none;
    /*color: #727272 2025:*/ color: #363636;
}

#breadcrumps a:hover{
    color: #cb4a1a
}

/* Responsive */
@media(max-width:768px){
  #breadcrumps {
    display: none;
  }
}


/* AM 25.04.2016 */
#mapid {
    width: auto; 
    height: 512px;
}


/* floating button start */
  .floating-button {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 85px;
            height: 85px;
            background: linear-gradient(135deg, #ff8c00, #ff6b00);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding-top: 15px;
            box-shadow: 0 4px 20px rgba(255, 140, 0, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            color: white;
            border: none;
            z-index: 1000;
        }

        .floating-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 25px rgba(255, 140, 0, 0.4);
            background: linear-gradient(135deg, #ff9500, #ff7700);
        }

        .floating-button:active {
            transform: translateY(-2px);
        }

        .button-icon {
            width: 32px;
            height: 32px;
            margin-bottom: 2px;
        }

        .button-text {
            text-align: center;
            line-height: 1.2;
        }

        .main-text {
            font-size: 14px;
            font-weight: 400;
            margin: 0;
            white-space: nowrap;
        }

        .sub-text {
            font-size: 10px;
            margin: 0;
            opacity: 0.9;
            white-space: nowrap;
        }

@media(max-width:768px){
  .floating-button {
    transform: scale(0.9);
  }
}


/* floating button ende */