/*@media (min-width: 970px) {*/
@font-face {
  font-family: acmeFont;
  src: url(../fonts/Acme-Regular.ttf);
}
*{
    font-family: acmeFont;
}

@media (min-width: 1px) {
* {
	margin:0;
	padding:0;
}

html, body{
    margin-top:0px;
    height:100%;
    max-width:5000px;
    
}
body{position: absolute;}

/*Font of the page*/

p{
    color:white;
}
h1{color:white;
}
h2{color:white;
}
h3{color:white;
}
h4{color:white;
}
th{color:white;text-color:white
}
#navigation{
    position: fixed;
    top:0;
    z-index: 40;
    width:100%;
    height:80px;
    /* Nur die feine Trennlinie, kein Hintergrund. Seit alle Seiten den
       dunklen Grund aus base.css teilen, bleibt die Schrift ueberall
       lesbar -- vorher war hier ein Verlauf noetig, weil
       gastronomie/nachbarschaft auf Weiss standen. */
    background-color: transparent;
    border-bottom: 1px solid var(--hairline);
    display:subgrid;

}


#Logo{
    float: left;
    margin-top:8px;
    margin-left:1%;
    position:fixed;
    z-index:41;
	/*height:70%; löschen!!!! überdeckt Seite!!  */
       
}

/* Die Ummendorf-Silhouette (assets/images/ummendorf-skyline.png) ist
   vorerst aus der Navigation entfernt -- in Balkenhoehe war sie zu klein,
   um zu wirken. Die Datei bleibt liegen; als CSS-Maske laesst sie sich
   spaeter gross und in beliebiger Farbe als Design-Element einsetzen:

   background-color: var(--linen-300);
   mask-image: url(../images/ummendorf-skyline.png);
   mask-repeat: no-repeat; mask-size: contain;                            */

#menu {
    position: fixed;
    top: 26px;
    right: 28px;
    margin: 0;
    z-index: 43;
    display: flex;
    gap: 20px;
    align-items: center;
}

#menu a{
    float: none;
    font-family: var(--font-body);
    font-size: 1.05em;
	margin-right:0;
	text-decoration:none;
	color: var(--linen-300);
	font-weight: 400;
    letter-spacing: 0.02em;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#menu a:hover {
	color: var(--gold-300);
	border-bottom: 1px solid var(--gold-500);
}


#banner{
    z-index:2;
}
/*#banner{

    position:fixed;
    width:100%;
    height:100%;
    z-index: -1;
    
    background: url(../images/haus-aussenansicht.jpg);
    background-size: cover;
}*/




#frame{
    
    float:right;
    margin-top:15%;
    margin-left:70%;
    
    position:fixed;
    z-index:10;
   
}
/* --- Medienkarten (Video / Drohne / Karte) -------------------------
   Frueher: 600x400 Kaesten mit 10px grauem Rahmen, die per
   margin-left von 120% auf 20% hereingeschoben wurden (1s/2s/3s).
   Das Verschieben von margin aendert das Layout, weshalb fullPage.js
   die Sektionshoehe zu frueh und zu klein gemessen hat. Jetzt per
   opacity/transform -- kein Reflow, und die Staffelung laeuft ueber
   transition-delay statt ueber verschieden lange Laufzeiten.        */
#Mapscont.videotoggle{ transition-delay: .24s; }


/* --- Gemeinsames Sektionsgeruest -----------------------------------
   Bisher hatte keine Sektion ausser der Startbuehne eine Ueberschrift
   oder eine gemeinsame Breitenbegrenzung; alles haing an einzelnen
   Pixel-/Prozent-Margins.                                            */
.section-eyebrow::before{
    content:"";
    flex:0 0 auto;
    width:7px;
    height:7px;
    border-radius:50%;
    background: var(--gold-500);
    box-shadow: 0 0 10px 2px rgba(217,160,81,0.7);
}


/* Zustimmungsschaltflaeche vor dem Laden externer Inhalte */
.consent-hint a{
    color: var(--linen-300);
    text-decoration:underline;
}

