@charset "UTF-8";

/* Fonts and Reset ======================================== */

@import url('reset.css');

/* Variables ======================================== */

:root {
    --lightpurple: 178, 151, 199;
    --darkpurple: 158, 107, 171;
    --lightblue: 91, 87, 162;
    --darkblue: 54, 59, 104;
  
    --primary: var(--darkblue);
    --secondary: var(--darkpurple);
    
    --text: 10, 10, 10;
    --white: 255, 255, 255;
    --black: 0, 0, 0;
    
    --font-text: "n27regular", system-ui, sans-serif;
    --font-head: "n27bold", system-ui, sans-serif;

    --font-weight-normal: 300;
    --font-weight-bold: 700;
    
    --font-size-text: 1rem;

    --line-height-text: 1.55;
    --line-height-head: 1;

    --font-size-s: 0.85rem;
    --font-size-m: 1rem;
    --font-size-l: 1.4rem;
    --font-size-xl: 1.7rem;
    --font-size-xxl: 2rem;

    --letter-spacing: 0.03em;
  
    --pagemargin: 1rem;
    --pagemargin2: calc(var(--pagemargin) * 2);
    --pagemargin-: calc( 0px - var(--pagemargin));
    --space: 4rem;

    --patternsize: 32px;
	--border-radius: 0.5rem;
}



@media only screen and (min-width: 700px) {
  :root {  
      --font-size-s: 1rem;
      --font-size-m: 1.35rem;
      --font-size-l: 1.6rem;
      --font-size-xl: 3rem;
      --font-size-xxl: 4rem;
    
      --pagemargin: 2rem;
      --pagemargin2: calc(var(--pagemargin) * 2);
      --pagemargin-: calc( 0px - var(--pagemargin));    
      --space: 6rem;

      --patternsize: 50px;
  }
}

/* Fonts ======================================== */


@font-face {
  font-display: swap;
  font-family: 'n27regular';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/n27-regular-webfont.woff2') format('woff2'),
       url('../fonts/n27-regular-webfont.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'n27bold';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/n27-bold-webfont.woff2') format('woff2'),
       url('../fonts/n27-bold-webfont.ttf') format('truetype');
}



/* General ======================================== */

  
@view-transition {
  navigation: auto;
}

::view-transition-group(*) {
  animation-duration: 0.5s;
}


html {
  font-size: 16px;
}

* {
  font-family: var(--font-text);
  line-height: var(--line-height-text);
  font-weight: var(--font-weight-normal);
  /* color: rgb(var(--text)); */
  hyphens: auto;
}

strong,
strong span,
em,
b {
  font-family: var(--font-head);
  font-weight: var(--font-weight-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-head);
  margin: 0;
  padding: 0 0 1rem 0;
  text-wrap: balance;
  hyphens: none;
  text-transform: uppercase;
}

h1 {
  font-size: var(--font-size-xxl);
  color: rgb(var(--primary));
  padding: 0 0 0.5em 0;
}

h2 {
  font-size: var(--font-size-xl);
  color: rgb(var(--primary));
}

h3 {
  font-size: var(--font-size-l);
  color: rgb(var(--primary));
}

h4, h5, h6 {
  font-size: var(--font-size-m);
}

p {
  margin: 0;
  padding: 0 0 0.5em 0;
  font-size: var(--font-size-m);
  max-width: 70ch;
}

video {
	max-width: 100%;
}

section ul {
  font-size: var(--font-size-m);
  max-width: 70ch;
}

a {
  transition: all 0.2s;
  color: rgba(var(--secondary),1);
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(var(--secondary),1);
}

a.button,
section.cta a {
  text-transform: uppercase;
  font-size: var(--font-size-s);
  letter-spacing: var(--letter-spacing);
  text-decoration: none;
  display: inline-block;
  line-height: 1em;
  border-radius: 10em;
  background-color: rgba(var(--secondary),1);
  color: #fff;
  padding: 1em 1.5em;
}

