@import "font.css";

:root {
	--font-sans: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Verdana,sans-serif,Apple Color Emoji,Segoe UI Emoji;
  --font-serif: "Spectral", Georgia, "Noto Serif", Times, "Times New Roman",serif;
	
	--font-size-100: 0.625rem;  /*--  10px --*/
	--font-size-200: 0.875rem;  /*--  14px --*/
	--font-size-300: 1rem;      /*--  16px --*/
	--font-size-400: 1.125rem;  /*--  18px --*/
	--font-size-500: 1.25rem;   /*--  20px --*/
	--font-size-600: 1.5rem;    /*--  24px --*/
	--font-size-700: 2.25rem;   /*--  36px --*/
	--font-size-800: 3.375rem;  /*--  54px --*/
	--font-size-900: 5rem;      /*--  81px --*/
	
	--space-100:  0.1875em; /*--3px--*/
	--space-200:  0.308em;  /*--5px--*/
	--space-300:  0.5em;    /*--8px--*/
	--space-400:  0.624em;  /*--10px--*/
	--space-500:  0.875em;  /*--14px--*/
	--space-600:  1em;      /*--16px--*/
	--space-700:  1.125em;  /*--18px--*/
	--space-800:  1.25em;   /*--20px--*/
	--space-900:  1.5em;    /*--24px--*/
	--space-1000: 2.25em;   /*--36px--*/
	
	--black: hsl(210, 17%, 5%);
	--black-light: hsl(210, 17%, 15%);
	--gray: hsl(210, 17%, 93%);
	--graywhite: hsl(210, 17%, 95%);
	--white: #fff;
	--green: hsl(106, 71%, 37%);
	--purple: hsl(278.5, 100%, 46.5%);
}

/*============ Base ============================================*/

*, ::before, ::after { 
	box-sizing: border-box; 
  margin: 0;
	padding: 0;
}

html {
	font-size: 100%;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
	font-family: var(--font-serif);
	font-variant-numeric: oldstyle-nums;
  background-color: #fff;
	background-image: url("noise.svg");
	color: var(--black);
}