/* --- Veranstaltungskarten ------------------------------------------ */
.event-card-sub{
    margin:0 0 16px;
    font-family: var(--font-body);
    font-size:0.8em;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color: var(--gold-300);
}
.event-name{
    font-family: var(--font-body);
    font-size:0.92em;
    line-height:1.45;
    color: var(--linen-300);
}

.hero {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hero-media,
.hero-img {
  width: 100%;
  height: 100%;
  display: block;
}

/* wichtig: steuert wie Bild gefüllt wird */
.hero-img {
  object-fit: cover;
}

.hero-night-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 78% 15%, rgba(217,160,81,0.14), transparent 60%),
    linear-gradient(180deg, rgba(10,14,26,0.62) 0%, rgba(15,20,36,0.48) 45%, rgba(15,20,36,0.7) 100%);
}

.cover{
    position:absolute;
    display: inline-block;
    z-index:5;
    background-color:rgba(100,50,50,0.92);
    width:600px;
    height:400px;
  
  opacity:1;
  transition : all 3s;
  -wekit-transition : all 3s;
  -moz-transition : all 3s;
  cursor:pointer;
}
.cover p{
    margin-top:160px;
    margin-left:180px;
    float:center;
    font-size:2em;
    color:white;
}
.cover p2{
    margin-left:200px;
    float:center;
    font-size:3em;
    color:red;
}
/*@keyframes myAnimation{
0%{
    opacity: 1;
    transform: : rotateX(90deg);
}
50%{
    opacity: 0.5;
    transform: : rotateX(0deg);
}
100%{
    display: none;
    opacity: 0;
    transform: rotateX(90deg);
}
}
.cover:hover{
animation-name: myAnimation;
animation-duration: 2000ms;
animation-fill-mode: forwards;

}*/




.language{
    float:center;
    position: inherit;
    margin-left:50%;
     margin-top:500px;
}


.section{
    position: relative;
    
}
#distance{
	margin-bottom:350px;
	margin-top:250px;
}



.subSection{
    z-index:5;
    background-color: rgb(80,60,60);
     height:160px;
     width:100%;
    
}
.subSection a1{
    position:absolute;
    float:center;
    margin-top:80px;
    margin-left:35%;
    margin-right:20%;
    
}
.subSection a{
    position:absolute;
    z-index:50;
    float:center;
    margin-left:33%;
    margin-top:-80px;

}