a.button.primary {
  color: rgba(var(--white),1);
  background: rgba(var(--secondary),1);
  padding: 0.8em 1em;
  margin-block-start: calc(var(--space) / 1);
}

a.button.secondary {
  color: rgba(var(--secondary),1);
  border: 2px solid rgba(var(--secondary),1);
	background: rgb(var(--white));
}

button {
	font-size: var(--font-size-m);
	text-decoration: none;
	display: inline-block;
	line-height: 1em;
	border-radius: 10em;
	background: rgba(var(--white),1);
	color: rgb(var(--primary));
	font-family: var(--font-head);
	padding: 0.5em 1em;
	margin-inline: auto;
	border: 0;
	transition: all 0.3s;
	cursor: pointer;
}

button:hover {
	box-shadow: 0 0 15px rgb(var(--black), 0.3) !important;
	transform: scale(105%);
}


hr {
  padding: 0;
  margin-block: var(--space);
  border-color: rgb(var(--secondary));
  border-top: 1px;
}

.centered {
  margin-inline: auto;
  position: relative;     
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.fullwidth {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.st {
  margin-block-start: var(--space);
}

.sb {
  margin-block-end: var(--space);
}

.mt1 {
	margin-top: 1rem !important;
}

.mb1 {
	margin-bottom: 1rem !important;
}

.mt2 {
	margin-top: 2rem !important;
}

.mb2 {
	margin-bottom: 2rem !important;
}

.mt4 {
	margin-top: 4rem !important;
}

.mb4 {
	margin-bottom: 4rem !important;
}

figure {
  margin: 0;
}

section.text figure {
  margin-block-start: var(--space);
}

figcaption {
  font-size: var(--font-size-s);
  margin: 0.5em 0 0 0;
}



html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}
  
body {
  background-color: rgb(var(--white));
  position: relative;
}

header {
  padding: calc(1.5 * var(--pagemargin)) var(--pagemargin);
  box-shadow: 0 4px rgba(0,0,0,0.07);
  position: fixed;
  background: rgb(var(--primary));
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

header span {
  display: flex;
  gap: 10px;
}

header a {
  text-decoration: none;
  color: rgb(var(--lightpurple));
}

header img.logo,
footer img.logo {
  height: 20px;
}

button#searchlink {
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	height: 20px;
	padding: 0 1rem 0 0;
	margin-inline-end: 0.3rem;
	margin-block-start: 3px;
	border-right: 1px solid rgb(var(--lightpurple));
}

button#searchlink svg path {
	fill: rgb(var(--lightpurple));
	transition: all 0.3s;
}

button#searchlink:hover {
	box-shadow: none !important;
	transform: none !important;
}

button#searchlink:hover svg path {
	fill: rgb(var(--white));
}

div#lang {
	padding-inline-end: 0.3rem;
}

div#lang a:hover {
	color: rgb(var(--white));
}


figure.headerpic {
  padding-block-start: 70px;
}

div#headerpicdiv {
  display: flex;
  height: 224px;
  width: 100vw;  
  background: rgb(var(--primary));
}

div#headerpicdiv:before {
  content: '';
  display: flex;
  background: rgb(var(--primary)) url('../img/logo-lightblue.svg');
  background-size: var(--patternsize);
  width: 100%;
  height: 100%;
}


main section.dark h2,
main section.dark h3,
main section.dark p {
  color: rgb(var(--white));
}

main section.intro {
  background: rgb(var(--primary));
  padding-block: var(--space);
}

main section.intro h1 {
  color: rgb(var(--white));
}


main section.portfolio {
  background: rgb(var(--secondary));
  padding-block: 0;
}

.pattern::before {
  content: '';
  background: url('../img/logo-white.svg');
  background-size: var(--patternsize);
  opacity: 0.5;
  width: 100vw;
  height: calc(var(--space) * 2);
  display: block;
  margin: 0 0 var(--space) var(--pagemargin-);
}

