html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, button,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent; }

input, select, textarea 
{ border-radius: 0;
margin: 0;      
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
appearance: none;
-webkit-appearance:none;
-moz-appearance:none;
outline: none;
box-shadow: none; } 

::-webkit-scrollbar {
display: none; }
-moz-scrollbars-none
{ overflow: hidden; }

::-moz-selection { 
background: var(--lightgrey) }
::selection {
background: var(--lightgrey) }

/*********** CONTROLS ***********/

*
{ margin: 0 auto;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-text-size-adjust: none;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none; 
-webkit-touch-callout: none; 
-webkit-tap-highlight-color: none;
font-family: 'Plankton';
font-weight: 510;
line-height: 1.15em;
font-variation-settings: "MONO" 0 1; 
--black: #111;
--white: #fff;
--offwhite: #f8f8f8;
--darkgrey: #282828; 
--grey: #aaa; 
--lightgrey: #eee;
--yellow: #ffff2e;
--green: #0f0;
--blue: #0000ff;
--red: #ff0e00;
--purple: #9013FE;
--xs: 12px; 
--s: 13px; 
--m: 15px;
--l: 20px;
cursor: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }

html, 
body {
margin: 0;
background: var(--white);
font-size: var(--m);
color: var(--black);
hyphens: none;
scroll-behavior: smooth; /* Aktiviert smooth scrolling */
scroll-padding-top: 100px; }

	body {
	  opacity: 0;
	  transition: opacity 0.3s ease-in-out;
	  will-change: opacity;
	}

	body.loaded {
	  opacity: 1;
	  will-change: auto; /* danach wieder freigeben */
	}


/*********** MENU ***********/

#head {
    position: fixed;
    top: 0;
    left: 0;      /* wichtig */
    right: 0;     /* wichtig */
    width: 100%;  /* wichtig */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px 22px 30px;
    transition: transform 0.5s ease; /* weiches Ein-/Ausblenden */
	z-index: 100; }

	#head.hidden {
	transform: translateY(-100%); } /* Header nach oben ausblenden */

	#sub-menu
	{ position: fixed;
	z-index: 1000;
	top: 20px;
	left: 50%;
	transform: translate(-50%);
	text-align: center; }

		.nav
		{ text-decoration: none;
		display: inline-block;
		font-size: var(--m);
		margin-right: 5px;
		border-bottom: 0px;
		cursor: pointer; }

		.nav:last-child
		{ margin-right: 0px;
		}

		#cart-link
		{ margin-left: 5px; }

		.nav:hover {
		font-variation-settings: "MONO" 1; }

	    /* verschwindet */
	    #titel {
	    display: inline;
	    }

/*********** AUFBAU ***********/


#content
{ width: 100vW; 
padding: 0px 30px 0px 30px;
margin-top: 100px;
background: #fff;
}

#content-type
{ width: 100vW; 
padding: 0px 30px 0px 30px;
background: #fff;
}

			/*********** AUFBAU ***********/

			.row {
			    display: grid;
			    grid-template-columns: repeat(12, 1fr);
			    gap: 20px;
			    margin-bottom: 20px;
			    width: 100%;
			}

			/* col-N = belegt N von 12 Spalten */
			.col-2          { grid-column: span 2; }
			.col-3          { grid-column: span 3; }
			.col-4          { grid-column: span 4; }
			.col-5          { grid-column: span 5; }
			.col-6,
			.col-6info      { grid-column: span 6; }
			.col-8          { grid-column: span 8; }
			.col-10         { grid-column: span 10; }
			.col-12         { grid-column: span 12; }

			/*********** CATALOGUE ***********/

			#typefaces {
			    display: grid;
			    grid-template-columns: repeat(3, 1fr); /* col-4 = 4/12 = 3 Items pro Zeile */
			    gap: 20px;
			    margin-top: 100px;
			    margin-bottom: 100px;
			}


			#typefaces > div {
		    	position: relative;
			}


.row--center {
    display: flex;
    justify-content: center;
}

.row--center .col-3    { width: 25%; }
.row--center .col-4    { width: 33.333%; }
.row--center .col-6,
.row--center .col-6info { width: 50%; }
.row--center .col-8    { width: 66.666%; }

.space-s
{ height: 50px; }

.space-m
{ height: 100px; }

.space-l
{ height: 200px; }

.space-xl
{ height: 300px; }

.eula-eintrag
{ margin-bottom: 20px; }


/*********** TABLE / INDEX ***********/

#index
{ width: 100vw;
height: 100vh;
cursor: ns-resize; }

.slide {
position: absolute;
opacity: 0;
white-space: nowrap;
pointer-events: none;
z-index: 0; /* ← neu */
}

	.slide > * {
	display: inline-block;
	vertical-align: top;
	white-space: normal;  /* Text im Inneren wieder umbrechen */
	margin-right: 10px;   /* ← Gap */
	}
	
	.slide > *:last-child {
	margin-right: 0px;   /* ← Gap */
	}

	.slide .col-2,  .slide .col-2s  { width: calc(16.666vw - 10px); }
	.slide .col-3,  .slide .col-3s  { width: calc(25vw - 10px); }
	.slide .col-4,  .slide .col-4s  { width: calc(33.333vw - 10px); }
	.slide .col-5,  .slide .col-5s  { width: calc(42vw - 10px); }
	.slide .col-6,  .slide .col-6s  { width: calc(50vw - 10px); }
	.slide .col-8,  .slide .col-8s  { width: calc(66.666vw - 10px); }
	.slide .col-10, .slide .col-10s { width: calc(83.333vw - 10px); }
	.slide .col-12, .slide .col-12s { width: calc(100vw - 10px); }

	.slide img {
	display: block;
	width: 100%;
	height: auto;
	}

	slider-control {
	pointer-events: all;   /* außer die Slider-Steuerung */
	}