.sectOne{
   background:url(../images/haus-aussenansicht.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.sectThree{
   background:url(../images/deco-scrollback.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height:428%;
}




.about{
    margin: 0 auto;
   
    padding: 100px 0;
    transform-style:preserve-3d;
    transform: perspective(600px);
    
}

.about h3{
    text-transform: uppercase;
    font-size: 50px;
    font-weight: 400;
    line-height:50px;
}
.about h1, .about p, .about h3{
    transition: all 2s ease;
    
   
    
}
h1{
    font-size:1.2em;
}
.about.hidden h3{
    
    opacity:0;
    transform:translate3d(0,0,200px) rotateY(-140deg);
}
.about.hidden h1{
    
    opacity:0;
    transform:translate3d(0,0,200px) rotateY(-140deg);
}
.about.hidden p{
    opacity:0;
    transform:translate3d(0,0,200px) rotateY(140deg);
}



/*#deutsch{
    position:fixed;
    z-index:0.5;
    margin-left:10%;
    margin-right:20%;
    margin-top:-940px;
   
    line-height: 35px;
	text-align:left;
    color:#546154;
    font-size: 1.4em;
    font-family: 'Acme', sans-serif;
    
    
}*/




section {
  width: 100%;
/*  min-height: 150vh;  */ /* wichtig: größer als Bildschirm */
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

/*  background: url(../images/haus-aussenansicht.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* NICHT fixed */
}



.blurbox
{
    position:fixed;
    top:35%;
    left:50%;
    
   max-width: 640px;
   /*padding:3%;*/
   box-shadow: 0 5px 15px rgba(0,0,0,.5);
   border-radius: 6px;
   overflow:hidden;
   z-index: 9999;
   transform: translateX(-50%) translateY(0);
    
    opacity: 1;
    pointer-events: none;

    transition: transform 0.25s ease, opacity 0.25s ease;
    will-change: transform, opacity;
}

.blurbox.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-120px);
}

/* Die Box selbst faengt keine Klicks ab (damit fullPage.js scrollen kann),
   die Links darin muessen aber anklickbar bleiben */
.blurbox a {
    pointer-events: auto;
}
.blurbox.hidden a {
    pointer-events: none;
}


/* Kleine Auszeichnungszeile ueber der Hauptueberschrift, mit goldenem Punkt */
.blurbox h2
{
    position:relative;
    margin:0 0 18px;
    padding: 0;
    z-index:2;
    display:flex;
    align-items:center;
    gap:9px;
    text-transform:uppercase;
    font-family: var(--font-body);
    font-size:0.78em;
    font-weight: 400;
    letter-spacing: 0.16em;
    color: var(--gold-300);
}
.blurbox h2::before
{
    content:"";
    flex: 0 0 auto;
    width:7px;
    height:7px;
    border-radius:50%;
    background: var(--gold-500);
    box-shadow: 0 0 10px 2px rgba(217,160,81,0.7);
}
/* Hauptueberschrift: Serif in Gross-/Kleinschreibung, nicht in Versalien --
   uppercase nimmt der Serif genau den Charakter, den sie tragen soll */
.blurbox h1
{
    position:relative;
    margin:0 0 16px;
    padding: 0;
    z-index:2;
    text-transform:none;
    font-size:2.3em;
    line-height:1.15;
    color: var(--linen-100);
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.005em;
}
/* Hervorgehobenes Wort in der Hauptueberschrift, z.B. "Oberschwaben" */
.blurbox h1 em
{
    font-style: italic;
    color: var(--gold-300);
}
.blurbox h3
{
    position:relative;
    margin:0 0 14px;
    padding: 0;
    z-index:2;
    text-transform:none;
    font-size:1.15em;
    color: var(--gold-300);
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
}
.blurbox h3 a{
    color: var(--gold-300);
}
.blurbox p
{
    position:relative;
    margin:0;
    padding: 0;
    z-index:2;
    font-family: var(--font-body);
    font-size:17px;
    line-height:1.6;
    color:#dacfbf;
}
/* Handlungsaufforderungen direkt in der Willkommens-Box */
.hero-cta-row{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:24px;
    pointer-events:auto;
}
.hero-cta{
    display:inline-block;
    padding:12px 24px;
    background: var(--gold-500);
    color:#1c1305;
    font-family: var(--font-body);
    font-size:0.95em;
    font-weight:600;
    text-decoration:none;
    border-radius:999px;
    transition: background 0.2s ease, transform 0.2s ease;
}
.hero-cta:hover{
    background: var(--gold-300);
    transform: translateY(-1px);
}
.hero-cta-secondary{
    font-family: var(--font-body);
    font-size:0.9em;
    color: var(--linen-300);
    text-decoration:none;
    padding-bottom:2px;
    border-bottom:1px solid var(--hairline);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.hero-cta-secondary:hover{
    color: var(--gold-300);
    border-bottom-color: var(--gold-500);
}
.hero-facts{
    position:relative;
    z-index:2;
    display:flex;
    gap:28px;
    margin-top:24px;
    padding-top:16px;
    border-top: 1px solid var(--hairline);
}
.hero-fact{
    display:flex;
    flex-direction:column;
}
.hero-fact-num{
    font-family: var(--font-display);
    font-size:1.25em;
    color: var(--gold-300);
}
.hero-fact-label{
    font-family: var(--font-body);
    font-size:0.75em;
    color: var(--linen-300);
    letter-spacing:0.03em;
}
.shadow{
    position:relative;
    padding:3.2%;
    z-index:20;
    background: rgba(10,14,26,0.42);
    border-radius: 6px;
    background-attachment:fixed;
    background-size: cover;
}

@media (max-width: 1200px) {
    #transbox p
{
    float:center;
    margin: 6.5% 2%;
    font-size:2.2em;
}
}
#border{
    position:absolute;
    background-attachment:fixed;
    z-index:1;
    background-repeat: no-repeat;
    width: 103.5%;
    height: 117%;
    margin: -2.1% -2%;
    background-color: transparent;
    border: 2px solid white;
    opacity: 1;
    filter: alpha(opacity=50);
}

.tg  {border-collapse:collapse;border-spacing:0; width:500px;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:white;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:white;}
.tg .tg-yw4l{vertical-align:top}

    
 

li { list-style-type: none; }


/*-----------------------------------------*/
    
    
	
	.container{
	    justify-content:center;
		width: 51.2%;
		height: 0;
		padding-bottom: 30.45%;
	    user-select: none;
		background-color: #1c1c1c;
		border: solid 5px #616161;
		border-radius:5px ; 
	margin-left: auto;
    margin-right: auto;
    margin-bottom:50px;
		margin-top:100px;
	}

	.container .slide_img{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.container .slide_img img{
		width: inherit;
		height: inherit;
	}

	
	#maincont{
    margin-top: 13%;
    position: relative;
    z-index:10;
    
    margin-left:5%;
	margin-right:10%;
	color: rgb(80,30,30);
}


#importantMessage{
    display:block;
	position:relative;
    
    margin-left:10%;
	margin-right:10%;
    padding:20px;
	color:white;
	/*color:color: rgba(80,30,30,0.8);*/


}
    
	.flexboxschraeg{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: baseline;
    -ms-flex-pack: justify;
    justify-content:center;
    flex-flow: column;
    width: 100%;
     
     -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 87%, 100% 0, 0 13%);
  
    background-color:rgba(240,187,180,0.9);
	
    
    }