main section.portfolio > div {
  background: rgb(var(--white));
  margin-top: var(--space);
}

main section.portfolio > div > div {
  background: rgb(var(--white));
  color: rgb(var(--black));
  width: 100vw;
  margin-inline-start: calc( 0px - var(--pagemargin));
  padding: var(--pagemargin2) var(--pagemargin);
}

main section.portfolio > div > div  h3 {
  color: rgb(var(--primary));
}

main section.portfolio > div > div p {
  color: rgb(var(--text));
}



main section.vision {
  background: rgb(var(--primary));
  padding-block: var(--space) 0;
  display: flex;
  flex-direction: column;
}

main section.vision > div {
  padding-block-end: var(--space);
}

main section.vision figure {
  width: 100vw;
  margin-inline-start: calc(0px - var(--pagemargin));
}

section.cta {
  padding-block: var(--space);
}

section.claim {
  text-align: center;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  padding-block: var(--space);
  color: rgb(var(--white));
  background: rgb(var(--primary));
  font-size: var(--font-size-xl);
  line-height: 1em;
  margin-block-start: var(--space);
}






#container {
  background-color: rgb(var(--white));
  padding: 0 var(--pagemargin);
  /* overflow: hidden; */
}

#container::after {
    content: ".";
    display: block;
    clear: both;
  color: #fff;
}


section {
  padding: var(--pagemargin);
  margin: 0;
}

body.t-default section h2 {
  margin-block: calc(var(--space) / 2);
}




/* NAVI ================================ */

button#menu {
  width: 20px;
  height: 19px;
  margin-top: 2px;
  background: none;
  border: 0px;
	border-radius: 0;
  padding: 0;
  border-bottom: 3px solid rgb(var(--white));
  transition: all 0.3s;
}

body.menuopen button#menu {
  border-bottom: 3px solid rgb(var(--white),0);
}

button#menu:before,
button#menu:after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: rgb(var(--white));
  margin-block-end: 5px;
  transform-origin: center;
  transition: all 0.3s;  
}

body.menuopen button#menu:before {
  transform: rotate(45deg);
  margin-top: 7px;
}

body.menuopen button#menu:after {
  transform: rotate(-45deg);
  margin-top: -8px;
}


nav#hauptnavi {
  height: 100dvh;
  width: 100vw;
  display: flex;
  position: absolute;
  top: 70px;
  left: 100vw;
  transition: all 0.3s;
}

body.menuopen nav#hauptnavi {
  left: 0;
}


nav#hauptnavi ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: rgb(var(--black),0.8);
  list-style: none;
  margin: 0;
  padding: 0;
  box-shadow: 0px -4px rgba(0,0,0,0.07);
}

nav#hauptnavi ul li {
  width: 100%;
}

nav#hauptnavi ul li a {
  display: block;
  width: 100%;
  padding: 1em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  font-family: var(--font-head);
  font-size: var(--font-size-l);
  font-weight: var(--font-weight-bold);
  color: rgb(var(--lightpurple));
  background-color: rgb(var(--primary));
}

nav#hauptnavi ul > li > ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

nav#hauptnavi ul > li > ul li a {
  padding-inline: 1rem;
  color: rgb(var(--primary));
  background-color: rgb(var(--secondary));
  font-family: var(--font-text);
}

nav#hauptnavi ul > li:has(:hover) ul,
nav#hauptnavi ul > li:has(:focus-within) ul,
nav#hauptnavi ul > li > a[aria-current="page"] + ul {
  display: flex;
}

nav#hauptnavi ul li a[aria-current="page"],
nav#hauptnavi > ul > li:has(a[aria-current="page"]) > a {
  color: rgb(var(--white));
}  


/* HOME ================================ */


div#bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 20px;
  left: 0;
  z-index: -1;
  background-size: cover;
  background-position: center;
  background-color: rgb(var(--primary));
}

body.t-default div#bg {
  height: 100%;
}