[hidden] { display: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

hr {
  border-style: solid;
  border-width: 2px 0 0;
  color: silver;
  height: 0;
  overflow: visible;
	margin: 1.5em auto;
	max-width: 120ch;
}

pre { white-space: pre-wrap; }

[type='checkbox'],
[type='radio'] {
  box-sizing: border-box;
  padding: 0;
}

ol, ul { 
	list-style-type: none; 
}

li { 
	padding: 0.1875em 0; 
}

ul li a {
	display: inline-block; 
}

a {
	color: var(--black);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px; 
}

a:hover { text-decoration: none; }
	

/*_______________Base Typography_______________________________________*/

h1 { 
	font-size: var(--font-size-700);
	line-height: 1.2; 
}

h2 { 
	font-size: var(--font-size-600); 
}

h3 { 
	font-size: var(--font-size-500); 
}

h4 { 
	font-size: var(--font-size-400); 
}

p, li, pre, span, a { 
	font-size: var(--font-size-500); 
}

.fine p, .fine li, .fine pre, .fine span, .fine a {
	font-size: var(--font-size-400);
}

.fine h2 {
	font-size: var(--font-size-500);
}

.fine h3 {
	font-size: var(--font-size-400);
}

.fine h4 {
	font-size: var(--font-size-300);
}

pre {
	font-family: inherit;
}

/*__________________________________________________________________*/
/*==================================================================*/


/*=========== Site Layout =========================================*/

.wrapper {
	margin: 0 auto;
	padding: 2.25rem 8vw;
	background: ;
}

header {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

header h1 {
font-size: clamp(1.563rem, 1.155rem + 1.739vi, 1.938rem); /*(Große Terz: 25px, 31px)*/	
font-weight: 500;
}

header a {
	font-size: var(--font-size-400);
}

main {
	margin-top: 25vh;
	background: ;
	margin-bottom: 1.5em;
}


/*______________Navigation___________________________________*/

nav {
	margin-bottom: 1.5em;
}

nav, nav ul {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

/*___________________________________________________________*/

/*_______________Footer______________________________________*/

footer {
	margin-top: 5em;
}

footer nav {
	margin: 2em 0;
	justify-content: flex-end;
}

footer a {
	font-family: var(--font-sans);
	font-size: var(--font-size-300);
	font-weight: 600;
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

@media only screen and (min-width: 550px) {
	footer ul {   
		flex-direction: row;
	}
} 

/*______________________________________________________________*/

/*==============================================================*/



/*=============== Story Layout =================================*/

article {
	max-width: 90ch;
	margin: 0 auto;
	padding-bottom: 8rem;
}

.story h2 {
	margin-bottom: 2.25rem;
}

.story-head {
	display: flex;
	flex-direction: column;
}

.story-head span {
	font-size: clamp(1.25rem, 0.91rem + 1.449vi, 1.563rem); /*(Große Terz: 20px, 25px)*/
	font-style: italic;
	font-weight: 400;
	margin-bottom: 1rem;
}

.story-head strong {
  font-size: clamp(2.438rem, 0.943rem + 6.377vi, 3.813rem); /*(Große Terz: 39px, 61px)*/
	line-height: 1;
	font-weight: 500;
	margin-bottom: 2.25rem;
}

/*.drop-letter::first-letter {
	-webkit-initial-letter: 2;
	initial-letter: 2;
	}*/

.story p {
  font-size: clamp(1.25rem, 0.91rem + 1.449vi, 1.563rem); /*(Große Terz: 20px, 25px)*/
  text-indent: 1rem;
	line-height: 1.5;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
	text-align: left;
}

.story p:first-of-type, 
p.indent-no {
	text-indent: 0;
}

p.indent-no {
	margin-top: 1.25rem;
}

pre {
	margin: 1rem 0 1rem 1.25rem;
}

.letter {
	font-style: italic;
}

/*==============================================================*/



/*=============== Archive Layout ===============================*/
.archive {
	max-width: 90ch;
	margin: 0 auto;
}

.archive nav {
	margin: 3rem 0;
	justify-content: flex-end;
	flex-wrap: wrap;
	
}

.archive nav * {
	font-size: var(--font-size-400);
}

.archive-nav a {
	text-decoration: none;
}

.archive-nav a:hover {
	text-decoration: none;
	color: gray;
}

.archive .author {
	font-style: italic;
	font-weight: 300;
}

.archive .new {
	background: red;
	color: ;
	padding: 0rem 0.3rem;
	border-radius: 2px;
	margin-left: 0.2rem;
}

.archive-list {
	list-style-type: none;
} 

.archive-list section {
	margin-bottom: 2rem;
}

.archive-list section a {
}

.archive-list li {
	display: flex;
	flex-wrap: wrap;
}
	
.archive-list a {
	text-decoration: underline;
	padding-right: 0.5rem;
}

.archive a:hover {
	text-decoration: none;
}

.current {
	text-decoration: underline;
	font-weight: 700;
	text-underline-offset: 3px; 
}

/*==================================================================*/



/*====================== Newsletter ================================*/

.newsletter {
	max-width: 70ch;
	margin: 0 auto;
	margin-bottom: 10rem;
	background: ;
}

/*===============================================================*/



/*====================== Imprint ================================*/

.imprint {
	margin: 0;
	margin-top: 3.375rem;
	max-width: 88ch;
}

.imprint h2, .imprint h3 {
	font-family: var(--font-sans);
}

.imprint h2 {
	margin-bottom: 1rem;
}

.imprint section {
	margin-bottom: 1.5rem;
}

.imprint h3 {
	margin-top: 1rem;
}

.imprint p {
 /* hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;*/
	line-height: 1.4;
} 
/*==============================================================*/

/*====================== Datenschutz ===========================*/
.datenschutz {
	margin: 0;
	margin-top: 3.375rem;
	max-width: 90ch;
}

.datenschutz h2, .datenschutz h3, .datenschutz h4 {
	font-family: var(--font-sans);
}

.datenschutz h3 {
	/*color: var(--purple);*/
	margin-top: 3.375rem;
	margin-bottom: 0.5rem;
}

.datenschutz h4 {
	line-height: 1.4;
	margin-top: 1rem;
}

.datenschutz p {
	margin-bottom: 1rem;
	line-height: 1.4;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.datenschutz ul {
	list-style-type: disc;
	margin-bottom: 1rem;
	padding-left: 1.25rem;
}

.datenschutz li {
	line-height: 1.4;
}

.toc-ds ul {
	list-style-type: circle;
}

.toc-ds ul li a {
	font-family: inherit;
	font-weight: ;
	text-decoration-thickness: 1px;
}

#Rechte strong {
	font-family: var(--font-sans);
  font-size: var(--font-size-300);
}

/*=============================================================*/

/*========================= 404 ===============================*/
.lost {
	max-width: 88ch;
}

.lost h2 {
	font-size: var(--font-size-700);
}

.lost p {
	margin: 1rem 0;
	line-height: 1.4;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.flex {
	display: flex;
	height: 95vh;
	flex-direction: column;
	justify-content: space-between;
} 
/*=============================================================*/