@charset "UTF-8";

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

@import url('reset.css');

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

:root {
    --tanne: 0, 85, 56;
    --digi: 0, 250, 165;
    --femi: 242, 199, 255;
    --darkfemi: 45, 0, 100;
    --bg: 218, 238, 231;
  
    --primary: var(--tanne);
    --secondary: var(--digi);
    
    --text: 10, 10, 10;
    --white: 255, 255, 255;
    --black: 0, 0, 0;
    
    --font-text: "Switzer-Regular", system-ui, sans-serif;
    --font-text-bold: "Switzer-Bold", system-ui, sans-serif;
    --font-head: "JetBrainsMono", ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

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

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

    --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: 1.3rem;
}



@media only screen and (min-width: 700px) {
  :root {  
      --font-size-s: 0.85rem;
      --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: 'JetBrainsMono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Switzer-Regular';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Switzer-Regular.woff2') format('woff2'),
       url('../fonts/Switzer-Regular.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Switzer-Bold';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Switzer-Bold.woff2') format('woff2'),
       url('../fonts/Switzer-Bold.woff') format('woff');
}





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

  
@view-transition {
  navigation: auto;
}

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


html {
  font-size: 16px;
  padding: 0;
  margin: 0;
}

body {
  padding: 0;
  margin: 0;
  background: rgb(var(--primary));
}


* {
  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-text-bold);
  font-weight: var(--font-weight-bold);
}

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: lowercase;
}

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));
	padding-block-start: 1rem;
}

h3 {
  font-size: var(--font-size-m);
  color: rgb(var(--primary));
	font-family: var(--font-text-bold);
	font-weight: var(--font-weight-bold);
	text-transform: none;
}

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;
}








.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;
}









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

a.button {
  text-transform: lowercase;
  text-decoration: none;
  display: inline-block;
  line-height: 1em;
  border-radius: 10em;
  border: 1px solid rgba(var(--primary),1);
  color: rgba(var(--primary),1);
  padding: 0.5em 1em;
  font-family: var(--font-head);
  margin-inline-end: 0.5rem;
}

video {
  max-width: 100%;
}








