/*!
Theme Name: Christian Kling
Theme URI: https://www.christiankling.ch/
Author: wald.pixel.werk
Author URI: https://waldpixelwerk.de/
Description: Theme für TN
Version: 1.0.0
Tested up to: 8.4
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tn
Tags: custom-menu, translation-ready
*/

@charset "UTF-8";

/* urbanist-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: 'Urbanist';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/urbanist-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* urbanist-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: 'Urbanist';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/urbanist-v18-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* urbanist-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: 'Urbanist';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/urbanist-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* urbanist-800italic - 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: 'Urbanist';
  font-style: italic;
  font-weight: 800;
  src: url('./fonts/urbanist-v18-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* urbanist-900italic - 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: 'Urbanist';
  font-style: italic;
  font-weight: 900;
  src: url('./fonts/urbanist-v18-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



body{
--black:#000;
--white:#ffffff;
--green:#9AC31C;
--blue:#00A2EA;
--heather:#F0F6DD;
--grey:#707070;
--lineheight:1.5em;
--font:1vw;
--fontbig:1.75em;
--h1:6em;
--h2:3em;
--h3:1.5em;
--container:60vw;
}

@media (orientation: portrait){

  body{
--lineheight:1.5em;
--font:2.7vw;
--fontbig:1.5em;
--h1:3em;
--h2:2em;
--h3:1.25em;
--container:90vw;
}
}


@media (min-width:1920px){

  body{
--font:20px;
}
}



/* Global */

body, html{
font-family: "Urbanist", sans-serif;
font-weight: 400;
font-style: normal;
width:100vw;
text-rendering: geometricPrecision;

padding:0;margin:0;left:0;top:0;position:relative;font-size:var(--font);line-height:var(--lineheight);font-weight:500;background-color:var(--white);color: var(--dblue);white-space-collapsing:discard;min-height:100dvh;}
* { box-sizing: border-box; }


a, a:link{text-decoration:unset;}
h1 , h2, h3{
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

/* Fixiertes Menü über allem */
.menu {
  position: fixed;
  z-index: 1000;
 right:0;top:0}

 .navigation{position:absolute;right:4em;top:4em;}

 .navigation img{width:2.2em;transition: all .4s ease;opacity:0;cursor:pointer;pointer-events:none}
 .navigation img:hover{transform:scale(1.15)}

.icon-green{position:absolute;right:0;top:0}
 img.active{
  opacity:1;
  pointer-events: auto;
}
 
#viewport {
  height: 100svh;
  overflow: hidden; /* wichtig: nativen Scroll ausblenden */
  position: relative;
}

/* Slider: alle Frames untereinander */
#slider {
  height: 400dvh; /* 4 Frames * 100vh */
  transform: translateY(0);
  transition: transform 500ms ease; /* 500ms Animation */
  will-change: transform;
}

/* Fullscreen Frames */
.frame {
  height: 100vh;
  display: grid;
  position:relative;
  text-align: center;
	  transform: translateY(0);
  transition: transform 500ms ease; /* 500ms Animation */
width:100%;
}

#viewport{ height:100dvh; overflow:hidden; position:relative; }
#slider{ position:relative; height:100dvh; }

.frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100dvh;
	transform:translateY(100dvh);
  will-change: transform;
  transition: transform 500ms ease; /* duration muss zu JS passen */
}
.frame--1{transform: translateY(0);}
.privat-dialog{background-color:#fff}
.frame-inner{height:100svh;position:relative;z-index:1;width:100vw;overflow:hidden;  display: grid;
  place-content: center;
  position:relative;
  text-align: center;}
/* Farben nur als Beispiel */


.start-hero{ background: linear-gradient(to top right, #8CC946, #00B8F1);}
/*.start-hero:before{ content:"";position:absolute;width:100%;height:100%;}*/

/* Pfeile Overlay */
.arrow {
  position: absolute;
  right: 45%;
  width:10%;
  text-align: center;
  bottom:4em;
  z-index: 900; /* unter Menü, über Frames */
  
  border: none;
  cursor: pointer;
}

.arrow img{width:2.6em;transition:transform .4s ease}
.arrow:hover img{transform:scale(1.15)}

.gl-logo{position:absolute;left:0;bottom:0;width:41.5%;line-height:0}
.gl-logo img{width:100%}


.start-christian{position:absolute;left:40%;top:0;height:100%;}
.start-christian img{height:100%;}

.start-text{text-align:left;position:absolute;min-height:20em;overflow:scroll;height:70vh;top:8em;left:20%}
.start-text h1{font-size:var(--h2);color:rgba(0,0,0,0.7);font-weight:800;font-style: italic;letter-spacing:0.01em;line-height:1.3em}
.start-text h2{font-size:2em;color:rgba(0,0,0,0.7);font-weight:800;font-style: italic;letter-spacing:0.01em;line-height:1.1em;margin-bottom:2rem}
.start-text h3{font-size:var(--h1);font-weight:800;font-style: italic;letter-spacing:0.005em;line-height:1.1em;color:var(--white)}


.start-gemeinderat:before {
    background-color: var(--green);
    position: absolute;
    left: -2%;
    top: -2.3em;
    height: 24em;
    width: 105%;
    border-radius: 50%;
    content: "";
}

/* Container muss Stacking-Context sein */
.start-gemeinderat-green{
  background-color:var(--green);
  position:absolute;
  top:10em;
  width:100%;
  left:0;
  height:calc(100% - 10em);
  z-index:0;              /* Basis */
  isolation:isolate;       /* wichtig gegen Safari-Layer-glitches */
}

/* Pseudo-Element explizit hinter den Inhalt */


/* Aktiv einblenden */


/* Text muss positioniert sein, sonst z-index = Glückssache */
.start-gemeinderat-text{
  position:relative;       /* <- entscheidend */
  z-index:2;               /* <- sicher über allem im green-block */
  width:var(--container);
  margin-bottom:5em;
  min-height:30em;
  text-align:left;
  color:rgba(0,0,0,0.7);
}



/* falls .start-gemeinderat als Frame selbst Layer braucht */
.start-gemeinderat{
  position:relative;
  z-index:3;
	  background-color:var(--green);
}
.start-gemeinderat-text h2{font-size:var(--h2);margin-bottom:1em;line-height:1.1em;letter-spacing:0.001em;font-weight:800;font-style: italic;}
.start-gemeinderat-text ul{font-size:var(--fontbig);letter-spacing:0.001em;line-height:1.5em}
.start-gemeinderat-text li{margin-bottom:1em}
.start-gemeinderat-text li::marker{color:var(--white)}
.start-gemeinderat-text ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 1em;
    unicode-bidi: isolate;
}


.start-thalwil{background-color: var(--blue)}
.start-thalwil-grid {
    display: grid;
    grid-template-columns: 31% 31% 31%;
    column-gap: 3%;
    width: var(--container);
    text-align: left;
    margin-bottom: 5vh;
    max-height: 95vh;
    overflow: scroll;
}


.letter-list {
  list-style: none;
  padding-left: 2em;
  font-size:var(--h3);
  letter-spacing:0.001em;font-weight:800;font-style: italic;
  line-height:1.35em;
  color:var(--white);
  width:85%;

}

ul.letter-list  {
  
    margin-block-start: 0.8em;
    margin-block-end: 1em;
    padding-inline-start: 1em;
    unicode-bidi: isolate;
}

.letter-list li {
  position: relative;
  margin-bottom: 0.5em;
}

.letter-list li::before {
  content: attr(data-letter) ".";
  position: absolute;
  left: -1em;
  font-weight: bold;
}
a, a:link{color:rgba(0,0,0,0.7)}
.start-thalwil-single img{width:8em;margin-bottom:1em;}
.start-thalwil-single p{font-size:1em;line-height:1.5em;letter-spacing:0.02em;color:var(--white);}

.start-dialog{background-color:#fff;}
.start-dialog-christian{position: absolute;left:0;top:0;height:100%}
.start-dialog-christian img{height:100%}

.start-dialog-text{position:absolute;top:4em;left:30vw;width:var(--container);text-align:left}

.start-dialog-text h2{font-size:var(--h2);color:rgba(0,0,0,0.7);font-weight:800;font-style: italic;letter-spacing:0.01em;line-height:1.1em;}

.start-dialog-text li::marker{color:var(--green)}
.start-dialog-text li{margin-bottom:1em}
.start-dialog-text ul {
    display: block;
    color:var(0,0,0,0.7);
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    padding-inline-start: 1em;
    font-size:var(--fontbig);
    line-height:1.45;letter-spacing: 0.01em;
    unicode-bidi: isolate;
}


.start-dialog-footer{text-align:center;padding:4em 0 2em 0; font-size:1em;line-height:1.2em;letter-spacing:0.02em; color:rgba(0,0,0,0.7);position:absolute;bottom:0;left:0;width:100%;overflow:hidden;font-weight:500}
.start-dialog-footer:before {
    background-color: var(--green);
    position: absolute;
    left: -20%;
    top: 0.7em;
    height: 20em;
    width: 140%;
    border-radius: 50%;
    content: "";
    z-index: 1;
}
.start-dialog-footer-text{z-index:2;position:relative;font-weight:700}
.start-dialog-footer a{margin-left:1.5em;color:rgba(0,0,0,0.7) !important;}
.start-dialog-footer img{height:1em;transform:translateY(0.15em);height: 1em;margin-right:0.3em;
    width: 1.2em;
    object-fit: contain;}

.start-dialog-about {
    position: absolute;
    right: 0;
    bottom: 0;

    overflow: hidden;
}

.start-dialog-image{position:absolute;width:100%;bottom:-1em;}

.start-dialog-about a {
display:inline-block;
    margin: 5em 8em 5em 12em;
transition:color .3s ease;
}
.start-dialog-about a:hover{color:var(--green)}

 

    .start-dialog-about a{color:var(--white);font-size:var(--h3);font-weight:800;font-style: italic;letter-spacing:0.01em;position:relative;z-index:2}
 .start-dialog-about a:before{content:"→ ";margin-right:0.5em}



    .menu-links{padding:3.5em 4em 9em 20em;position:absolute;right:-50em;transition:right 1s ease;overflow:hidden;z-index:9}
  .menu-links:before {
    content: "";
    position: absolute;
    left: 0%;
    top: -30em;
    height: 50em;
    width: 190%;
    background-color: var(--white);
    transition:background-color .5s ease;
    border-radius: 50%;
    z-index: 1;
}


 .menu-links.heather:before{background-color:var(--heather)}

    .menu-links.active{right:0}
    .menu-links-inner{display:inline-block;position: relative;z-index:2;width: 14em;}
    .menu-links-inner a{display:block;font-size:var(--h3);font-weight:800;font-style: italic;transition:color .3s ease;line-height:2em;color:rgba(0,0,0,0.7)}
     .menu-links-inner a:hover{color:var(--green)}
	.menu-links-inner a.current-menu-item{color:var(--blue)}
.menu-links-inner a.current-menu-item:hover{color:var(--green)}
     .menu-links-inner a:before{content:"→ ";margin-right:0.5em}


     .privat-hero{background-color:var(--heather)}

.privat-hero .start-text h3 {color:var(--blue)}

.privat-dialog:before{background-color:var(--white);position:absolute;left:15%;top:-2.3em;height:20em;width:85%;border-radius:50%;content:""}

.privat-dialog{z-index:2}


.privat-dialog-christian{width:var(--container);text-align:left;margin-bottom:8em;z-index:4}
.privat-dialog-christian-slider{width:50%;float:left;display: inline-block;}
.privat-dialog-christian-slider-images{height:30em;width:100%;position:relative;}
.privat-dialog-christian-slider-images img{position: absolute;left:0;top:0;width:100%;height:100%;object-fit: cover}
.privat-dialog-christian-slider-images img { opacity: 0; transition: opacity .3s ease; }
.privat-dialog-christian-slider-images img.active { opacity: 1; }
.privat-dialog-christian-text{float:right;height:30em;display:inline-block;width:45%;overflow:scroll}
/* Text soll NICHT direkt user-scrollbar sein */
.privat-dialog-christian-text{
  overflow: hidden;          /* user sieht keine scrollbar */
  height: 30em;              /* wie gehabt, muss fix sein */
  overscroll-behavior: none; /* kein Bounce/Scroll chaining */
}

/* Frame als “Scroll-Zone” */
.privat-dialog.heather .frame-inner{
  height: 100%;
  width: 100%;
  position: relative;
}


.privat-dialog-christian-text h2{font-size:var(--h3);font-weight:800;font-style: italic;letter-spacing:0.01em;color:rgba(0,0,0,0.7);line-height:1.35em;margin-bottom:0.5em}
.privat-dialog-christian-text p{letter-spacing:0.02em;line-height:1.5em;margin-bottom:2em;color:rgba(0,0,0,0.7)}

.privat-dialog-christian-slider-pagination{margin-top:1em;text-align: center}
.privat-dialog-christian-slider-pagination-dot{position:relative;margin:0 1em;width:0.7em;height:0.7em;border-radius:50%;transition:all .3s ease;background-color:rgba(0,0,0,0.7);display:inline-block;cursor:pointer}
.privat-dialog-christian-slider-pagination-dot.active{background-color:var(--green);transform: scale(1.6);}
.privat-dialog-christian-slider-pagination-dot:hover{transform: scale(1.6);}


.impressum{width:var(--container);height:65vh;text-align:left;color:rgba(0, 0, 0, .7);margin-bottom:6em}
.impressum h2{font-size:var(--h3)}
.impressum-anschrift{width:30%;display: inline-block;float:left;}
.impressum-text{width:70%;display: inline-block;float:right;height:100%;overflow: scroll}

	.arrow-privat{top:calc(100vh - 6em)}


@media (orientation: portrait){


  .start-text {
    text-align: left;
    position: absolute;
    min-height: 20em;
    overflow: scroll;
    height: 70dvh;
    top: 10dvh;
    left: 10%;
    width: 80%;
}

.privat-dialog:before {
    background-color: var(--white);
    position: absolute;
    left: -15%;
    top: calc(100dvh - 100vh - 7.3em);
    height: 20em;
    width: 130%;
    border-radius: 50%;
    content: "";
}


.arrow img {
    width: 1.6em;
    transition: transform .4s ease;
}

.start-christian {
    position: absolute;
    left: unset;
    top: unset;
    height: 50%;
    bottom: 0;
    right: 0;
    overflow:hidden;
}


.start-christian img{margin-right:-5em}

.gl-logo {
    width: 81.5%;

}

.start-gemeinderat:before {
    background-color: var(--green);
    position: absolute;
    top: calc(- 2.3em);
    height: 20em;
    width: 240%;
    border-radius: 50%;
    content: "";
}

.arrow {
   
    bottom: 3em;

}

.start-hero .arrow  {
   
    bottom: 10em;

}


.start-gemeinderat-text {
    width: var(--container);
    margin-bottom: 0em;
    min-height: 30em;
    text-align: left;
    color: rgba(0, 0, 0, 0.7);
    z-index: 2;
    max-height: calc(100dvh - 8em);
    overflow: scroll;
}
.start-thalwil-grid-container{width:100vw;overflow:scroll;max-height: calc(100dvh);box-sizing:border-box;}
.start-thalwil-grid-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* iOS smooth */
  width: 100vw;
}
    .start-thalwil-grid {
        width: 260vw;
        padding:0 5vw;
        position:relative;
        display: inline-block;
        max-height: calc(100dvh);
        margin-bottom:unset;
    }
    .start-thalwil-grid {
        width: 270vw;
        display: inline-block;
        max-height: calc(100dvh);
        padding-bottom: 8em;
        padding-top:3em;
    }

       .start-thalwil-single {
        width: 75vw;
        margin: 0 5vw 0 0vw;
        display: inline-block;
        float: left;
        scroll-snap-align: start;
  scroll-snap-stop: always; 
  float:unset;
    }

        .start-thalwil-single:last-of-type {
      margin-right:32vw;
    }


/* 1) Der Scroll-Container */
.start-thalwil-grid-container{
  width: 100vw;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;              /* optional */
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 5vw;
  scroll-padding-right: 5vw;
}

/* 2) Der Track (nicht selbst scrollen!) */
.start-thalwil-grid{
  display: flex;
                            /* entspricht deinem margin links/rechts */
  width: max-content;                   /* Track passt sich Inhalt an */
  padding: 3em 5vw 8em 5vw;             /* deine padding Werte */
  max-height: 100dvh;
  overflow:unset;
}

/* 3) Die Slides */
.start-thalwil-single{
  flex: 0 0 75vw;                       /* exakt 75vw breit */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

    .start-thalwil-single p {
    font-size: 1.25em;
    line-height: 1.35em;
    letter-spacing: 0.02em;
    color: var(--white);
}

.start-gemeinderat-text ul {
    font-size: 1.25em;
    letter-spacing: 0.001em;
    line-height: 1.5em;
}



  .privat-dialog-christian{position:relative;height:80vh;overvlow:scroll;padding-top:3em}
  .privat-dialog-christian-slider{ width:100%; float:none; }
  .privat-dialog-christian-text{ width:100%; float:none; height:auto; overflow:auto; position:relative;height: calc(100vh - 42em);} /* Text normal scrollbar */

  .privat-dialog-christian-slider-images{
    display:flex;
   
    height: 23em;            /* anpassen */
    position: relative;      /* ok */
    touch-action: pan-y;     /* vertikales Scrollen der Seite bleibt möglich */
  }
  .privat-dialog-christian-slider-images img{
    position: static;
    flex: 0 0 100%;
    width:100%;
    height:100%;
    position:relative;
    opacity:1;               /* wir steuern per translateX */
    transition:none;
  }


     .start-dialog-text {
        position: relative;
        top: 3em;
        left: 0;
        width: var(--container);
        text-align: left;
        padding-bottom: 15em;
        overflow: scroll;
    }


.start-dialog-text ul{font-size:1.25em;line-height:1.4em}

.start-dialog-christian {
    position: absolute;
    left: -3em;
    top: unset;
    height: 50%;
    bottom: 0;
    display:none;
}

.start-dialog-footer-text{font-size:var(--font);text-align:center}

.start-dialog-footer-mehr{text-align:center;width:100%;display: none;margin-bottom:0.3em;}
.start-dialog-footer-linktext{display:none}

.start-dialog-footer img {
    height: 1em;
    transform: translateY(0em);
    height: 1.8em;
    width: 1.8em;
    object-fit: contain;
}
.start-dialog-footer a {
    margin: 0 .5em;}

     .start-dialog-footer {
        text-align: center;
        padding: 2em 3em 1em 0;
        z-index: 5;
    }

    .start-dialog-about {
        position: absolute;
        right: 0;
        bottom: 0;
        overflow: hidden;
        z-index: 6;
    }
	
	
	.start-dialog-image{width:100%;position:absolute;bottom:0;right:0;}


.menu-links-inner a {
        display: block;
        font-size: 1.75em;
        line-height: 1.5em;
    }

    .menu-links:before {
    left: 0%;
    top: -34em;
    height: 50em;
    width: 150%;

}


.navigation {
    position: absolute;
    right: 2em;
    top: 2em;
}


.privat-hero .start-christian{bottom: 2em;}
    .privat-dialog-christian-slider {
        width: 70%;
        float: none;
        position:relative;
        margin-left: 15%;
    }
.privat-dialog-christian-slider:before, .privat-dialog-christian-slider:after{content:"";width:21vw;height:100%;z-index:8;background-color:#fff;position:absolute;left:-21vw;top:0}
 .privat-dialog-christian-slider:after{left:unset;right:-21vw}

 .privat-dialog-christian-slider-pagination {
    margin-top: 1em;
    text-align: center;
    padding-bottom: 0.8em;
}

     .privat-dialog-christian-text {
        width: 100%;
        float: none;
        height: auto;
        overflow: auto;
        position: relative;
        height: calc(100dvh - 34em);
        padding-bottom: 5em;
    }


/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  display: none;
}

/* Firefox */
* {
  scrollbar-width: none;
}

/* IE / alte Edge */
* {
  -ms-overflow-style: none;
}

.fadeout {
        width: 100%;
        height: 12em;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
        pointer-events: none;
        position: absolute;
        bottom: -10em;
    }

    .start-dialog-text h2 {width:80%;}
	
	.arrow-privat{top:calc(100dvh - 4.5em)}
	
		.start-dialog-image{display:none;}

    .start-dialog-about:before {
    background-color: var(--blue);
    position: absolute;
    left: 0%;
    top: 1em;
    height: 20em;
    width: 170%;
    border-radius: 50%;
    content: "";
    z-index: 1;
}
	
	.start-dialog-about a {
display:inline-block;
    padding:0;
	margin: 1.6em 0.5em 0.2em 8em;

}
	.privat-dialog.heather .frame-inner{height:100svh}
	
	.menu-links {
		padding: 3.5em 4em 9em 15em;}
	
}