#badge {
  position: absolute;
  right: 2em;
  top: 8em;
  background: rgb(var(--secondary));
  font-size: var(--font-size-m);
  color: rgb(var(--white));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 8.5em;
  height: 8.5em;
  border-radius: 10em;
  line-height: var(--line-height-head);
  justify-content: center;
  box-shadow: 4px 4px rgba(0,0,0,0.5);
  padding: 1rem;
  hyphens:none;
}

#badge strong,
#badge p {
  color: rgb(var(--white));
  line-height: var(--line-height-head);
  padding: 0;
}

#intro {
  background: rgb(var(--white));
  transform: translate(0,-1rem);
  padding-block-start: 3rem;
  border-bottom: 1px solid rgb(var(--secondary));
  position: relative;
}

#intro p {
  font-size: var(--font-size-l);
}

div#gopic {
  display: flex;
  flex-wrap: nowrap;
}

div#gopic img {
  width: 25%;
  height: auto;
}


/* PORTFOLIO ================================ */

body.t-service main section ul li::marker {
  content: "▶ ";   /* oder "▲", "▶", "▹" … */
  font-size: 1em;
  color: rgb(var(--secondary));
}

body.t-service main section h2 {
  margin-block-start: var(--space);
}




/* EXPERIENCE ================================ */

body.t-experience section.intro {
	padding-block: var(--pagemargin2);
	margin-block-end: var(--pagemargin2);
}


body.t-experience section.intro div.q1 svg,
body.t-experience section.intro div.q2 svg {
	width: 40px;
}

body.t-experience section.intro div.q2 {
	display: flex;
	gap: 1rem;
	align-items: center;
}

body.t-experience section.intro blockquote,
body.t-experience section.intro blockquote p{
	padding: 0;
	margin: 0;
	text-transform: uppercase;
	color: rgb(var(--lightpurple));
	font-size: var(--font-size-l);
	line-height: 1.2em;
}

body.t-experience section.intro div.citer p {
	font-size: var(--font-size-s);
	line-height: 1.3em;
	padding: 0;
}

body.t-experiences main section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.t-experiences main section ul li {
  padding: 0 0 var(--space) 0;
  border-bottom: 1px solid rgb(var(--lightblue));
  margin: 0 0  var(--space) 0;
}

body.t-experiences main section ul li img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

body.t-experiences main section ul li h4,
body.t-experience main section h2 {
  padding: var(--pagemargin) 0;
  text-transform: none;
  color: rgb(var(--lightblue));
}

body.t-experience main section h1 {
	hyphens: auto;
}




/**/

summary {
  position: relative;
  color: rgb(var(--primary));
  font-size: var(--font-size-l);
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
  border-top: 1px solid rgb(var(--lightblue));
  padding-block-start: 1rem;
}

summary,
details {
	width: 100%;
	max-width: 770px;
	margin: 0 auto;
}

details:last-of-type {
  border-bottom: 1px solid rgb(var(--lightblue));
	margin-block-end: var(--space);
}

summary p {
  color: rgb(var(--secondary));
  font-family: var(--font-head);
  width: auto;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary::marker {
	display: none; 
  content: "";               
  font-size: 0;              
  color: transparent;
}

 
summary::after {
	content: '+';
	display: flex;
	aspect-ratio: 1 / 1;
	height: 1.5em;
	border-radius: 2em;
	align-items: center;
	position: absolute;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	background: rgb(var(--secondary));
	color: rgb(var(--white));
	transition: transform 0.3s;
	transform: rotate(0deg);
	transform-origin: center;
	font-size: var(--font-size-l);
	font-weight: var(--font-weight-bold);
	justify-content: center;
}


details[open] summary::after {
  transform: rotate(45deg);
	background: rgb(var(--primary));
}

details p {
  padding-block-end: 1rem;
}

details[open] summary p {
  color: rgb(var(--primary));
}

details ul {
	padding: 0 0 0 1em;
}

details ul li::marker {
  content: "▶ ";   
  font-size: 1em;
  color: rgb(var(--secondary));
}


body section details summary p {
	width: auto;
	margin: 0;
	padding: 0;
  padding-block-end: 1rem;
}





/* Glossar =========================== */

ul#abc {
  display: flex;
  flex-wrap: nowrap;
  list-style: none;
  background: rgb(var(--secondary));
  padding: 0 var(--pagemargin);
  margin: 0;
  position: sticky;
  top: 70px;
  overflow-x: auto;
}