/* Die beiden Veranstaltungskarten wurden frueher mit margin 2500px
   von links bzw. rechts hereingefahren -- dieselbe Layout-Verschiebung
   wie bei den Videos. Jetzt einblenden statt schieben.               */
#VeranstaltungenBib,
#VeranstaltungenUdorf{
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
#VeranstaltungenBib.toggletable,
#VeranstaltungenUdorf.toggletable{
	opacity: 1;
	transform: none;
}
#VeranstaltungenUdorf.toggletable{
	transition-delay: .12s;
}
.flexelement{
  margin-left:10px;
  margin-bottom:50px;
}

/* --- Ausflugsziele und Gastronomie ---------------------------------
   Vorher: 200x70 Kaesten in kraeftigem Blau mit dunkelblauer Schrift
   darauf (kaum lesbar), darueber ein 6px oranger Balken. Jetzt Chips
   im Nachtschema, die sich beim Ueberfahren golden faerben.          */
.flexlinks{
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
    width: 100%;
    margin: 14px 0 0;
    padding: 0;
}

.id01{
    margin-top:50px;
}

li2{
    display:inline-flex;
    align-items:center;
    padding:10px 16px;
    background-color: rgba(10,14,26,0.55);
    border:1px solid var(--hairline);
    border-radius:8px;
    opacity:0;
    transform: translateY(12px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1), border-color .2s ease;
}
li2.flextransition{
    opacity:1;
    transform:none;
}
li2:hover{
    border-color: var(--gold-500);
}
li2 a{
    color: var(--linen-300);
    text-decoration:none;
    font-family: var(--font-body);
    font-size:0.92em;
    letter-spacing:0.01em;
}
li2:hover a{
    color: var(--gold-300);
}

/* Chip mit duennem Bildstreifen obendrauf, wenn ein echtes Foto in
   `Bildpfad`/`BildPfad` hinterlegt ist. Nutzt sonst ganz normal li2.
   `li2.li2-photo` bleibt im Layout immer gleich gross (kein Reflow beim
   Hovern!) - die eigentliche Karte `.li2-card` liegt absolut darueber
   und waechst beim Hover ueber den Platzhalter hinaus. Der Streifen
   wird dabei zum weniger gecroppten "vollen" Bild (--full-url) und die
   Entfernung blendet unten ein. */
