/*
	Theme Name: ohnedenhype.com 8.1
	Version: 8.1
	
	Farben:
	#fff Weiß
	#171619 Schwarz
*/





/* ! 1. IMPORTS */ 

/* ! 1. RESET (v2.5.4) */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, 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, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section, summary, time, mark, audio, video {
	font-size: 100%;
	font: inherit;
	padding: 0;
	margin: 0;
	list-style: none;
	vertical-align: baseline }

main { display: block }

a, a:hover,
.button,
.button__menu {
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-webkit-transition: all 0.3s linear;
	transition: all .3s linear }



img, embed, object, .wp-caption {
	max-width: 100% !important;
	height: auto }

audio { width: 100% }

iframe { max-width: 100% }

button, input, select, textarea { margin: 0 }

::-moz-selection { background: #ffff91 }
::selection { background: #ffff91 }

* { overflow: visible }





/* ! 2. ADJUSTMENTS ➜ hacks */

html { scroll-behavior: smooth }

img {
	display: block;
	border: 1px solid # }

a img { border: none }

.kill { display: none }


@media
(min-width: 600px) {
	.kill { display: inline }
}/**/





/* ! 2. ADJUSTMENTS ➜ text sizes */

body {
	font-size: 12px;
	line-height: 1.2em }

#page_footer,
figcaption,
.latest .buttons,
.meta {
	font-size: .8em;
	line-height: 1.4em }

#page_header nav {
	font-size: .8em;
	line-height: 1em }

h1 {
	font-size: 1.33em;
	line-height: 1.2em }





/* ! 3. ADJUSTMENTS ➜ text styling */

body {
	font-family: "neue-haas-grotesk-text", sans-serif;
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-text-size-adjust: 100% }

strong,
b  { font-weight: 700 }

h1,
h2,
.section_heading,
#logo,
.all_eps article .guest { font-weight: 900 }

em,
i { font-style: italic }

.light { opacity: .5 }





/* ! 4. LAYOUT */

body { text-align: center }

#page_main > * { text-align: left }

.outer {
	margin: auto;
	max-width: 500px }

.inner {
	margin-left: 10px;
	margin-right: 10px }

.section_heading p { }

/* vertical */

#page_header .inner { margin-top: 20px }

.latest .info h1 {
	margin-top: 15px;
	margin-bottom: 20px }

.latest .buttons {
	margin-top: 20px;
	margin-bottom: 15px }

.section_heading {
	margin-top: 2rem;
	margin-bottom: 1rem }

#page_footer {
	margin-top: 3rem;
	margin-bottom: 3rem }

#page_footer > div { padding-top: 3rem }

.latest .info h2,
.episodenliste article { margin-bottom: 1rem }

.all_eps article + article { margin-top: 1rem }





/* ! ELEMENT ➜ img / figure */

img {  }






/* ! ELEMENT ➜ a (links) */

a,
a:active,
a:visited,
a:hover {
	display: inline-block;
	text-decoration: underline;
	color: inherit }

a:hover {  }

a[href^="tel:"] {
	color: inherit;
	text-decoration: none }

h1 a:hover { color: inherit }





/* ! ELEMENT ➜ buttons / icons */

.button,
.icon {
	text-decoration: none;
	display: inline-block }

.icon {
	text-indent: 1.3em;
	background-size: auto 1em;
	background-repeat: no-repeat;
	background-position: 0 50% }

.icon.only {
	width: 1em;
	text-indent: -9999em }

.button {
	padding: 12px 10px 12px 10px;
	border: 1px solid #171619;
	border-radius: 10px;
	line-height: 1em;
	color: black;
	background-color: white }

.button.icon {
	text-indent: 19px;
	text-align: left;
	background-size: auto 1.4em;
	background-repeat: no-repeat;
	background-position: 10px }

.button:hover {
	color: #1D1D1D;
	background-color: #f2f2f2;
	text-decoration: none }

.button.dark,
#full_nav .button.dark {
	color: #fff;
	background-color: #171619 }

.button.dark:hover {
	color: #fff;
	background-color: #555555 }



.icon.headphones { background-image: url('_assets/icons/headphones-black.svg') }
.icon.white.headphones { background-image: url('_assets/icons/headphones-white.svg') }

.icon.substack { background-image: url('_assets/icons/substack-black.svg') }
.icon.white.substack { background-image: url('_assets/icons/substack-white.svg') }

.icon.email { background-image: url('_assets/icons/email-black.svg') }
.icon.white.email { background-image: url('_assets/icons/email-white.svg') }

.icon.heart { background-image: url('_assets/icons/heart-black.svg') }
.icon.white.heart { background-image: url('_assets/icons/heart-white.svg') }

.icon.patreon { background-image: url('_assets/icons/patreon-black.svg') }
.icon.white.patreon { background-image: url('_assets/icons/patreon-white.svg') }

.icon.spotify { background-image: url('_assets/icons/spotify-black.svg') }
.icon.white.spotify { background-image: url('_assets/icons/spotify-white.svg') }
.icon.color.spotify { background-image: url('_assets/icons/spotify-green.svg') }

.icon.youtube { background-image: url('_assets/icons/youtube-black.svg') }
.icon.white.youtube { background-image: url('_assets/icons/youtube-white.svg') }
.icon.color.youtube { background-image: url('_assets/icons/youtube-color.svg') }

.icon.apple { background-image: url('_assets/icons/applepodcasts-black.svg') }
.icon.white.apple { background-image: url('_assets/icons/applepodcasts-white.svg') }
.icon.color.apple { background-image: url('_assets/icons/applepodcasts-color.svg') }

.icon.close { background-image: url('_assets/icons/close-black.svg') }
.icon.white.close { background-image: url('_assets/icons/close-white.svg') }

.icon.more { background-image: url('_assets/icons/more-black.svg') }

.icon.info { background-image: url('_assets/icons/info-black.svg') }

.icon.instagram { background-image: url('_assets/icons/instagram-black.svg') }





/* ! 6. BLOCK ➜ body */

body {
	overflow-x: hidden;
	overflow-y: scroll;
	color: #1D1D1D;
	background: #ffffff }





/* ! 6. BLOCK ➜ format */

.format h1 { margin-bottom: 1em }
.format h2 { margin-bottom: 1em }
.format * + h2 { padding-top: .5em }
.format p + *,
.format ul + *,
.format ol + * { margin-top: .75em }
.format li + li { margin-top: .25em }

.format ul,
.format ol { padding-left: 1em }

.format ul li { list-style: disc }
.format ol li { list-style: decimal }





/* ! 6. BLOCK ➜ page_header */

#page_header.outer { max-width: 375px }

#page_header a { text-decoration: none }

#page_header #logo {
	width: 150px;
	margin: auto;
	margin-bottom: 20px }

#page_header section {
	display: flex;
	justify-content: space-between }

#page_header #cover {
	width: 75px;
	margin-right: 5px }