ul#abc li.no {
  display: none;
}

ul#abc li a {
  display: block;
  padding: var(--pagemargin);
  color: rgb(var(--white));
}


button#glossarysearchbutton {
	border: 1px solid rgb(var(--secondary));
	display: flex;
	gap: 1rem;
	line-height: 1em;
	align-content: center;
	align-items: center;
	font-family: var(--font-text);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing);
}

body.t-glossary main h2 {
  display: inline-block;
  background: rgb(var(--secondary));
  width: auto;
  padding: var(--pagemargin);
  margin: var(--space) 0 var(--pagemargin) var(--pagemargin);
	scroll-margin-top: 160px;
}

ul.glentries {
  list-style: none;
  padding: var(--pagemargin);
}

ul.glentries li {
	padding-block-end: var(--space);
}







/* FOOTER ================================ */

footer {
  padding: var(--space) var(--pagemargin) 0 var(--pagemargin);
  background: rgb(var(--lightpurple));
}

footer * {
  color: rgb(var(--primary));
  font-size: var(--font-size-s);
}

footer img {
  margin-block-end: 2em;
}

footer > div {
  margin-block-end: 1rem;
}

footer::after {
  content: '';
  background: url('../img/logo-purple.svg');
  background-size: var(--patternsize);
  opacity: 1;
  width: 100vw;
  height: calc(var(--space) * 1.5);
  display: block;
  margin: var(--space) 0 0 var(--pagemargin-);
}




.scrolltop-wrap {
	 box-sizing: border-box;
	 position: absolute;
	 z-index: 10;
	 top: 12rem;
	 right: 1rem;
	 bottom: 0;
	 pointer-events: none;
	 backface-visibility: hidden;
}
 .scrolltop-wrap #scrolltop-bg {
	 fill: rgb(var(--primary), 0.7);
}
 .scrolltop-wrap #scrolltop-arrow {
	 fill: white;
}
 .scrolltop-wrap a:hover #scrolltop-bg {
	 fill: rgb(var(--primary));
}
 .scrolltop-wrap a:hover #scrolltop-arrow {
	 fill: white;
}

 @supports (-moz-appearance: meterbar) {
	 clip: rect(0, 3rem, auto, 0);
}

 .scrolltop-wrap a {
	 position: fixed;
	 position: sticky;
	 top: -5rem;
	 width: 3rem;
	 height: 3rem;
	 margin-bottom: -5rem;
	 transform: translateY(100vh);
	 backface-visibility: hidden;
	 display: inline-block;
	 text-decoration: none;
	 user-select: none;
	 pointer-events: all;
	 outline: none;
	 overflow: hidden;
}
 .scrolltop-wrap a svg {
	 display: block;
	 border-radius: 50%;
	 width: 100%;
	 height: 100%;
}
 .scrolltop-wrap a svg path {
	 transition: all 0.1s;
}
 .scrolltop-wrap a #scrolltop-arrow {
	 transform: scale(0.66);
	 transform-origin: center;
}







div#searchbg {
	opacity: 0;
	transition: opacity 0.3s;
}

body.search div#searchbg {
	display: flex;
	position: fixed;
	z-index: 20000000;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(var(--primary),0.7);
	backdrop-filter: blur(10px);
	opacity: 1;
}