li2.li2-photo{
    position:relative;
    display:inline-block;
    width:clamp(170px, 40vw, 260px);
    height:112px;
    max-width:100%;
    padding:0;
}
li2.li2-photo:hover{
    z-index:20;
}
li2.li2-photo .li2-card{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    background-color: rgba(10,14,26,0.55);
    border:1px solid var(--hairline);
    border-radius:10px;
    overflow:hidden;
    transition:inset .35s cubic-bezier(.16,1,.3,1), border-color .2s ease;
}
li2.li2-photo:hover .li2-card{
    inset:-44px -72px;
    border-color:var(--gold-500);
}
li2.li2-photo .li2-thumb{
    display:block;
    height:56px;
    flex-shrink:0;
    background-image:var(--thumb-url);
    background-size:cover;
    background-position:center;
    transition:height .35s cubic-bezier(.16,1,.3,1), flex .35s cubic-bezier(.16,1,.3,1);
}
li2.li2-photo:hover .li2-thumb{
    height:auto;
    flex:1;
    background-image:var(--full-url);
}
li2.li2-photo a{
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex:1;
    padding:10px 16px;
    min-height:0;
}
/* Beim Hover wird das Bild-Element (.li2-thumb) zur ganzen Karte, der Link
   wird zur Bildunterschrift unten links auf dem Foto - mit Verlauf fuer
   Lesbarkeit, wie bei Airbnb/Netflix-Kacheln. */
li2.li2-photo:hover a{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    flex:none;
    justify-content:flex-end;
    padding:28px 16px 12px;
    background:linear-gradient(180deg, rgba(10,14,26,0) 0%, rgba(10,14,26,0.82) 65%, rgba(10,14,26,0.92) 100%);
    z-index:2;
}
li2.li2-photo .li2-distance{
    display:block;
    max-height:0;
    margin-top:0;
    opacity:0;
    overflow:hidden;
    font-size:0.78em;
    color:var(--linen-300);
    transition:max-height .25s ease, opacity .2s ease, margin-top .25s ease;
}
li2.li2-photo:hover .li2-distance{
    max-height:40px;
    margin-top:4px;
    opacity:0.85;
}

    #text1{
        max-width: 760px;
        margin: 0 auto 6px;
        padding: 0 28px;
        text-align:center;
    }
    #text1 p{
        font-family: var(--font-body);
        font-size:0.98em;
        line-height:1.65;
        color: var(--linen-300);
    }
    #text2{
        max-width: 1140px;
        margin: 60px auto 0;
        padding: 0 28px;
        text-align:left;
    }
    #text2 h2.id01{
        font-family: var(--font-display);
        font-weight:400;
        font-size:2em;
        line-height:1.15;
        color: var(--linen-100);
        text-transform:none;
        margin:0 0 22px;
    }
    #text2 h4{
        font-family: var(--font-body);
        font-size:0.78em;
        letter-spacing:0.16em;
        text-transform:uppercase;
        color: var(--gold-300);
        font-weight:400;
        margin:26px 0 0;
    }
    #text2 p{
        font-family: var(--font-body);
        font-size:0.95em;
        line-height:1.65;
        color: var(--linen-300);
        margin-top:18px;
    }
    #text2 ol{
        list-style:none;
        margin:0;
        padding:0;
    }
    
    #fp-nav ul li a span{
		background: #C83232;
	}
    
    
    
    
    
    
    