#page_header #cover img { border-radius: 10px }

#page_header nav {
	width: 260px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap }

#page_header nav a { width: 63px }

#page_header nav a.icon {
	padding: 12px 10px 12px 10px;
	border: 1px solid #171619;
	border-radius: 10px;
	text-indent: 19px;
	text-align: left;
	line-height: 1em;
	background-size: auto 1.4em;
	background-repeat: no-repeat;
	background-position: 10px }





/* ! 6. NAV ➜ #page_nav  */

#page_nav { }





/* ! 6. BLOCK ➜ page_main */

#page_main { }





/* ! 6. BLOCK ➜ page_footer */

#page_footer {
	border-top: 1px solid #707070;
	text-align: center }




/* ! 6. BLOCK ➜ section */

section .inner {
	padding: 10px;
	border-radius: 10px;
	background-color: #F0F0F0 }

.section_heading p {
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 3px }




/* ! 6. BLOCK ➜ teaser */

.teaser {}




/* ! 6. BLOCK ➜ highlights */

.highlights .intro { margin-bottom: 1rem }

.highlights ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between }

.highlights li {
	width: 31%;
	margin-bottom: 3% }

.highlights li:nth-child(n+7) { display: none }

.highlights li a {
	display: block;
	width: 100%;
	padding-bottom: 100%;
	border-radius: .6rem;
	background-size: cover;
	background-position: center center }


@media
(min-width: 800px) {	
	.highlights .intro {
		display: inline-block;
		width: 310px }

	.highlights ul {
		float: right;
		width: calc(100% - 310px - 3rem) }

	.highlights li {
		width: 19%;
		margin-bottom: 0 }
	
	.highlights li:nth-child(n+6) { display: none }
}/**/




/* ! 6. BLOCK ➜ episodenliste / neu */