div#search {
	background: rgb(var(--white));
	border-radius: var(--border-radius);
	display: none;
	width: 100%;
	max-width: calc(100vw - (2 * var(--pagemargin)));
	padding: 0.9rem var(--pagemargin);
	box-shadow: 0 0 10px rgb(var(--black), 0.1);
	position: fixed;
	flex-direction: column;
}

body.search div#search {
	display: flex;
	z-index: 20000000;
	margin: 4rem var(--pagemargin);
	transition: all 0.5s;
}

div#search button#cancelbut {
	background: rgb(var(--secondary));
	color: rgb(var(--white));
	padding: 0 0.4em;
	margin: 0 0 0 auto;
	aspect-ratio: 1 / 1;
}
div#search div#searchui {
	display: flex;
	gap: 0.5rem;
	width: 100%;
	align-items: center;
}

div#search svg {
	height: 100%;
	min-width: 13px;
	display: inline-block;
	opacity: 0.8;
}

div#search div#searchui #delbut {
	display: none;
}

div#search div#searchui input {
	width: 100%;
	font-family: var(--font-text);
	font-size: var(--font-size-m);
	border: 0;
	padding: 0.5rem 0;
	background: transparent;
}

div#search div#searchui input:focus {
	outline: none;
}

div#search div#searchui #cancelbut {
	display: inline-block;
	white-space: nowrap;
	font-size: var(--font-size-s);
}

div#search div#searchui #cancelbut:hover {
	transform: scale(100%);
	box-shadow: none;
	background: rgb(var(--primary));
	color: rgb(var(--white));
}

div#search .search-item {
	border-bottom: 1px solid rgba(var(--black),0.2);
}

div#search .search-item a {
	display: block;
	padding-block: 1rem;
}

div#search div#live-search-results {
	max-height: 60vh;
	overflow-y: scroll;
	border-top: 1px solid rgba(var(--black),0.2);
}

div#search div#searchui input[type=submit] {
	width: auto;
	font-size: var(--font-size-s);
	text-decoration: none;
	display: inline-block;
	line-height: 1em;
	border-radius: 10em;
	background: rgba(var(--white),1);
	color: rgb(var(--primary));
	font-family: var(--font-head);
	padding: 0.5em 0em;
	margin-inline: auto;
	border: 0;
	transition: all 0.3s;
	cursor: pointer;
}

div#search div#searchui input[type=submit]:hover {
	box-shadow: 0 0 15px rgb(var(--black), 0.3) !important;
	transform: scale(105%);
	background: rgba(var(--primary),1);
	color: rgb(var(--white));	
}

#live-search-results ul {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

#live-search-results ul li a {
	display: block;
	margin: 0;
	padding: 0.7rem 0;
}

#live-search-results ul li a:hover {
	background: rgb(var(--primary), 0.1);
	padding-inline-start: 1rem;
	border-radius: var(--border-radius);
}



section.form form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	max-width: 770px;
	margin-inline: auto;
	font-size: var(--font-size-s);
}

section.form form input, 
section.form form textarea {
	width: 100%;
	border: 0;
	background: rgba(var(--lightpurple),0.2);
	font-size: var(--font-size-s);
	padding: 0.5em;
}

section.form form input[type=submit] {
	background: rgb(var(--secondary));
	color: #fff;
	border-radius: 10rem;
	width: min-content;
	padding-inline: 1rem;
	margin-block-start: 1rem;
	display: inline-block;
}

section.form form input[type=checkbox] {
	display: inline;
	width: min-content;
	margin: 0 0.5rem 0 0;
	padding: 0;
}

section.form form label {
	color: rgb(var(--secondary));
	padding-block-start: 1em;
}

.uniform__potty {
    position: absolute;
    left: -9999px;
}

.uniform-errors {
	color: red;
}


/* ======================================== */
/* DESKTOP ================================ */