header {
  background: rgb(var(--white));
  padding: var(--pagemargin);
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 70px;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

body.home header {
  height: 135px;
}

header div {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
}

header div a,
header div a span {
  font-family: var(--font-head);
  font-size: var(--font-size-xl);
  white-space: nowrap;
  line-height: 1em;
  text-transform: lowercase;
  text-decoration: none;
  color: rgb(var(--text));
  hyphens: none;
}

body.home header div a,
body.home header div a span {
  font-size: 2.5rem;
}

body:not(.home) header div a span {
  display: inline-block;
  margin-inline-end: 0.25em;
}

header div span {
  display: flex;
  flex-direction: column;
  align-content: flex-end;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
}

header div span svg {
  height: 35px;
  width: auto;
}

header div span p {
  font-size: var(--font-size-s);
  line-height: var(--line-height-head);
  padding: 10px 0 0 0;
}

body:not(.home) header div span p {
  display: none;
}




body main {
  border-top: 50px solid rgb(var(--primary));
}

body.home main {
  border-top: 110px solid rgb(var(--primary));
}

body.default main {
  border-top: 1px solid rgb(var(--primary));
}





figure.headerpic {
  width: 100%;
  aspect-ratio: 3 / 2;  
  overflow: hidden;
  padding: 0;
  margin: 60px 0 0 0;
  position: relative;
}

body.home figure.headerpic {
  margin: 0;
}

figure.headerpic img {
  width: 100%;
  position: fixed;
  object-fit: cover;
  z-index: -2;
}



section {
  padding: var(--pagemargin);
  background: rgb(var(--bg));
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

section p {
  text-indent: 1.5em;
}

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

section figure {
	width: 100vw;
	margin: var(--pagemargin) 0 0 var(--pagemargin-);
	padding-block-end: var(--pagemargin);
}

section figure figcaption {
	padding: var(--pagemargin);
	color: rgb(var(--primary));
}

section ul {
	padding: 0 0 0 1rem;
}

section ul li {
	padding: 0 0 1rem 0;
}

/* Navi ======================================== */


nav ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  position: fixed;
  bottom: 0;
  left: 0;
}

nav ul li a {
  display: block;
  width: 100%;
  padding: var(--pagemargin);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  text-transform: lowercase;
  font-family: var(--font-head);
  font-size: var(--font-size-xl);
  text-decoration: none;
}

nav ul li:first-child a {
  background: rgb(var(--secondary));
  color: rgb(var(--primary));
  border-bottom: 20px solid rgb(var(--secondary));
}

nav ul li:nth-child(2) a {
  background: rgb(var(--femi));
  color: rgb(var(--darkfemi));
  margin-top: -20px;
}





.gallery {
  margin-block-start: -1rem;
  position: relative;
  z-index: -1;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.gallery img.half {
  width: 50%;
}


/* Digitalisierung ======================================== */

body.digi nav ul li:first-child a {
  display: none;
}

h1.tab {
  display: block;
  width: 100%;
  padding: var(--pagemargin);
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  text-transform: lowercase;
  font-family: var(--font-head);
  font-size: var(--font-size-xl);  
  position: fixed;
  z-index: 9;
}

body.digi h1.tab {
  background: rgb(var(--secondary));
  color: rgb(var(--primary));
  border-top: 20px solid rgb(var(--secondary));
}


/* Feminismus ======================================== */

body.femi nav ul li:first-child a {
  border: none;
}

body.femi nav ul li:nth-child(2) a {
  display: none;
}

body.femi h1.tab {
  background: rgb(var(--femi));
  color: rgb(var(--darkfemi));
  border-top: 20px solid rgb(var(--femi));
}



/* RSS ======================================== */

section.rss {
  padding-block-start: 2rem;
  margin-block-start: 1rem;
	border-radius: var(--border-radius);
  /* position: relative; */
  /* z-index: -1; */
  /* border-top: 11px solid rgb(var(--secondary)); */
}

section.rss ul {
  list-style: none;
  padding: 0;
}

section.rss ul li a {
  display: block;
  border-radius: var(--border-radius);
  padding: var(--pagemargin);
  margin-block-end: var(--pagemargin);
  background: rgb(var(--white));
  color: rgb(var(--primary));
  text-decoration: none;
  text-indent: 0;
}

section.rss ul li a h3 {
  text-decoration: underline;
  text-decoration-color: rgb(var(--secondary));
	font-family: var(--font-head);
	text-transform: lowercase;
	font-size: var(--font-size-l);
}

body.femi section.rss ul li a h3 {
  text-decoration-color: rgb(var(--femi));
}

section.rss ul li a p {
  text-indent: 0;
}






footer {
  padding: var(--pagemargin2) var(--pagemargin) 14rem var(--pagemargin);
  /*border-bottom: 14rem solid rgb(var(--femi));*/
  background: rgb(var(--primary));
  color: rgb(var(--white));
  margin-block-start: -1rem;
  z-index: -2;
  position: relative;
}

footer span.logo {
  display: block;
  font-family: var(--font-head);
  font-size: var(--font-size-l);
}

footer > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block: 2rem;
}

footer > div > span.social {
  display: flex;
  gap: 1rem;
}





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

	header {
	  padding: var(--pagemargin);
	  height: 120px;
	}
	
	header div {
	  justify-content: space-between;
	}

	header div h1 {
		padding: 0;
	}
		
	body.home header div a,
	body.home header div a span {
	  font-size: 3.5rem;
		display: inline-block;
	}
	
	body header div a span {
	  margin-inline-end: 0.25em;
	}
	
	header div span {
	  display: flex;
	  flex-direction: row-reverse;
	  align-items: flex-start;
	  gap: 1rem;
	  flex-wrap: nowrap;
	}
	
	header div span svg {
	  height: 45px;
	}
	
	header div span p {
	  padding: 0px 0 0 0;
	}




	
	body main {
	  border-top: 100px solid rgb(var(--primary));
	}


	
	

	nav ul li a {
	  padding: 1rem var(--pagemargin);
	}

	h1.tab {
	  padding: 1rem var(--pagemargin);
	}	

}