/*#referals{
    float:bottom;
    position:relative;
    margin-bottom:100px;
    color: antiquewhite;
    margin-top:10%;
    margin-left:40%;
    line-height: 90px;
   
}
#referals p3{
    margin-bottom: 10px;
    font-size: 0.8em;
}
#referals a{
    margin-bottom: 10px;
    font-size: 0.8em;
    font-family:cursive;
    text-decoration: none;
}*/r
@media screen and (max-width: 685px){
	.container{
		border: none;
		width: 100%;
		height: 0;
		padding-bottom: 55%; 
	}	
	
	label span { font-size: 50pt; }
	
	.prev, .next{
		width: 15%;
	}	
	#nav_slide .dots{
		width: 12px;
		height: 12px;
	}
}
@media screen  and(min-width: 970px){
	.me{ display: none;}
}
@media (max-width: 970px) {

* {
	margin:0;
	padding:0;
}

html, body {
    max-width: 100%;
    height: auto;
}
/* body{position:absolute} weiter oben stammt aus der fullPage.js-Aera
   (dort brauchte die absolute Positionierung, damit .fp-section richtig
   uebereinander liegt). Unter 970px laeuft fullPage.js gar nicht erst
   (siehe navdots.js) - mit position:absolute blieb body trotzdem auf
   Viewport-Hoehe eingesperrt und schluckte jede Touch-/Wheel-Geste, echtes
   Scrollen war komplett blockiert (nur noch per JS scrollTo moeglich).
   Zurueck auf normalen Fluss, damit die Seite wieder nativ scrollt. */
body{
    position: static;
    overflow-x: hidden;
}

/* Hero-Bild und Karte als Vollbild-Overlay zu verschmelzen (erster
   Versuch) ging schief: die Karte deckt von unten her fast 60% der Hero-
   Flaeche ab. Um das Logo oben zu meiden UND das Haus unten (jetzt hinter
   der Karte) zu zeigen, blieb dazwischen nur ein Streifen reiner
   Verlaufsflaeche sichtbar - weder Sterne noch Haus, wirkte "abgeschnitten".
   Zurueck zu zwei Bloecken: Karte zuerst (Buchungs-CTA sofort sichtbar,
   keine Overlay-Kollision), Bild danach grosszuegig fuer sich allein -
   object-position:bottom zeigt bewusst Daemmerung+Haus, das eingebrannte
   Logo (oberes Sechstel) faellt bei diesem Ausschnitt ohnehin komplett weg. */
#fullpage section {
    height: 80vh;
    height: 80svh;
}
.hero-img {
    object-position: 50% 100%;
}
.blurbox{
    position: static;
    top: auto;
    left: auto;
    transform: none;
    box-sizing: border-box;
    width: 90%;
    max-width: 600px;
    margin: 100px auto 0;
    pointer-events: auto;
}
.blurbox .hero-cta-row{
    flex-wrap: wrap;
}

/* Die 250/350px Vor-/Nachlaufraum um #distance war fuer grosszuegige
   Desktop-Sektionsuebergaenge gedacht - auf dem Handy (4x pro Homepage!)
   ergab das bis zu 2400px reine Leerflaeche und war der Hauptgrund fuer
   den "riesige Luecken zwischen allem"-Eindruck. */
#distance{
    margin-top: 6px;
    margin-bottom: 6px;
}
#navigation{
   
    height:60px;
    
}
    
#Logo{
    float: left;
    margin-top:8px;
    margin-left:1%;
    position:fixed;
    max-width: 400px;
    /* War z-index:-1 - fiel bisher nicht auf, weil dort nur die dunkle
       .blurbox-Flaeche lag. Jetzt steht das Vollbild-Hero-Foto direkt
       dahinter, darunter waere das Logo unsichtbar. */
    z-index:41;

}

#SkylineLogo{
   display:none;
       
}

 
#menu a{
    display:none;

}

.buttonhalter{
    position:fixed;
    margin: 20px 55%;
    display: inline-block;
}




#button1 input{
    position:absolute;
    z-index:90;
    margin-left:40px;
    width:35px;
    height:35px;
    border-radius: 30px;
    background:url(../images/england.ico);
    background-size: 32px;
    transition: all ease-in-out 0.2s;
   
    
    font-family: 'Acme', sans-serif;
}
#button2 input{
    position:absolute;
    margin:0 auto;
    width:35px;
    height:35px;
    border-radius: 30px;
    background:url(../images/germany.png);
    background-size: 32px;
    transition: all ease-in-out 0.2s;
   
    font-size: 2em;
    font-family: 'Acme', sans-serif;
}
#button1 > p{
    color:white;
    font-size:30px;
    font-family: sans-serif;
    text-align: center;
    line-height: 30px;
}
#button2 > p{
    color:white;
    font-size:30px;
    font-family: sans-serif;
    text-align: center;
    line-height: 30px;
}