@media only screen and (min-width: 770px) {

  header {
	  display: flex;
	  height: 220px;
	  justify-content: space-between;
	  align-items: stretch;
	  flex-wrap: wrap;
	  padding-block-end: 0;
	  transition: all 0.3s;
	 }  

  header img.logo {
    height: 50px;
	  transition: all 0.3s;
  }

  body.scrolled header {
	  padding-block-start: var(--pagemargin);
	  height: 110px;
	 }  

  body.scrolled header img.logo {
    height: 25px;
  }
  	

  figure.headerpic {
    padding-block-start: 220px;
    max-height: 70vh;
    overflow: hidden;
	display: flex;
	align-items: center;  
  }  

  div#headerpicdiv {
    height: 500px;
  }  

  div#headerpicdiv:before {
    background-size: var(--patternsize);
  }  

	a.button:hover,
		section.cta a:hover {
		transform-origin: center;
		transform: scale(110%);
		font-weight: var(--font-weight-bold);
		box-shadow: 0px 4px 14px rgba(0,0,0,0.1);
		color: rgb(var(--white));
		background: rgb(var(--primary));
	}	
  
  a.button.primary:hover {
    transform: translateX(-50%) scale(110%);
    font-weight: var(--font-weight-bold);
    box-shadow: 0px 4px 14px rgba(0,0,0,0.1);
  }
  
  a.button.secondary:hover {
    font-weight: var(--font-weight-bold);
    box-shadow: 0px 4px 14px rgba(0,0,0,0.1);
    padding-inline: 1em;
  }

	button.centered:hover,
	a.button.centered:hover {
		transform: translateX(-50%) scale(110%);
	}	

  a {
    transition: all 0.3s;
  }
  
  a:hover {
    color: rgb(var(--secondary));  
  }


  .pattern::before {
    background-size: var(--patternsize);
  }






  main section.portfolio > div {
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    margin-inline-start: calc( 0px - var(--pagemargin));
    background: none;
  }
  
  main section.portfolio > div > div {
    width: 50vw;
    padding: var(--pagemargin2) var(--pagemargin);
    transition: all 0.3s;
    margin: 0;
  }  

    main section.portfolio > div > div:hover {
      background: rgb(var(--white),0.8);
    }

    main section.portfolio > div > div > span {
      max-width: 500px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-content: flex-start;
      flex-wrap: wrap;
      align-items: flex-start;
    }

  main section.portfolio > div > div > span h3 {
    margin-inline: 0;
  }


main section.vision {
  flex-direction: row;
  padding: 0;
  align-items: center;
}

  main section.vision figure {
  margin: 0;
}
    main section.vision > div {
  padding: var(--pagemargin);
}
  
  main section.vision * {
  flex: 0 0 50%;
}



  
  /* NAVI ================================ */
  
  button#menu {
    display: none;
  }


  nav#hauptnavi {
    height: auto;
    width: 100%;
    display: flex;
    position: relative;
    top: auto;
    left: auto;
    flex-basis: 100%;
  }
  
  nav#hauptnavi ul {
    display: flex;
    flex-direction: row;
    width: auto;
    position: relative;
    margin: 0;
    padding: 0;
    box-shadow: none;
    justify-content: space-evenly;
    align-items: center;
    gap: 2rem;
    background: none;
  }

	nav#hauptnavi ul li {
	    height: 100%;
	}
  
  
  nav#hauptnavi ul li a {
	display: flex;
	  align-items: center;
	height: 100%;
	padding: 0em;
	margin: 0;
	font-size: var(--font-size-m);
	transition: all 0.3s;
	hyphens: none;
	white-space: nowrap;
  }
    
  nav#hauptnavi ul li a:hover,
  nav#hauptnavi ul li a[aria-current="page"],
  nav#hauptnavi ul li:has(a[aria-current="page"]) > a {
    color: rgb(var(--white));
  }  
  
  nav#hauptnavi ul > li > ul {
    width: 100vw;
    position: absolute;
    left: var(--pagemargin-);
    bottom: auto;
    z-index: 100;
    background: rgb(var(--secondary),0.9);
    list-style: none;
    padding: 0.5em 0;
    margin-block-start: 0px;
  }

  nav#hauptnavi ul > li > ul li {
    width: auto;
  }  
  
	nav#hauptnavi ul > li:has(:hover) ul,
	nav#hauptnavi ul > li:has(:focus-within) ul,
	nav#hauptnavi ul > li > a[aria-current="page"] + ul,
	nav#hauptnavi ul > li:hover > ul,
	nav#hauptnavi ul li ul:has(a[aria-current="page"]) {
		display: flex;
		justify-content: flex-start;
		  padding-inline-start: var(--pagemargin);
	  }

	
  
  nav#hauptnavi ul > li > ul > li > a {
    font-weight: var(--font-weight-normal);
    padding: 0;
    border: 0;
	  background: none;
  }
  
  
  
  
  #badge {
  right: 2em;
  top: 12em;
  }
  
  
  #news .swiper-slide {
  width: 40%;
  }