#hint {
position: fixed;
bottom: 20px;
/* top: 50%; */
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 200;
pointer-events: none;
font-size: var(--m);
}

.text-box {
padding: 10px;
border: 1px solid var(--black);
background: var(--white);
width: 100%;
box-sizing: border-box;
aspect-ratio: 1 / 1;
font-size: var(--m); }

	/**************** EULA ****************/

	.eula-einzug
	{ padding-left: 41px; 
    text-indent: -41px; }

	.upcoming {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9); /* Weisser Hintergrund mit 90% Deckkraft */
    z-index: 10;
    cursor: wait;
	}

	.upcoming span {
	color: var(--black); 
	transform: rotate(-45deg);
	}









/********************** SCHRIFT UNTERSEITE */

#start, #start-starter { 
display: flex;
justify-content: center;  /* Horizontale Zentrierung */
align-items: center;      /* Vertikale Zentrierung */
position: relative;
margin-bottom: -0px;  }

	#start-starter
	{ background: var(--white); } 

	.start-content-img
	{ width: calc(90vw - 0px);
	height: calc(100vh - 0px); } 





#info, #specimens, #features, #test, #buy
{ padding: 0px 0px;
margin-bottom: 150px; }

#buy
{ 
/* min-height: calc(100vH - 147px);   OHNE BILDER  100px Abstand nach oben Head + 47px footer */
margin-bottom: 0px; }

.meta {
display: flex;
width: 100%;
text-align: left;
font-size: var(--m); 
gap: 10px;
margin-bottom: 0px; }

	.meta-angabe {
	flex: 0 0 160px; /* fixer Wert */
	}

	.meta-wert {
	flex: 1; /* nimmt den Rest */
	}






/**************** INFO UNTERSEITE ****************/

#glossar {
display: flex;
flex-wrap: wrap;
gap: 10px;
width: 100%; }		

	.glossar--initial, .glossar--eintrag {
	padding: 0px 0px 0px 0px;
	flex: 0 0 calc((100% - 40px) / 5);  /* 5 Spalten, 4x10px gaps = -40px */ }


	.glossar--initial { 
		text-align: center; }


		span.initial
		{ display: inline-block;
		width: 50px;
		text-align: center;
		font-size: var(--s); } 


	.info-einzug
	{   padding-left: 166px; 
	    text-indent: -166px; }


/**************** FOOTER ****************/


div#footer {
    margin-top: 0px;
    position: relative;
    margin-bottom: 10px; }

	.legal-container {
	display: flex;
	gap: 20px;
	max-width: 100%;
	margin: 0 auto;
	margin-bottom: 20px; }

	.legal-column {
	flex: 1;
	max-width: 33.3%;
	font-variant-ligatures: none; }



/**************** TYPO ALLGEMEIN ****************/

p
{ color: var(--black); }

.xs
{ font-size: var(--xs); }

.s
{ font-size: var(--s); }

.m
{ font-size: var(--m); }

.l
{ font-size: var(--l); }

p.accordion-titel
{ font-size: var(--m);  }

p.up
{ text-transform: uppercase; }

.url {
    word-break: break-all;
}

h1
{ font-size: var(--m);
line-height: 105%;
margin-top: 2px;
margin-bottom: 0px; }

p.top
{ margin-top: 2px; }

	.center
	{ text-align: center; }

	.right
	{ text-align: right; }

	.mono
	{ font-variation-settings: "MONO" 1; }

    .grey
    { color: var(--grey); }


a
{ color: var(--black);
text-decoration: none;
border-bottom: 1px solid var(--black);
cursor: pointer; }

a:hover
{ cursor: pointer;
text-decoration: none;
border-bottom: 0px; }

	a.link
	{ text-decoration: none;
	display: inline-block;
	font-size: var(--m);
	border-bottom: 0px;
	cursor: pointer; }

	a.footer
	{ font-size: var(--s);
	color: var(--grey);
	text-decoration: none;
	border-bottom: 0px;
	margin-right: 10px; }

	a.info-buttons /* EULA; Sepcimen, Trial */
	{ text-decoration: none;
	display: inline-block;
	font-size: var(--m);
	border-bottom: 0px;
	cursor: pointer;
	margin-right: 10px; }



/**************** IMAGES ****************/

img {
display: block;
width: 100%;
height: auto; 
}

.sw
{ filter: grayscale(1); }


/**************** SLIDER ****************/

slider-controls.controls {
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
z-index: 99;    
pointer-events: none;  }

	slider-control {
	display: block;
	position: absolute;
	top: 0;
	height: 100%;
	pointer-events: all;}

	.control-left {
	left: 0;
	width: 50%;
	cursor: w-resize; }

	.control-right {
	left: 50%;
	width: 50%;
	cursor: e-resize; }

.slider
{ position: relative;
display: block; }

	.slider-count {
	position: absolute;
	top: 13px; /* 10px da container 5px padding */
	right: 10px;
	text-align: center;
	z-index: 100; }

	.current-slide, .slide-total
	{ background: var(--green);
	padding: 2px 6px;
	margin-right: 1px;
	font-weight: 550;
	font-size: var(--xs); }

	.slide-total
	{ margin-right: 0px; }


/**************** TEXT INAMTION INFO OVERLAY ****************/

.text-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 101;
	white-space: nowrap;
	opacity: 0; /* Start unsichtbar */
	animation: fadeOut 0.3s forwards; }

.static, .dynamic {
font-size: 9vW;
font-weight: 450;
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/**************** INDEX ARBEITEN ****************/ 

.green 
{
width: 100%;
aspect-ratio: 1;
}