#button1:hover input{
    background:url(../images/england.ico);
    background-size: 32px;
    transform: translateY(-15px);
    cursor: grab;
}
#button2 :hover{
    background:url(../images/germany.png);
    background-size: 32px;
    transform: translateY(-20px);
    cursor: grab;
}








.buttons p{
    z-index: 96;
    float: left;
    margin-right:20px;
    margin-left:50px;
    margin-top: 10px;
    position:absolute;
    font-size: 0.9em;
    
    
}



.language{
    float:center;
    position: inherit;
    margin-left:50%;
     margin-top:500px;s
}




#sectOne{
    width:100%;
    
    
}



.about{
    margin: 0 auto;
   
    padding: 100px 0;
    transform-style:preserve-3d;
    transform: perspective(600px);
    
    
}

.about h3{
    display:none;

   
}
h1{
    font-size:1.1em;
    line-height:30px;
}
h3{
    font-size:2.5em;
}
.about h3, .about p, .about h1{
    transition: all 2s ease;
    
   
    
}
.about.hidden h3{
    
    opacity:0;
    transform:translate3d(0,0,200px) rotateY(-140deg);
}
.about.hidden p{
    opacity:0;
    transform:translate3d(0,0,200px) rotateY(140deg);
}


#transbox
{
    position:absolute;
    
    width: 240px;
    height: 80px;
    margin: -46% 0%;
    background-color: #fff;
    opacity: 0.55;
    filter: alpha(opacity=50);
}
#transbox p
{
    float:center;
    margin: 12.5% 9.5%;
    font-weight: bold;
    font-size:1.2em;
    color: #000;
}
#border{
    position:absolute;
    background-attachment:fixed;
    z-index:1;
    background-repeat: no-repeat;
    width: 103.5%;
    height: 112%;
    margin: -2.3% -2.3%;
    background-color: transparent;
    border: 2px solid white;
    opacity: 1;
    filter: alpha(opacity=50);
}

    
     a1 { text-decoration: none; color: #00A5CC; }
li { list-style-type: none; }


/*-----------------------------------------*/
    
    
    
    
    /*#referals{
    line-height: 15px;
        
        margin-top:5000px;
        padding-bottom:20px;
        font-size:0.85em;
}*/
    
.tg  {width:100%;}
   
    .sectThree{
height:50%;
}
    
    .subSection{
    float:center;
    z-index:5;
    background-color: rgb(80,60,60);
     height:110px;
     width:100%;
    
}
.subSection a1{
    position:absolute;
    float:center;
    margin-top:60px;
    margin-left:25%;
    margin-right:20%;
    width:330px;
    
}
.subSection a{
    position:absolute;
    z-index:50;
    float:center;
    margin-left:20%;
    margin-top:-40px;
    width:600px;

}
/* Der hidden-Zustand wird auf dem Handy nie gesetzt (onLeave/fullPage
   laeuft nicht) - falls doch, trotzdem nie unsichtbar/unklickbar werden. */
.blurbox.hidden{
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.blurbox h2
{
    
    margin:0 0 10px;
   
    font-size:1.1em;
    color:#fff;
}
.blurbox h1
{
  
    margin:0 0 10px;
    line-height: 15px;
    font-size:.8em;
   
}
.blurbox h3
{
    
    margin:0 0 10px;
    font-size:.8em;
   
}
.blurbox p
{
   
    font-size:10px;
}
.flexboxschraeg{
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
    clip-path: polygon(0 0, 0 100%, 100% 95%, 100% 0, 0 5%);
}

#fp-nav ul li .fp-tooltip{
    display:none;
}

/*section {
  width: 100%;
  min-height: 150vh;   
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  background: url(../images/haus-aussenansicht-alt.jpg);
  background-size: contain;
  background-position: center;
  background-attachment: scroll; 
}*/

    
    
}
}