/* ABOUT =========================== */	

	section.founder {
		display: flex;
		gap: var(--pagemargin);
	}

  /* EXPERIENCE ================================ */


	.cite {
		max-width: 770px;
		margin: 0 auto;
	}
	
  body.t-experiences main section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    max-width: 100%;
  }
  
  body.t-experiences main section ul li {
    width: auto;
    padding: 0 0 var(--space) 0;
    border-bottom: 1px solid rgb(var(--lightblue));
    margin: 0 0  var(--space) 0;
  }
   
  
  /* Glossar =========================== */

  ul#abc {
    padding: 0 var(--pagemargin);
	  position: sticky;
	  top: 110px;
  }
  
  ul#abc li.no {
    display: block;
    padding: 0.5rem;
    opacity: 0.3;
  }
  
  ul#abc li a {
    padding: 0.5rem;
  }
  
  body.t-glossary main h2 {
    display: inline-block;
    background: rgb(var(--secondary));
    width: auto;
    padding: var(--pagemargin);
    margin: var(--space) 0 var(--pagemargin) var(--pagemargin);
  }
  
  ul.glentries {
    display: flex;
    flex-wrap: wrap;
    padding: var(--pagemargin);
    gap: var(--pagemargin2);
  }

  ul.glentries li {
    width: 30%;
    padding-block-end: var(--pagemargin2);
  }

  ul.glentries li p {
	font-size: var(--font-size-s);
  }	

  
  
  
  
  span.head {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  }
  
  span.head * {
    width: 50%;
    flex-grow: 1;
  }



	
  summary p,
  summary::after {
    transition: all 0.3s;
  }
  
  summary:hover {
    color: rgb(var(--primary));
    cursor: pointer;
  }

  summary:hover p {
    color: rgb(var(--primary));
  }	

  summary:hover::after {
    background: rgb(var(--primary));
  }		



	
  body.t-default section {
    margin-inline: auto;
  }
  
  body section p,
  body section ul,
  h1,
  h2,
  h3 {
    max-width: min(70ch, 770px);
    margin-inline: auto;
  }
  
  figure img {
    width: 100%;
    height: auto;
  }

  section.text figure img {
    width: auto;
    height: auto;
  }

  body main.nopic {
    padding-block-start: calc(7dvh + 160px);  
  }

  

/* FOOTER ================================ */

  footer {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    padding-block-end: calc(var(--space) * 3);
    position: relative;
    justify-content: space-between;
  }
  
  footer img.logo {
    height: 50px;
    margin-block-end: 1rem;
    display: inline-block;
  }

  footer::after {
    position: absolute;
    bottom: 0;
    display: block;
    background-size: var(--patternsize);
    width: 100vw;
    height: calc(var(--space) * 2);
    margin: var(--space) 0 0 var(--pagemargin-);
    flex-basis: 200%;
  }

	div#search div#searchui input[type=submit] {
		padding: 0.5em 0.5em;
		transition: all 0.3s;
		cursor: pointer;
	}
   
}