/**
 * Theme Name:     HIOB Theme
 * Author:         Sichtelement
 * Template:       norrsken
 * Text Domain:	   hiob-theme
 * Description:    HIOB Theme is a Childtheme from Norrsken. This is a simple block theme for blogs, with a stylish design inspired by the aurora borealis. Demo: https://norrsken.andersnoren.se
 * Theme URI:      https://hiob-hannover.de
 * Author URI:     https://sichtelement.design
 * Version:        0.9
 */
/* root settings */
/*****colors*****/
:root {
	--hiobmagenta: rgba(230,0,120,1);
	--hiobblau: rgba(82,166,178,1);
	--hiobgruen: rgba(175,202,5,1);
	--hiobgelb: rgba(255,237,0,1);
	--hiobant: rgba(64,63,68,1);
	--hiobbg: #2a2829
}
/* Base styles and for mobile (320px - 480px) */
body {
	oerflow: hidden;
}
body, .hiob-header {
	background-color: var(--hiobbg) !important;
}
/*aktiviert smooth scrolling*/

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html{
    scroll-behavior: auto;
  }
}
.inside-xxl {
	position: relative;
	max-width: 98%;
	margin: 0 auto !important;
}
main p {
	letter-spacing: 2px;
	line-height: 2.2em;
}
.title-horizont {
	display: none !important;
}
.donation-box {
	padding: 10px;
	background-color: var(--hiobmagenta);
	box-shadow: var(--hiobgelb) 15px 20px 0 0;
}
.donation-gelb {
	background-color: var(--hiobgelb);
	padding: 7px;
	color: #000;
}
.legalpage {}
.legalpage h4 {
	font-size: 20px;
	font-weight: 800;
}
.legalpage p,
.legalpage ul li {
	font-weight: 500;
	font-style: normal;
	letter-spacing: 2px;
}
.legalpage p strong {
	font-weight: 800;
}
header .wp-block-site-logo img {
	border-radius: 50%;
	border-width: medium;
	border-color: #fff;
	border-style: solid;
}
.hiob-textlogo-container {
	margin-bottom: 0 !important;
	margin-top: 0 !important;
}
.hiob-textlogo-container figure {
	position: relative;
	margin: -72px;
	z-index: 3;
}
.hiob-textlogo-container .top{
    max-height: 30vH !important;
    padding-bottom: 0;
    margin-bottom: 0;
}
.hiob-textlogo-container .top img,
.hiob-textlogo-container .bottom img {
	width:100vW;
	z-index: 0;
	position: relative;
}.hiob-textlogo-container .middle img {
	width:35%;
	z-index: 3;
	position: relative;
}
/**.hiob-textlogo-container .middle {
	margin-top: -279px;
   margin-bottom: -278px;
   z-index: 3;
}**/
.hiob-textlogo-container .bottom {
	z-index: 2;
}
.img-border-blau figure {
	position: relative;
	z-index: 2
}
.img-border-blau img {
	z-index: 1;
	max-height: 80vH;
	width: auto !important;
	box-shadow: var(--hiobblau) 15px 20px 0 0;
	object-fit: cover !important;
}
.img-order-blau figure::after {
	content: "";
   position: absolute;
	width: 77%;
	height: 100%;
	background-color: var(--hiobblau);
	z-index: -1;
	bottom: -20px;
	left: 20px;
}
.hiob-DA-img {
	position: relative;
}
.hiob-DA-title {
	  position: absolute;
  bottom: 36px;
  left: 0;
  color: var(--hiobblau);
  font-size: 5.1rem;
  z-index: 2;
}
.join p {
	padding-right: 0 !important;
}
/* header settings */
.hiob-header {
	padding-top: 25px !important;
}
.hiob-header .wp-block-site-logo {
	padding-top: 5px;
}
.header-quote {
    background-image: url("https://hiob-hannover.de/wp-content/uploads/2025/08/bubble-yellow.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    display: flex;
    padding: 10px 34px !important;
    min-height: 235px !important;
}
.header-quote p {
	align-self: center;
}
.hiob-header .main-nav {
	padding-top: 5px;
}
.hiob-header .main-nav ul li {
	flex-basis: 135px;
	background-color: var(--hiobbg) !important;
	border: 0.5rem solid var(--hiobbg);
	padding: 1.5rem 2rem;
	text-transform: uppercase;
	letter-spacing: .3em;
	font-weight: 500;
	text-align: center;
	transition: color 0.4s ease-in-out;
}

.hiob-header .main-nav ul li:hover {
  color: #fff;
  text-decoration: none;
}
.hiob-header .main-nav ul li:hover::before {
  width: 0;
}
.hiob-header .main-nav ul li:hover::after {
  height: 0;
}
.hiob-header .main-nav ul li:active {
  border-width: 0.25rem;
}
.hiob-header .main-nav ul li::before, .hiob-header .main-nav ul li::after {
  content: "";
  position: absolute;
  background: var(--hiobbg);
  z-index: -1;
  transition: all 0.4s ease;
}
.hiob-header .main-nav ul li::before {
  width: calc(100% - 3rem);
  height: calc(101% + 1rem);
  top: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
}
.hiob-header .main-nav ul li::after {
  height: calc(100% - 3rem);
  width: calc(101% + 1rem);
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.hiob-header .main-nav a {
	background-color: var(--hiobbg) !important;
	cursor: pointer;
}
.hiob-header .main-nav a {
	text-decoration: none;
}
.hiob-header .item-magenta,
.hiob-header .item-blau,
.hiob-header .item-gruen,
.hiob-header .item-gelb,
.hiob-header .item-black {
	position: relative;
	z-index: 2;
	background-color: var(--hiobbg) !important;
}
.hiob-header .item-magenta {
	border-color: var(--hiobmagenta);
}
.hiob-header .item-magenta:hover {
	border-color: var(--hiobmagenta);
	color: var(--hiobmagenta);
}
.hiob-header .item-magenta:hover a {
	color: var(--hiobmagenta);
}
.hiob-header .item-blau {
	border-color: var(--hiobblau);
}
.hiob-header .item-blau:hover {
	border-color: var(--hiobblau);
	color: var(--hiobblau);
}
.hiob-header .item-blau:hover a {
	color: var(--hiobblau);
}
.hiob-header .item-gruen {
	border-color: var(--hiobgruen);
}
.hiob-header .item-gruen:hover {
	border-color: var(--hiobgruen);
	color: var(--hiobblau);
}
.hiob-header .item-gruen:hover a {
	color: var(--hiobgruen);
}
.hiob-header .item-gelb {
	border-color: var(--hiobgelb);
}
.hiob-header .item-gelb:hover {
	border-color: var(--hiobgelb);
	color: var(--hiobblau);
}
.hiob-header .item-gelb:hover a {
	color: var(--hiobgelb);
}
.hiob-header .item-black {
	border-color: var(--hiobblau);
}
.hiob-header .item-black:hover {
	border-color: #000;
	color: #000;
}
.hiob-header .item-black:hover a {
	color: #000;
}
/* responsive menu settings */
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #000;
	color: #fff;
	padding: 2rem;
	max-width: 90%;
	box-sizing: border-box;
}
.has-modal-open .admin-bar .is-menu-open .wp-block-navigation__responsive-dialog {
	margin-top: 0;
}
.wp-block-navigation__responsive-container-open {
	color: #fff !important;	
}
.wp-block-navigation__responsive-container-close {
    border: none;
    color: #fff !important;
    cursor: pointer;
    margin: 0;
    padding: 0;
    text-transform: inherit;
    vertical-align: middle;
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open .main-nav {
	width: 100%;
	box-sizing: border-box;
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open .main-nav li {
	flex-basis: unset;
	border: 0.5rem solid var(--hiobbg);
	padding: 0;
	width: 100%;
	box-sizing: border-box;
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open .main-nav li::before, .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open .main-nav li::after {
	content: none;
	position: unset;
	
}
.wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open .main-nav a {
	min-width: 200px;
	align-self: normal;
	padding: 2rem 2rem !important;
}
/* CTA Button settings */
.cta-donation {
	position: relative;
}
.cta-donation::after {
	content: "";
   position: absolute;
	width: 45px;
	height: 40px;
	right: -10px;
	bottom: -8px;
	background-color: var(--hiobgelb);
	z-index: -1;
}
.cta-donation a {
	padding-right: 3em;
}
.cta-donation a::after {
	content: "";
   position: absolute;
	width: 0;
	height: 0;
	border: 0 solid transparent;
	border-bottom-width: 15px;
	border-top-width: 15px;
	border-left: 35px solid var(--hiobgelb);
	right: 0;
	bottom: -6px;
}
.mission {
	padding-top: 0 !important;
}
.hiob-fuss {
	padding-bottom: 25px !important;
	padding-right: var(--wp--preset--spacing--body-margin);
	padding-left: var(--wp--preset--spacing--body-margin);
}
.header-quote p {
    font-size: 1.2rem !important;
    line-height: 34px;
}
/* Bentobox settings */
.bentobox {
	gap: 5px 5px;
}
.bento {
	border-radius: 4px;
}
.bento.inside {
	padding: 25px;
}
.bento.inside p {
	font-weight: 600;
	font-size: 14px;
  line-height: 20px;
  letter-spacing: normal;
}
.bento.inside h6 {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: 2px;
}
.bento.magenta {
	background-color: var(--hiobmagenta);
	margin-bottom: 5px;
}
.bento.blau {
	background-color: var(--hiobblau);
}
.bento.blau.stretch {
	align-self: auto;
}
.bento.gelb {
	background-color: var(--hiobgelb);
	margin-bottom: 5px;
}
.bento.gelb.inside h6,
.bento.gruen.inside h6 {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: 2px;
	color: #000;
}
.bento.gelb.inside p,
.bento.gruen.inside p {
	color: #000;
	font-weight: 600;
}
.bento.gruen {
	background-color: var(--hiobgruen);
}
.bento.black {
	background-color: #000;
}
.flex-stretch {
	align-self: stretch;
	min-height: 100%;
}
.smallbox33 {
	flex-basis: 30.33% !important;
}
.memberbox .img-border-blau figure {
	margin-top: 2rem;
}
.memberbox-left {
	padding-right: ;
}
.memberbox p,
.donationbox p {
	font-weight: 600;
}
.memberbox h6,
.donationbox h6 {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: 2px;
}
.donationbox {
	min-height: 95vH;
	margin-top: 4rem;
}
.donationbox .wp-block-cover {
	 margin-top: 0;
    padding-top: 2rem !important;
    padding-right: 20px !important;
    padding-bottom: 2rem !important;
    padding-left: 20px !important;
    min-height: 66vh;
    aspect-ratio: unset;
	}
.quote-bg {
	position: relative;
	padding: 2px 3px;
	background-color: var(--hiobgelb);
	color: black;
	z-index: 2;
	font-weight: 600 !important;
	box-shadow: var(--hiobmagenta) 6px 7px 0 0;
}
footer {
	padding: 0;
	overflow-y: hidden;
}
footer figure {
	margin-bottom: -50px !important;
	text-align: right;
}
footer figure img {
	max-width: 75% !important;
}
footer h2 {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: 2px;
}
footer h6 {
	font-weight: 600;
}
footer p {
	font-weight: 600;
	letter-spacing: 2px;
}
footer .cubes {
	display: inline-flex;
	gap: 5px;
	flex-direction: row;
}
footer .cubes .cube {
	width: 20px;
	height: 20px;
}
footer .cubes .red {
	background-color: var(--hiobmagenta);
}
footer .cubes .blue {
	background-color: var(--hiobblau);
}
footer .cubes .gelb {
	background-color: var(--hiobgelb);
}
footer .cubes .gruen {
	background-color: var(--hiobgruen);
}
footer .cubes .black {
	background-color: var(--hiobblack);
}
footer nav ul{
	margin-left: 10px !important;
}
/* Small tablets and larger mobile devices (481px - 768px) */
@media (min-width: 481px) {}
/* Tablets and small laptops (769px - 1024px) */
@media (min-width: 769px) {
	.title-horizont {
	position: absolute;
	transform: rotate(-90deg);
	left: calc(-4.5% - var(--wp--preset--spacing--body-margin));
	top: 50vH;
	display: block !important;
	}
	.mission .inside-66column-xxl p {
	padding-right: 9rem;	
	}
	 .memberbox {   
	 margin-top: 13rem;
    margin-bottom: 13rem;
    }
}
/* Large desktops and high-resolution screens (1025px and up) */
@media (min-width: 1025px) {
	.header-quote {
	padding: 20px !important;
	}
	.header-quote p {
    font-size: clamp(27.42px, 1.714rem + ((1vw - 3.2px) * 2.11), 47px);
}
	.hiob-textlogo-container figure {
	position: relative;
	margin: -228px;
	z-index: 3;
}
.hiob-textlogo-container .top{
    max-height: 30vH !important;
    padding-bottom: 0;
    margin-bottom: 0;
}
.hiob-textlogo-container .top img,
.hiob-textlogo-container .bottom img {
	width:100vW;
	z-index: 0;
	position: relative;
	}
	.hiob-textlogo-container .middle img {
	width:;
	z-index: 3;
	position: relative;
	}
	.mission .inside-66column-xxl p {
	padding-right: 13rem;	
	}
	.hiob-DA-title {
    bottom: 36px;
    font-size: 6.1rem;
    z-index: 2;
	}
	.bentobox {
	gap: 2em 5px;
	}
	.memberbox .img-border-blau figure,
	.donationbox {
	margin-top: inherit;
	}
	.donationbox .wp-block-cover {
	 margin-top: 0;
    padding-top: 10rem !important;
    padding-right: 48px !important;
    padding-bottom: 10rem !important;
    padding-left: 48px !important;
    min-height: 66vh;
	}
	.donation-box {
	padding: 10px 25px;
	}
}
/* Extra-large screens (1440px and up) */
@media (min-width: 1440px) {
	
	.inside-66column-xxl p {
		width: 45%;
		}
	.inside-33column-xxl p {
		width:;
		}
	.herocontainer {}
	.header-quote {
		max-width: 1000px !important;
		min-width: 800px !important;
		min-height: 600px !important;
		background-size: 100% 100%;
		justify-content: center;
		align-content: center;
		flex-wrap: wrap;
		}
	.header-quote p {
		max-width: 608px;
		align-content: center;
		text-indent: 65px;
		font-size: 2.7rem !important;
		line-height: 66px;
		}
	.hiob-header .main-nav ul li {
		display: inline;
		flex-shrink: 1;     /* alle dürfen schrumpfen */
  		flex-grow: 0;
  		white-space: nowrap;
		}
	main {
		max-width: ;
		margin:;
		position: ;
		padding-left: var(--wp--preset--spacing--body-margin);
	padding-right: var(--wp--preset--spacing--body-margin);
	overflow-y: hidden;
	}
	.herocontainer {
		justify-content: space-between;	
	}
	.hiob-textlogo-container {
		width: 1200px;	
		margin: 3rem auto;
	}
	.hiob-textlogo-container .bottom img {
		width:;
		}
	.hiob-textlogo-container .middle img {
		width: ;
		}
	/**.hiob-textlogo-container .middle {
	margin-top: -410px;
   margin-bottom: -410px;
   z-index: 3;
	}**/
	.quote-bg {
	position: relative;
	padding: 2px 3px;
	background-color: var(--hiobgelb);
	color: black;
	z-index: 2;
	font-weight: 600 !important;
	box-shadow: var(--hiobmagenta) 6px 7px 0 0;
}
	.inside-xxl {
		max-width: 1400px;
		margin: 0 auto !important;	
	}
	footer figure img {
	max-width: 40% !important;
	}
}