/* User-Definierter Code */
html {scroll-behavior: smooth; }

body {
  letter-spacing: 0.07em;
  hyphens: auto;
 hyphenate-limit-chars: auto 3;
 hyphenate-limit-lines: 4;


/* NEU Cuno - Fontsize ein bisschen grösser */

font-size: .9rem;


}

:root {
	--main-color: #F00; /* z.B. rot */
	--text-color: #3333FF; /* dunkelblau */
	--bg-gravik: #ffffff;  /* Andi Test als Standardfarbe für Basisinstallation */
	--bg-gravik-middle: color-mix(in srgb, var(--bg-gravik), rgb(0, 0, 0) 5%);
	--bg-gravik-dark: color-mix(in srgb, var(--bg-gravik), rgb(0, 0, 0) 10%);

  --jjaa-gravik: #bfc9d9;  /* Andi Test als Standardfarbe für Basisinstallation */
	--jjaa-gravik-middle: color-mix(in srgb, var(--jjaa-gravik), rgb(0, 0, 0) 5%);
	--jjaa-gravik-dark: color-mix(in srgb, var(--jjaa-gravik), rgb(0, 0, 0) 10%);	

/* Berechnete Varianten */
	--main-color-dark: color-mix(in srgb, var(--main-color), rgb(0, 0, 0) 20%);
	--main-color-light: color-mix(in srgb, var(--main-color), rgb(255, 255, 255) 50%);
}

/* Mobile-Logo soll linksbuendig bleiben */
.mobile-logo img, .mobile-logo svg {
    height: 42px;
    margin-top: 0.7rem;
    width: auto;
  }

  /* Schriftgroesse auf kleinen Displays */
  @media (max-width: 768px) {
    body,p,a,li,th,td {
          font-size: calc(16px + 4 * ((100vw - 480px)/ 800));
      }
    
    .treemenu li a {
        font-size: 20px;
      }
    }

/*--------------------------------------------------------------
JIAARHOF
--------------------------------------------------------------*/
/* Hero */
.hero h1 {font-size: 3rem;}
@media (max-width: 600px) {
  .hero h1 {
    font-size: 2rem;
  }
}

