/*---------------TYPO------------------*/
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;

}

@font-face {
    font-family: 'garamondSC08regular';
    src: url('fonts/EBGaramondSC08-Regular.woff2') format('woff2'),
         url('fonts/EBGaramondSC08-Regular.woff') format('woff'),
         url('fonts/EBGaramondSC08-Regular.ttf') format('truetype'),
         url('fonts/EBGaramondSC08-Regular.otf') format('opentype');
}


@font-face {
    font-family: 'garamond08italic';
    src: url('fonts/EBGaramond08-Italic.woff2') format('woff2'),
         url('fonts/EBGaramond08-Italic.woff') format('woff'),
         url('fonts/EBGaramond08-Italic.ttf') format('truetype'),
         url('fonts/EBGaramond08-Italic.otf') format('opentype');

}

@font-face {
    font-family: 'garamond08regular';
    src: url('fonts/EBGaramond08-Regular.woff2') format('woff2'),
         url('fonts/EBGaramond08-Regular.woff') format('woff'),
         url('fonts/EBGaramond08-Regular.ttf') format('truetype'),
         url('fonts/EBGaramond08-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'garamond12allsc';
    src: url('fonts/ebgaramond12-allsc.woff2') format('woff2'),
         url('fonts/ebgaramond12-allsc.woff') format('woff'),
         url('fonts/ebgaramond12-allsc.ttf') format('truetype'),
         url('fonts/ebgaramond12-allsc.otf') format('opentype');
}

@font-face {
    font-family: 'opensansregular';
    src: 
         url('fonts/OpenSansRegular.woff') format('woff'),
         url('fonts/OpenSansRegular.ttf') format('truetype');
}

/*---------------BODY------------------*/


body {
	height: 100%;
	margin: 0;
	padding: 25px 25px 50px 25px;
	box-sizing: border-box;
background: #947f3b;
}

img::selection {
background-color: rgba(255,255,255,0); 
}

#name::selection { 
color: white;
background-color: rgba(255,255,255,0);
}

#gewerk::selection { 
color: white;
background-color: #ff5e00;
}



#kontakt::selection { 
color: white;
background: #ff5e00;
}

#impressum a:link::selection { 
color: #ff5e00;
}

table {
	width: 100%;
	height: calc(100vh - 25px - 50px - 16px);
	border-collapse: collapse;
	table-layout: fixed;
z-index: 500;
}

td {
    outline: none;
    border: none;

    border-top: 2px solid blue;
    border-left: 2px solid blue;
	text-align: center;
	font-weight: normal;
	opacity: 100%;
	padding: 0px;
}
td:empty::before {
    content: "\00a0";
}

tr td:last-child {
    border-right: 2px solid blue;
}

table tr:last-child td {
    border-bottom: 2px solid blue;
}

.merged {
	background-color: rgba(255,255,255,0); 
	color: blue; 
outline: none;
}

.merged::selection {
background: rgba(255,255,255,0);
}


#name {
	font-family: 'garamond08regular';
	font-size: 4vw;	
	z-index: 900;
}


#gewerk {
	font-family: 'garamond08italic';
	font-size: 6vw;
	line-height: 5vw;
	z-index:899;
color: white;
text-shadow: 0.16vw 0.16vw 0px #ff5e00;

}

#work {
	font-family: 'garamondSC08regular';
    font-size: clamp(14px, 3vw, 22px);
	letter-spacing: 0.3em;
writing-mode: vertical-rl;
}



#kontakt {
	font-family: 'garamond08italic';
    font-size: clamp(14px, 3vw, 22px);
	color: blue;
	margin: 0.5em;
padding: 0 0.5em;
box-sizing: border-box; 
white-space: nowrap;  
}



.zahl {
	font-family: 'opensansregular';
	font-size: 0.5em;
	color: rgba(0, 0, 0, 0);
	user-select: none;
}

.weiss {
	background-color: #947f3b;
}



.table-wrapper {
	position: relative;
	display: inline-block;
 overflow: hidden;  
}

.table-wrapper table{
	position: relative;
	z-index: 2;
}

#schwein {

	position: absolute;
	bottom: 0;
	right: 0;
	height: 80vh;
	width: auto;
	z-index: 1;
}

#impressum {
	position: fixed; 
	left:0;
	right:0;
	bottom: 10px;
	font-family: 'garamond08regular';
	font-size: 12px;
	text-align: center;
	color: #5e00ff;
}

a:link {
	text-decoration: none;
	color: #5e00ff;
}

#impressum a:link{
	color: blue;
	text-decoration: none;
}

#impressum a:visited {
	color: blue;
}

#impressum a:hover{
	color: white;
}

#work:link{
	color: blue;
	text-decoration: none;
}

#work:visited {
	color: blue;
}

#work:hover{
	color: #ff5e00;
}

#work::selection { 
color: white;
background-color: #ff5e00;
}


.ligatur { font-variant-ligatures: common-ligatures; 
	-moz-font-feature-settings: "liga"; 
	-webkit-font-feature-settings: "liga", "dlig";
	-moz-font-feature-settings:"liga=1, dlig=1";
	-moz-font-feature-settings:"liga","dlig";
	-ms-font-feature-settings:"liga","dlig";
	-o-font-feature-settings:"liga","dlig";
	font-feature-settings:"liga","dlig";
}

#flex {
	display: flex;
	flex-direction: column;
}
  #flex > div {
    margin-bottom: 0.01vw;
}





/*---------------SCREEN------------------*/


@media (max-width: 1000px) {
  #work {
    font-size: clamp(14px, 3vw, 22px);
  }
  #kontakt {
    font-size: clamp(14px, 3vw, 22px);
  }
}


@media (max-width: 400px) {
    #kontakt {
        font-size: clamp(12px, 2.5vw, 18px);
        padding: 1 1em; /* mehr Abstand bei kleinen Bildschirmen */
    }
}