/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

/* ==========================================================
   INHALT
   1. Schriften (@font-face)
   2. Tokens (alle Variablen an einem Ort)
   3. Basis: Schriftschnitte, Textauswahl
   4. Silbentrennung
   5. Headings
   6. Listen
   7. Buttons
   8. Layout & Spalten
   9. Blattform: Bilder und Spalten
  10. Kacheln
  11. Links
  12. Accordion
  13. Menü

   Uncode-Breakpoints: 569px = Mobile, 959px = Tablet + Mobile
   Abweichungen davon sind kommentiert.
   ========================================================== */


/* ==========================================================
   1. SCHRIFTEN
   font-display: swap zeigt den Text sofort in der Ersatzschrift,
   statt ihn bis zum Laden der Webfont unsichtbar zu lassen.
   ========================================================== */

@font-face {
  font-family: "Cast-Regular";
  src: url("fonts/Cast-Regular.woff2") format("woff2"),
       url("fonts/Cast-Regular.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Regular-Italic";
  src: url("fonts/Cast-Regular-Italic.woff2") format("woff2"),
       url("fonts/Cast-Regular-Italic.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Bold";
  src: url("fonts/Cast-Bold.woff2") format("woff2"),
       url("fonts/Cast-Bold.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Bold-Italic";
  src: url("fonts/Cast-Bold-Italic.woff2") format("woff2"),
       url("fonts/Cast-Bold-Italic.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Medium";
  src: url("fonts/Cast-Medium.woff2") format("woff2"),
       url("fonts/Cast-Medium.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Medium-Italic";
  src: url("fonts/Cast-Medium-Italic.woff2") format("woff2"),
       url("fonts/Cast-Medium-Italic.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Heavy";
  src: url("fonts/Cast-Heavy.woff2") format("woff2"),
       url("fonts/Cast-Heavy.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Heavy-Italic";
  src: url("fonts/Cast-Heavy-Italic.woff2") format("woff2"),
       url("fonts/Cast-Heavy-Italic.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Light";
  src: url("fonts/Cast-Light.woff2") format("woff2"),
       url("fonts/Cast-Light.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Light-Italic";
  src: url("fonts/Cast-Light-Italic.woff2") format("woff2"),
       url("fonts/Cast-Light-Italic.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Black";
  src: url("fonts/Cast-Black.woff2") format("woff2"),
       url("fonts/Cast-Black.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cast-Black-Italic";
  src: url("fonts/Cast-Black-Italic.woff2") format("woff2"),
       url("fonts/Cast-Black-Italic.woff") format("woff");
  font-display: swap;
}


/* ==========================================================
   2. TOKENS
   Einzige Stelle, an der Werte definiert werden.
   Weiter unten wird nur noch mit var(--…) gearbeitet.
   ========================================================== */

:root {
  /* --- Farben: Rohwerte (was die Farbe IST) --- */
  --gzm-gruen:      #3f8067;
  --gzm-blau:       #407a9d;
  --gzm-rot:        #b6545c;
  --gzm-rot-dunkel: #983e46;
  --gzm-anthrazit:  #343a38;
  --gzm-weiss:      #ffffff;
  --gzm-grau-hell:  #e8e8e8;
  --gzm-grau-text:  #333333;

  /* --- Farben: Rollen (wofür die Farbe VERWENDET wird) --- */
  --gzm-akzent:       var(--gzm-rot);
  --gzm-akzent-hover: var(--gzm-rot-dunkel);
  --gzm-akzent-hell:  color-mix(in srgb, var(--gzm-rot) 35%, transparent);

  /* Link-Unterstreichung: Standard für helle Sektionen,
     in .style-dark unter Abschnitt 11 überschrieben */
  --gzm-link-linie: var(--gzm-anthrazit);
  --gzm-link-hover: rgb(52 58 56 / 0.21);

  /* --- Formen --- */
  --gzm-radius:     clamp(1rem, 0.65rem + 1.5vw, 2rem);
  --gzm-img-radius: var(--gzm-radius);
  --gzm-btn-h:      40px;

  /* --- Abstände --- */
  --gzm-pad-mobile: 18px;
  --gzm-col-gap-mobile: 36px;

  /* --- Headings: Abstände und Zeilenhöhen --- */
  --heading-gap-ratio: 0.25;          /* Abstand nach Heading = 25 % ihrer Schriftgrösse */
  --heading-gap-min: 0.5rem;          /* Untergrenze für kleine Headings */
  --heading-line-height: 1.2;
  --heading-line-height-tight: 1.1;
  --overline-tracking: 0.08em;        /* Sperrung der Überzeile */

  /* --- Headings: Grössen, fluid zwischen 375 px und 1200 px Viewport
         Mobile: Faktor 1.15 – Desktop: Faktor 1.25 --- */
  --fs-h1: clamp(2.1875rem, 1.4773rem + 3.0303vw, 3.75rem);   /* 35 → 60 px */
  --fs-h2: clamp(1.9063rem, 1.4091rem + 2.1212vw, 3rem);      /* 30.5 → 48 px */
  --fs-h3: clamp(1.6563rem, 1.3295rem + 1.3939vw, 2.375rem);  /* 26.5 → 38 px */
  --fs-h4: clamp(1.4375rem, 1.2386rem + 0.8485vw, 1.875rem);  /* 23 → 30 px */
  --fs-h5: clamp(1.25rem, 1.1364rem + 0.4848vw, 1.5rem);      /* 20 → 24 px */
  --fs-h6: clamp(1rem, 0.9148rem + 0.3636vw, 1.1875rem);      /* 16 → 19 px */
}


/* ==========================================================
   3. BASIS
   ========================================================== */

/* Keine künstlichen Fettschnitte – nur Kursiv darf der Browser simulieren */
html {
  font-synthesis: style;
}

/* Kursiv: eigener Schnitt statt simulierter Schräglage */
em, i,
.italic {
  font-family: "Cast-Regular-Italic", sans-serif;
  font-style: normal;
}

/* Fett: eigener Schnitt statt simuliertem Fettdruck */
b, strong {
  font-family: "Cast-Bold", sans-serif;
  font-weight: normal;
}

/* Textauswahl global – Weiss auf Grün erreicht ca. 4.7:1 Kontrast */
::selection {
  background-color: var(--gzm-gruen);
  color: var(--gzm-weiss);
}


/* ==========================================================
   4. SILBENTRENNUNG
   :lang(de) greift für de, de-CH, de-DE usw.
   hyphens wird vererbt, deshalb genügt die Regel auf html.
   ========================================================== */

html:lang(de) {
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Überschriften: nur manuelle Trennung (­) */
h1, h2, h3 {
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* Keine Trennung bei Buttons, Menü, Accordion und interaktiven Elementen */
a,
button,
.btn,
[class*="btn"],
.menu,
.navbar,
.vmenu,
.panel-title,
.vc_tta-panel-title,
label,
input,
textarea,
select {
  -webkit-hyphens: none;
  hyphens: none;
}


/* ==========================================================
   5. HEADINGS
   ========================================================== */

/* 5.1 Uncode-Modulabstand entfernen
   – zwischen H1–H5 und dem folgenden Text Block
   – zwischen Überzeile (H6) und der folgenden Heading */
.uncont > .vc_custom_heading_wrap:has(:is(h1, h2, h3, h4, h5)) + .uncode_text_column,
.uncont > .vc_custom_heading_wrap:has(h6) + .vc_custom_heading_wrap {
  margin-top: 0 !important;
}

/* 5.2 H1–H5: proportionaler Abstand zum Folgetext
   Padding statt Margin, weil Uncode die Margin überschreibt
   und Padding nicht mit Nachbar-Margins kollabiert */
.heading-text :is(h1, h2, h3, h4, h5) {
  line-height: var(--heading-line-height);
  margin-bottom: 0;
  padding-bottom: max(var(--heading-gap-min), calc(var(--heading-gap-ratio) * 1em));
}

/* 5.3 H1–H3: straffere Zeilenhöhe (muss nach 5.2 stehen) */
.heading-text :is(h1, h2, h3) {
  line-height: var(--heading-line-height-tight);
}

/* 5.4 Überzeile (H6): eng an die folgende Heading, gesperrt */
.heading-text h6 {
  letter-spacing: var(--overline-tracking);
  margin-bottom: 0;
  padding-bottom: var(--heading-gap-min);
}

/* 5.5 Grössen (überschreibt Uncode-Typografie inkl. Mobile-Regeln) */
.heading-text h1 { font-size: var(--fs-h1) !important; }
.heading-text h2 { font-size: var(--fs-h2) !important; }
.heading-text h3 { font-size: var(--fs-h3) !important; }
.heading-text h4 { font-size: var(--fs-h4) !important; }
.heading-text h5 { font-size: var(--fs-h5) !important; }
.heading-text h6 { font-size: var(--fs-h6) !important; }

/* 5.6 Ausgewogene Zeilenumbrüche */
.heading-text :is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

/* 5.7 Automatische Silbentrennung in H1–H3 auf Tablet und Mobile */
@media (max-width: 959px) {
  .heading-text :is(h1, h2, h3) {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}
/* Text Large bei Mobile */
@media (max-width: 569px) {
  /* «Large» (text-lead) auf Mobile wie normaler Text */
  body .uncode_text_column.text-lead,
  body .uncode_text_column.text-lead > * {
    font-size: inherit;
    line-height: 1.75 !important;
  }
  body .uncode_text_column.text-lead > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  body .uncode_text_column.text-lead > * + * {
    margin-top: 18px !important; /* Wert vom normalen Absatz */
  }
}
/* ==========================================================
   6. LISTEN
   ========================================================== */

/* Liste direkt nach Absatz ohne zusätzlichen Abstand */
p + ul,
p + ol {
  margin-top: 0;
}


/* ==========================================================
   7. BUTTONS
   ========================================================== */

/* Blattform – Klasse btn-leaf auf Button oder Container */
.btn-leaf.btn,
.btn-leaf .btn,
.t-entry-readmore .btn {
  --btn-h: var(--gzm-btn-h);
  --btn-r: calc(var(--btn-h) / 2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--btn-h);
  padding-block: 0;
  padding-inline: 1.1em !important;
  line-height: 1;
  border-radius: 0 var(--btn-r) 0 var(--btn-r) !important;
}

.btn-leaf.btn:hover,
.btn-leaf .btn:hover,
.t-entry-readmore .btn:hover,
.btn-leaf.btn:focus,
.btn-leaf .btn:focus,
.t-entry-readmore .btn:focus {
  box-shadow: none !important;
}
.t-entry-readmore .btn,
.tmb:hover .t-entry-readmore .btn {
  box-shadow: none !important;
	  transition: all 0.25s ease-in-out;
}
.tmb .t-entry p.t-entry-readmore .btn {
  background-color: var(--gzm-gruen) !important;
  border-color: var(--gzm-gruen) !important;
  color: var(--gzm-weiss) !important;
}

.tmb .t-entry p.t-entry-readmore .btn:hover,
.tmb .t-entry p.t-entry-readmore .btn:focus {
  background-color: transparent !important;
  border-color: var(--gzm-gruen) !important;
  color: var(--gzm-gruen) !important;
}

/* Uncode-Grössen */
.btn-leaf.btn-xs, .btn-leaf .btn-xs { --btn-h: 30px; }
.btn-leaf.btn-sm, .btn-leaf .btn-sm { --btn-h: 36px; }
.btn-leaf.btn-lg, .btn-leaf .btn-lg { --btn-h: 48px; }
.btn-leaf.btn-xl, .btn-leaf .btn-xl { --btn-h: 56px; }

/* Volle Breite */
.btn-leaf.btn-block,
.btn-leaf .btn-block {
  display: flex;
  width: 100%;
}

/* Font-Awesome-Icons optisch auf die Cast-Grundlinie setzen */
.fa {
  margin-top: -0.2rem;
}


/* ==========================================================
   8. LAYOUT & SPALTEN
   ========================================================== */

/* Grow-Effekt */
.grow {
  transition: transform 0.5s ease-in-out;
}
.grow:hover {
  transform: scale(1.03);
}

/* Spaltenabstände Mobile
   Bewusst 767px statt Uncode-Breakpoint – vor einer Umstellung prüfen,
   ab welcher Breite die betroffenen Spalten untereinander rutschen. */
@media (max-width: 767px) {
  .col-margin {
    margin-top: var(--gzm-col-gap-mobile);
  }
  .col-margin-left {
    margin-top: calc(var(--gzm-col-gap-mobile) * -1);
  }
}

/* Mobile: Uncode-Paddings halbieren */
@media (max-width: 569px) {
  /* Seitenrand der Rows – inkl. Standard-Padding ohne Klasse */
  body .main-container .row-container .row-parent:not(.no-h-padding) {
    padding-left: var(--gzm-pad-mobile);
    padding-right: var(--gzm-pad-mobile);
  }
  /* Innenabstand der Spalten (Karten) – unverändert */
  body .uncol .uncell.single-block-padding,
  body .uncol .uncell.double-block-padding,
  body .uncol .uncell.triple-block-padding,
  body .uncol .uncell.quad-block-padding {
    padding: var(--gzm-pad-mobile);
  }
}

/* Von Uncode generierte Farbklasse auf GZM-Blau umleiten */
.style-color-wayh-bg {
  background-color: var(--gzm-blau);
}


/* ==========================================================
   9. BLATTFORM: BILDER UND SPALTEN
   -right = oben rechts und unten links gerundet
   -left  = oben links und unten rechts gerundet
   ========================================================== */

/* Bilder – Klasse auf Single-Media-Modul, Spalte oder Row */
.img-gzm-right .uncode-single-media-wrapper,
.img-gzm-left .uncode-single-media-wrapper {
  overflow: hidden;
}

.img-gzm-right .uncode-single-media-wrapper,
.img-gzm-right .uncode-single-media-wrapper img {
  border-radius: 0 var(--gzm-img-radius) 0 var(--gzm-img-radius);
}

.img-gzm-left .uncode-single-media-wrapper,
.img-gzm-left .uncode-single-media-wrapper img {
  border-radius: var(--gzm-img-radius) 0 var(--gzm-img-radius) 0;
}

/* Spalten */
.radius-gzm-right .uncell,
.radius-gzm-left .uncell {
  overflow: hidden;
}

.radius-gzm-right .uncell > .background-wrapper,
.radius-gzm-left .uncell > .background-wrapper {
  border-radius: inherit;
}

.radius-gzm-right .uncell {
  border-radius: 0 var(--gzm-radius) 0 var(--gzm-radius);
}

.radius-gzm-left .uncell {
  border-radius: var(--gzm-radius) 0 var(--gzm-radius) 0;
}
/* Posts-Modul */
.radius-gzm-right .tmb .t-inside,
.radius-gzm-left .tmb .t-inside {
  overflow: hidden;
}

.radius-gzm-right .tmb .t-inside {
  border-radius: 0 var(--gzm-radius) 0 var(--gzm-radius) !important;
}

.radius-gzm-left .tmb .t-inside {
  border-radius: var(--gzm-radius) 0 var(--gzm-radius) 0 !important;
}

/* ==========================================================
   10. KACHELN
   ========================================================== */

.kacheln {
  --kachel-bg: var(--gzm-blau);
  --kachel-text: var(--gzm-weiss);
  --kachel-icon-bg: var(--gzm-weiss);
  --kachel-icon-rand: var(--kachel-bg);
  --kachel-icon-groesse: 64px;
  --kachel-radius: var(--gzm-radius);
  --kachel-button-bg: var(--gzm-grau-hell);
  --kachel-button-bg-hover: var(--gzm-weiss);
  --kachel-button-text: var(--gzm-grau-text);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--kachel-bg);
  color: var(--kachel-text);
  border-radius: 0 var(--kachel-radius) 0 var(--kachel-radius);
  padding: calc(var(--kachel-icon-groesse) / 2 + 1.5rem) 2rem 2rem;
  margin-top: calc(var(--kachel-icon-groesse) / 2);
  height: 100%;
  box-sizing: border-box;
}

/* Runder Kreis oben mit PNG */
.kacheln__icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--kachel-icon-groesse);
  height: var(--kachel-icon-groesse);
  border-radius: 50%;
  background: var(--kachel-icon-bg);
  border: 3px solid var(--kachel-icon-rand);
  box-shadow: 0 0 0 3px var(--kachel-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kacheln__icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  display: block;
}

.kacheln .kacheln__titel {
  color: var(--kachel-text);
  margin: 0 0 1.5rem;
  line-height: 1.15;
}

.kacheln__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 calc(var(--kachel-radius) * 0.6) 0 calc(var(--kachel-radius) * 0.6);
  display: block;
}

.kacheln .kacheln__text {
  color: var(--kachel-text);
  margin: 1.5rem 0;
}

.kacheln .kacheln__button {
  --btn-h: var(--gzm-btn-h);
  --btn-r: calc(var(--btn-h) / 2);

  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--btn-h);
  padding: 0 1.5em;
  line-height: 1;
  border-radius: 0 var(--btn-r) 0 var(--btn-r);
  background: var(--kachel-button-bg);
  color: var(--kachel-button-text);
  text-decoration: none;
  font-family: "Cast-Medium", sans-serif;
  transition: background-color 0.2s, color 0.2s;
}

.kacheln .kacheln__button:hover,
.kacheln .kacheln__button:focus-visible {
  background: var(--kachel-button-bg-hover);
  color: var(--kachel-button-text);
}

/* Raster für mehrere Kacheln */
.kacheln-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3rem 2rem;
  align-items: stretch;
}

/* Zwei Buttons nebeneinander */
.kacheln__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

.kacheln__buttons .kacheln__button {
  margin: 0;
}


/* ==========================================================
   11. LINKS
   Die Linienfarbe hängt an .style-light / .style-dark.
   Verschachtelte Sektionen nehmen automatisch die nächstliegende.
   ========================================================== */

.style-light {
  --gzm-link-linie: var(--gzm-anthrazit);
  --gzm-link-hover: rgb(52 58 56 / 0.21);
}
.style-dark {
  --gzm-link-linie: var(--gzm-weiss);
  --gzm-link-hover: rgb(255 255 255 / 0.31);
}

/* Links im Fliesstext und in H4 */
:is(.style-light, .style-dark) :is(p, h4) a {
  box-shadow: inset 0 -0.2em 0 -2px var(--gzm-link-linie);
  padding: 0.05em 0;
  text-decoration: none;
  transition: box-shadow 0.3s;
}

:is(.style-light, .style-dark) p a:is(:hover, :focus-visible) {
  box-shadow: inset 0 -0.3em 0 var(--gzm-link-hover);
}

:is(.style-light, .style-dark) h4 a:is(:hover, :focus-visible) {
  box-shadow: inset 0 -0.5em 0 var(--gzm-akzent-hell);
}

/* Links in Listen */
ul li a {
  box-shadow: inset 0 -0.2em 0 -2px var(--gzm-akzent);
  padding: 0.05em 0;
  text-decoration: none;
  transition: box-shadow 0.3s;
}

ul li a:is(:hover, :focus-visible) {
  box-shadow: inset 0 -0.3em 0 var(--gzm-akzent-hell);
}

/* Linkfarbe in dunklen Sektionen */
.style-dark p a,
.style-dark p a:hover {
  color: var(--gzm-weiss) !important;
}

/* Keine Unterstreichung bei Logo, Menü und Accordion */
a.navbar-brand::after {
  display: none;
}

.menu-item a,
.menu-item a:hover,
.panel-title a,
.panel-title a:hover {
  box-shadow: none !important;
}


/* ==========================================================
   12. ACCORDION
   ========================================================== */

.panel-title > a {
  padding: 1em 0 0 0 !important;
}

/* Plus-Zeichen */
.plus-signed.sign-size-md .panel-title > a > span::after {
  font-size: 1.1em;
  margin-top: 0.3em;
}


/* ==========================================================
   13. MENÜ
   ========================================================== */

/* Mobile Menu Block: Menüpunkte 1. Level OHNE Untermenü
   bündig mit den Punkten mit Untermenü ausrichten */
@media (max-width: 959px) {
  #uncode-mobile-menu-block .unmenu-block > li > p.unmenu-title {
    margin: 0;
  }
  #uncode-mobile-menu-block .unmenu-block > li > p.unmenu-title > a {
    padding-left: 0;
    padding-right: 0;
  }
}
#uncode-mobile-menu-block .gzm-mobile-links a {
  box-shadow: none !important;
  text-decoration: none !important;
  background-image: none !important;
}

/* Hervorgehobener Menüpunkt als Pille */
#menu-item-289 > a {
  display: inline-block;
  height: auto !important;
  align-self: center;
  padding: 6px 24px 4px 24px !important;
  margin-left: 0;
  margin-right: 12px;
  background-color: var(--gzm-akzent) !important;
  color: var(--gzm-weiss) !important;
  border: 1px solid var(--gzm-akzent);
  border-radius: 0px 20px 0px 20px;
  line-height: 1.4;              /* verhindert überhohen Block */
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

#menu-item-289 > a:is(:hover, :focus-visible) {
  background-color: transparent !important;
  color: var(--gzm-anthrazit) !important;
  border: 1px solid var(--gzm-akzent);
}

/* Menü-Kacheln: 20% Schwarz-Überlagerung bei Hover/Fokus */
.menu-tiles .wpb_column > .uncol > .uncoltable > .uncell {
  transition: box-shadow .2s ease;
}

.menu-tiles .wpb_column:hover > .uncol > .uncoltable > .uncell,
.menu-tiles .wpb_column:focus-within > .uncol > .uncoltable > .uncell {
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2);
}
.gzm-mobile-links,
.gzm-mobile-links a {
  color: #343a38 !important;
}