h2 {
	font-weight: 200;
	color: #2d3647;}


h5 {
	font-weight: 300;
	color: #2d3647;
	margin-top: 0.8rem;
	}

.container {
  padding-right: .8rem;
  padding-left: .8rem;
  }

/*--------------------------------------------------------------
Navigationsmenu-Einstellungen
--------------------------------------------------------------*/
/* Desktop-Menu */
  #header a { color: #393c41; }

  .dropmenu ul li a:hover, .dropmenu ul li a:focus, .dropmenu ul li a.active { 
    color: #131415 !important; 
    text-decoration: underline #131415;
    -webkit-text-decoration: underline #131415; 
    text-underline-offset: 0.5em;
    text-decoration-thickness:3px;
    }
  
/* Mobile-Menu */  
  .treemenu li a {color: #bfc9d9;}
  .treemenu li a:hover, .treemenu li a:focus, .treemenu li a.active { color: #858c97 !important; text-decoration: none; }
  .treemenu .toggler {display: none;}
  
  .mobile-menu .button_container {
    top: 1.4rem
    }
  
  .mobile-menu .button_container span {
    background: #2d3647;
    height: 3px;
    }

/*--------------------------------------------------------------
Links
--------------------------------------------------------------*/
  a { color: #858c97; outline: none; text-decoration: underline; text-underline-offset: 0.2em }
  a:focus, a:hover, a:active, a.active { color: #131415; text-decoration: underline; -webkit-text-decoration: underline #131415; text-underline-offset: 0.2em; text-decoration-thickness:2px;  }
  a:visited { color: #858c97; }
  a:visited:hover  { color: #131415; }

/*--------------------------------------------------------------
Titel mit grauem Band -> mit Shortcode einfügen
--------------------------------------------------------------*/
.title-row {
	background-color: #bfc9d9;
	font-size: clamp(18px, 5vw, 24px); /* Responsiv: min 16px, max 48px */
	height: 1em;                       /* Hoehe = Hoehe der Schrift (ohne extra Padding) */
	display: flex;
	align-items: center;              /* Vertikal zentriert */
	line-height: 2;                   /* Kein extra Zeilenabstand */
	padding: 0 1rem;                  /* Horizontaler Rand */
  margin-top: 1.6rem;
  margin-bottom: .9rem;
  }

.title-text {
	display: inline-block;
	background-color: white;
	color: #2d3647;
	padding: 0 0.3em;                 /* Etwas horizontaler Innenabstand */
	font-weight: 300;
	white-space: nowrap;             /* Verhindert Zeilenumbruch */
  }

/*--------------------------------------------------------------
Templ. modular -> text: Abstand oben und unten verringern -> Body-CSS-Klassen
--------------------------------------------------------------*/
.mod-text-dist {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

.modular-text {
  padding-top: 0rem;
}

/*--------------------------------------------------------------
Komponente Accordeon (Spectre)
--------------------------------------------------------------*/

.accordion {
    background-color: var(--jjaa-gravik); /* Standard-Hintergrundfarbe */
    margin-bottom: 5px;
  }
  
  .accordion .accordion-header {
      font-size: 18px;
      font-weight: 500;
      color: #ffffff;
      cursor: pointer;
      background-color: var(--jjaa-gravik-middle ); /* Standard-Hintergrundfarbe */
  }
  
  .accordion .accordion-header:hover {
    background-color: var(--jjaa-gravik-dark ); /* Standard-Hintergrundfarbe */
  }
  

/* Old
  .accordion-body {
      padding: 0 10px 0 10px;
      margin-bottom: .4rem 0;
      background-color: #ffffff;
    }
*/

/* NEU von Andi - 2026-02 */ 
.accordion-body {
      padding: 0; /* 0 10px 0 10px; */
      margin: .4rem 0;
      background-color: #ffffff;
    }

.accordion-body p {
      margin: .4rem 0 .2rem;
      padding-bottom: .4rem; /* neu */
    }

/* Ende Neu von Andi */

  .accordion input:checked~.accordion-body, .accordion[open] .accordion-body {
    max-height: 100%;
  }
  
    .accordion-body p {
      margin: .4rem 0 .2rem;
  }

 /* Accordion nur auf Displays < 600px einblenden */
@media (min-width: 600px) {
  .mod-akk-quark {display: none;}
  }
  
  @media (max-width: 599px) {
    .mod-noshow {display: none;}
    }


/*--------------------------------------------------------------
Tabellen-Einstellungen, einfuegen mit Shortcodes
--------------------------------------------------------------*/    
.table.table-scroll { display: block; overflow-x: auto; padding-bottom: .25rem; white-space: nowrap; }

.table td, .table th { border-bottom: 0 #e7e9ed; padding: 0; padding-bottom: 4px; }

.table th { border-bottom-width: 0; }

/*--------------------------------------------------------------
Footer-Hintergrundfarbe
--------------------------------------------------------------*/ 
.bg-jjaa {    background-color: #ebeef3;}


/*--------------------------------------------------------------
Cuno Code
--------------------------------------------------------------*/ 



/*--------------------------------------------------------------
PhotoSwipe-Gallery
--------------------------------------------------------------*/ 
.mod-photoswipe .photoswipe-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
  }

/* Grösse der Thumbnails je nach Bildschirmgrösse */
@media (max-width: 580px) {
.mod-photoswipe .photoswipe-gallery {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

a img:hover {opacity: 70%;}

@media (max-width: 391px) {
.mod-photoswipe .photoswipe-gallery {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

/* .gallery-item {width: 270px; height: 270px; display: inline-block;} */
.gallery-item {width: 100%; height: auto; aspect-ratio: 1 / 1;}
.gallery-item img {width: 100%; height: 100%; object-fit: cover;}

/* Für modulare Seite */
/*.mod-photoswipe .gallery-item {width: 200px; aspect-ratio: 1 / 1;} */


/* Logo beim Rollover heller machen */
#header .logo svg:hover path {fill: #888;}

/* Logo beim Rollover heller machen */
.dropmenu ul li a:hover {
	color: #888 !important;
	text-decoration: underline #888;
	text-underline-offset: 0.5em;
	text-decoration-thickness: 3px;
	}

/* Tabelle Zellen oben ausrichten */
td {vertical-align: top;}

/* header shadow hinzufügen */
#header.scrolled {box-shadow: 0px 3px 15px rgba(150,150,150,0.5);}

/* Damit z.B. bei arabischen Texten der Textt von rechts nach links geschrieben wird */

html[lang="ar"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}

/* Leere p-Tags ausblenden z.B. nach Titeln */
p:empty {display: none;}


/* Sprachspezifische Font-Auswahl */
/* html[lang="ru"] {
  body {font-family: serif;}
}
*/


/* 
font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
*/