.episodenliste article {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	border-radius: .75em;
	padding: 1rem;
	background-color: #E8E8E8 }

.episodenliste a.cover {
	line-height: 0;
	display: block;
	width: 100px;
	padding-bottom: 100px;
	margin-bottom: 0;
	border-radius: .6rem;
	background-size: cover;
	background-position: center center }

.episodenliste .info { width: calc(100% - 100px - 1rem) }

.episodenliste .info a { text-decoration: none }

.episodenliste .info .buttons { margin-top: .75em }

.episodenliste .info .buttons a { margin-right: .5em }


@media
(min-width: 700px) {
	.episodenliste {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start }

	.episodenliste article { width: calc(50% - 2.5rem) }
	
	.episodenliste a.cover {
		width: 120px;
		padding-bottom: 120px }
	
	.episodenliste .info { width: calc(100% - 120px - 1rem) }
}/**/




/* ! 6. BLOCK ➜ all_eps */

.all_eps article {
	border-radius: .75em;
	padding: 1rem;
	background-color: #E8E8E8 }

.all_eps article:first-child { display: none }

.all_eps a { text-decoration: none }

.all_eps article > div + div { margin-top: .25rem }

.all_eps article .guest { text-transform: uppercase }

.all_eps article .date { display: none }

.all_eps .buttons a + a { margin-left: .25rem }


@media
(min-width: 700px) {
	.all_eps article {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start }
	
	.all_eps article .number { width: 75px }
	.all_eps article .guest { width: 250px }
	.all_eps article .headline { width: calc(100% - 550px) }
	.all_eps article .buttons { width: 100px }
	.all_eps article .date { width: 75px }

	.all_eps article > div + div { margin-top: 0 }
	
	.all_eps article .date { display: block }
}/**/




/* ! 6. BLOCK ➜ latest */

.latest article { }

.latest .info { }

.latest .info h1,
.latest .buttons { text-align: center }

.latest .info h1 a { text-decoration: none }

.youtube_cover img { border-radius: 10px }




/* ! 6. BLOCK ➜ hyperlinks */

.hyperlinks figure img { margin-bottom: 1rem }

.hyperlinks figure img { border-radius: .6rem }


@media
(min-width: 700px) {
	.hyperlinks {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: flex-start }
	
	.hyperlinks figure { width: calc(40% - 2rem) }
	
	.hyperlinks figure img { margin-bottom: 0 }
	
	.hyperlinks .info { width: 60% }
}/**/




/* ! 6. BLOCK ➜ cc-window */

.cc-window,
.cc-revoke { }

.cc-revoke { display: none !important }




/* ! 6. BLOCK ➜ modules (LEGACY) */

.modules > div + div { margin-top: 2rem }

.modules .item + .item { margin-top: .5rem }

.modules figure + figure { margin-top: 1.5rem }

.modules figcaption {
	margin-top: .5rem;
	text-align: center }





/* ! 5. PAGE */

.page article {}





/* ! 5. PAGE ➜ / (Startseite) */

.home {  }





/* ! 5. PAGE ➜ /interviews */

.post-type-archive-interviews {}





/* ! 5. PAGE ➜ /podcast */

.post-type-archive-podcast h1 {
	text-transform: uppercase;
	text-align: center !important;
	margin-bottom: 3rem }





/* ! 5. PAGE ➜ /podcast/single */

.single-podcast article .date,
.single-podcast article > header { text-align: center }

.single-podcast article > header h1 { padding-bottom: 2rem }

.single-podcast article > header .guest {
	padding-bottom: 2rem }

.single-podcast article .listen .buttons .button { margin-bottom: 1rem }

.single-podcast article .listen .buttons .button + .button { margin-left: 0 }

.single-podcast article main {
	padding-top: 3rem;
	padding-bottom: 1rem }

.single-podcast .cover { margin-bottom: 3rem }

.single-podcast .cover img { border-radius: 1.25rem }

.single-podcast .teaser h1 { text-align: center }


@media
(min-width: 800px) {
	.single-podcast article main {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between }
	
	.single-podcast article main .summary { width: calc(70% - 5rem) }
	
	.single-podcast article .listen .buttons .button + .button { margin-left: .5rem }
	
	.single-podcast article main .cover { width: 30% }
	.single-podcast .cover { margin-bottom: 3rem }
}/**/





/* ! 5. PAGE ➜ /partner/single */

.single-partner article > header h1 {
	padding-bottom: 2rem;
	text-align: center }

.single-partner article main .buttons { padding-top: 2rem }





/* ! 5. PAGE ➜ /info */

.page-info { background: #202020 }

.page-info article {
	padding-top: 110vw;
	color: #F6F8F6 }

.page-info article h1,
.page-info article h2 { text-align: center }

.page-info article figure {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100vw;
	height: 170vw;
	background-image: url('_assets/img/sven-juergensmeier.jpg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat }


@media
(min-width: 800px) {
	.page-info article { padding-top: 70vw }
	
	.page-info article figure { height: 80vw }
}/**/


@media
(min-width: 800px) {
	.page-info article { padding-top: 55vw }
	
	.page-info article figure { height: 66vw }
}/**/





/* ! 5. PAGE ➜ /impressum */

.page-impressum h1,
.page-datenschutzerklaerung h1,
.page-impressum h2,
.page-datenschutzerklaerung h2,
.page-impressum .wysiwyg,
.page-datenschutzerklaerung .wysiwyg {
	font-size: 1em;
	line-height: 1.4em;
	text-transform: none }





/* ! 5. PAGE ➜ /404 */

.error404 #page--header,
.error404 #block--main {
	color: white;
	background: black }

.error404 #block--main .r {
	text-align: center;
	margin-bottom: 60px }

.error404 #block--main .img { max-width: 500px }