/* site max width: 1366px = 85.375rem 
  breakpoint 840px = 52.5rem
  content max inner width: 720px = 45rem
  color: black; hover: grey */
  
@font-face { /* Regular */ font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('../fonts/Roboto-Regular.woff2') format('woff'); }

@font-face { /* Medium */ font-display: swap; font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('../fonts/Roboto-Medium.woff2') format('woff'); }

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

/* SYSTEM FONTS */
body { font-family: Roboto, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

/* RESET & DEFAULT */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; height: auto; max-width: 100%; }
input, button, textarea, select { font: inherit; font-size: 1rem; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p { hyphens: auto; }
.only-print { display: none; }
.clearfix:before, .clearfix:after { content: " "; display: table; } 
.clearfix:after { clear: both; }

/* HIDDEN */
.sr-only:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
a.sr-only:focus { position: absolute; clip: auto; width: 75%; height: auto;overflow: auto; color: white; background: black; left: 50%; transform: translate(-50%, 0); top: 5px; margin-left: auto; margin-right: auto; padding: 5px 10px; text-align: center; }

/* FONTS & SPACE */
/* Roboto base font; is used in 400 - REGULAR, 500 - MEDIUM, 700 - BOLD */
/* FONTSIZE */
body { font-size: 1.2rem; line-height: 1.6; font-weight: 400; }
h1 { font-size: 3.2rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 2.2rem; font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
nav#primary-navigation { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.marker { font-size: 1rem; font-weight: 400; text-transform: uppercase; }
strong { font-weight: 700; }

@media (max-width: 52.5rem) { 
nav#primary-navigation { font-size: 1.25rem; }
h1 { font-size: 2.2rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; line-height: 1.4; } }

/* TEXT-BLOCKS SPACES */
h1 { margin-bottom: 1.5rem; }
h2 { margin: 5rem 0 2rem 0; }
h3 { margin: 0 0 2rem 0; }
footer h3 { margin: 2.5rem 0; }

/* LINKS */
a { color: black; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.175em; }
a:hover { color: grey; text-decoration: none; }
a.current { color: grey; text-decoration: none; }

html {
animation-duration: 2.5s; animation-name: jqmBackgroundOpacity; }
@keyframes jqmBackgroundOpacity { from { opacity: 0; } to { opacity: 0.97; } }

body { 
background-color: #fff; }

#wrapper {
margin: 0 auto; max-width: 85.375rem;}

.home { background-color: #f7f8f2; background-image: url(/assets-basic/bg-home.svg); background-size: 200%; background-position: 20% 0; background-repeat: no-repeat; }

.aktion { background-color: #f3f1f0; background-image: url(/assets-basic/bg-blog.svg); background-size: 240%; background-position: 40% 5%; background-repeat: no-repeat; }

.partner { background-color: #f4fdff; background-image: url(/assets-basic/bg-projekt.svg); background-size: 200%; background-position: 20% 0; background-repeat: no-repeat; }

.service { background-color: #f1f7f7; background-image: url(/assets-basic/bg-service.svg); background-size: 200%; background-position: 20% 0; background-repeat: no-repeat; }

.ueber-uns { background-color: #fdfcf6; background-image: url(/assets-basic/bg-ueber-uns.svg); background-size: 200%; background-position: 20% 0; background-repeat: no-repeat; }

.nodoctype { background-color: #f2f1f7; background-image: url(/assets-basic/bg-nodoctype.svg); background-size: 200%; background-position: 20% 0; background-repeat: no-repeat; }

/* MAIN */
main { }
article { padding-bottom: 8.5rem; }
article#content { padding-bottom: 3.5rem; }

.superlist-item {
  display: flex;
  align-items: flex-start; /* Bild und Text oben ausrichten */
  gap: 2rem; /* Abstand zwischen Bild und Text */
  margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 2px solid #fff; }

.superlist-item img {
  flex-shrink: 0;
  width: 240px;
  height: auto;
  display: block; }

.superlist-text { flex: 1; }
.superlist-text h3 { margin-top: 0; }
.superlist-summary { margin-top: 0.5rem;
  color: #444; }
  
@media (max-width: 767px) {
section.WEwysiwyg ul.superlist { padding-left: 0; }
.superlist-item { flex-direction: column; gap: 1rem; }
.superlist-item img { width: 100%; height: auto; }
}

/* HEADER & LOGO */
#esa-logo { width: 1.25rem; height: 6.25rem; }
a#logo { width: 18.75rem; height: 3.75rem; fill: black; margin: 2.75rem auto 0 1.25rem; }
a#logo:hover { fill: grey; }
header { margin: 0 auto; display: flex; justify-content: flex-end; padding-bottom: 6rem; }
header ul { padding: 4.25rem 1.5rem 0 0; }
header li { list-style: none; display: inline-block; padding-right: 1.25rem; margin-top: auto; }
header li:last-child { padding-right: 0; }

@media (max-width: 52.5rem) { 
header { display: block; text-align: center; } 
a#logo { width: 15.625rem; height: 3.125rem; display: block; margin: 0 auto; text-align: center; margin-top: -4.5rem; } 
header ul { margin-top: -0.5rem; }
nav#primary-navigation { font-size: 1.25rem; } 
header ul { padding: 4.25rem 0 0 0; } .mobile { display: none; } header li { padding-right: 2rem; } }

/* SECTION ALL */
section.WEwysiwyg, section.WEgallery, section.WEmaterial, section.WElinks, section.WEvideo { margin: 0 auto; max-width: 45rem; }

@media (max-width: 52.5rem) { div.intro, section.WEwysiwyg, section.WEgallery, section.WEmaterial, section.WElinks, section.WEvideo, section.teaser-big-vertical, section.teaser-big-horizontal, section.teaser-mini, .teaser-intro, .teaser-intro2, section.teaser-big-portrait { padding: 0 2rem; } }

section.WEwysiwyg ul, section.WEwysiwyg ol { padding-left: 2rem; }
section.WEwysiwyg li { padding-bottom: 0.25rem; }
section.WEwysiwyg p { padding-bottom: 1.5rem; }
section.WEwysiwyg p img, section.WEwysiwyg ul, section.WEwysiwyg ol { margin: 2rem auto; }
section.WEmaterial ul, section.WElinks ul { list-style: none; }
section.WEwysiwyg blockquote { margin: 2.5rem 0; max-width: 75%; padding-left: 1.5rem; margin-left: 0.5rem; border-left: 6px solid #e96aaa; font-style: italic; color: grey }

section.WEwysiwyg blockquote p { padding-bottom: 0 !important; }

.left { float: left; }
.right { float: right; }
.topspace { padding-top: 4.5rem; }

/* TEASER intro */
div.teaser-intro { display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 5.5rem; }
div.teaser-intro div { width: 50%; align-self: flex-end; padding: 0 0 1.25rem 2.5rem; }
figure.hero { width: 50%; padding-left: 25px; }
p.summary { padding-right: 2.5rem; }

@media (max-width: 52.5rem) { div.teaser-intro div, figure.hero { width: 100%; padding: 0; padding-left: 0; } p.summary { margin-bottom: 2.5rem; padding-right: 0; } }

/* TEASER intro 2 */
div.teaser-intro2 { display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 5.5rem; }
div.teaser-intro2 div { width: 50%; align-self: flex-end; padding: 0 0 1.25rem 2.5rem; }
figure.hero2 { width: 50%; }
p.summary { padding-right: 2.5rem; }

@media (max-width: 52.5rem) { div.teaser-intro2 div, figure.hero2 { width: 100%; padding: 0; } p.summary { margin-bottom: 2.5rem; padding-right: 0; } }

/* TEASER big-horizontal 2er */
section.teaser-big-horizontal {width: 100%; }
div.teaser-big-horizontalitem { width: 50%; }
div.teaser-big-horizontalitem div { padding: 1rem 2.5rem 4rem 2.5rem; }
@media (max-width: 52.5rem) { div.teaser-big-horizontalitem { width: 100%; } div.teaser-big-horizontalitem div { padding: 1rem 0 4rem 0; } .left, right { float: none; } }

/* TEASER big-vertical 2er */
section.teaser-big-vertical { display: flex; flex-flow: row wrap; justify-content: space-between; margin-bottom: 0; }
section.teaser-big-vertical div { width: 48%; align-self: flex-end; padding: 0 0 1.25rem 2.5rem; }

@media (max-width: 52.5rem) { section.teaser-big-vertical { display: block; margin-bottom: 4rem; } section.teaser-big-vertical div { width: 100%; padding: 0; } }

/* TEASER mini 3er */
section.teaser-mini { display: flex; max-width: 72%; border: 20px solid white; }
section.teaser-mini div { padding: 1.5rem; background-color: white; border-right: 1px solid black; width: 33.3333%; }
section.teaser-mini div:last-child { border-right: none; margin-right: 0; }
section.teaser-mini h2 { padding: 4rem 1rem 4rem 0; }

@media (max-width: 52.5rem) { 
section.teaser-mini { display: block; max-width: 100%; float: none; border: none !important; }
section.teaser-mini span.marker { display: none; }
section.teaser-mini div { width: 100%; padding: 2rem; border-right: none; border-bottom: 1px solid lightgrey; } }

/* TEASER big-portrait 2er */
section.teaser-big-portrait { width: 100%; }
div.teaser-big-portraititem-left { float: left; width: 50%; background-color: white; border-right: 1px solid black; }
div.teaser-big-portraititem-right { float: right; width: 50%; background-color: white; }
div.teaser-big-portraititem-left img {float: left;width: 50%;}
div.teaser-big-portraititem-left div { float: right;width: 50%;padding: 2rem;}
div.teaser-big-portraititem-right img {float: right;width: 50%;}
div.teaser-big-portraititem-right div { float: left;width: 50%;padding: 2rem;}
section.teaser-big-portrait p { padding: 2rem; min-height: 320px; }

@media (max-width: 52.5rem) { 
section.teaser-big-portrait { margin-top: 2rem; margin-bottom: 2rem; }
div.teaser-big-portraititem-left, div.teaser-big-portraititem-right, div.teaser-big-portraititem-left img, div.teaser-big-portraititem-left div, div.teaser-big-portraititem-right img, div.teaser-big-portraititem-right div { float: none; width: 100%; }
section.teaser-big-portrait p { padding-top: 0rem; } 
div.teaser-big-portraititem-left div, div.teaser-big-portraititem-right div{padding-bottom: 0rem; } 
div.teaser-big-portraititem-left { border-right: none; } }


/* TEASER portrait 3er */
section.teaser-portrait { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); inline-size: 100%; }
.teaser-portraititem { display: grid; grid-template-columns: 40% 60%; grid-template-rows: auto 1fr; background-color: white; }
.teaser-portraititem:not(:last-child) { border-inline-end: 1px solid black; }
.teaser-portraititem img { display: block; inline-size: 100%; aspect-ratio: 740 / 560; block-size: auto; object-fit: cover; }
.teaser-portraititem-header { padding: 2rem; }
.teaser-portraititem-header h3 { margin-block-end: 0; }
section.teaser-portrait p { grid-column: 1 / -1; padding: 2rem; margin: 0; }

@media (max-width: 52.5rem) { section.teaser-portrait { grid-template-columns: 1fr; gap: 2rem; margin-block: 2rem; padding-inline: 2rem; }
  .teaser-portraititem { grid-template-columns: 1fr; }
  .teaser-portraititem:not(:last-child) { border-inline-end: 0; }
  .teaser-portraititem img { inline-size: 100%; }
  .teaser-portraititem-header { padding-block-end: 0; }
  section.teaser-portrait p { grid-column: auto; padding-block-start: 0; } }




/* BUTTON */
#button, #button-2, #button-3 { margin: 0 auto; width: 18.75rem; }
a.button { padding: 5px 1.2rem 7px 1rem; margin-top: 4rem; }
.button { margin-top: 2rem; margin-bottom: 8px; user-select: none; transition: all .2s ease; border-width: 2px; border-color: black; border-style: solid; border-radius: 1em; word-spacing: 1px; overflow: hidden; cursor: pointer; display: inline-block; text-decoration: none; letter-spacing: 0.02em; text-align: left; }
.button:hover { transform: scale(1.03); border-color: grey;}
.button::after { content: " ⟶"; }

/* YOUTUBE */
.video { aspect-ratio: 16 / 9; width: 100%; }

/* FOOTER */
footer { 
max-width: 85.375rem; 
margin: 0 auto; 
padding: 5rem 0 8.5rem 0;
background: url(/assets-basic/q8-logo.svg);
background-size: 40%;
background-repeat: no-repeat;
background-position: 20% 20%; 
background-color: #f1f5f5; 
display: flex;
flex-flow: row wrap;
justify-content: space-between; }

@media (max-width: 52.5rem) { footer { background-size: 85%; } }

/* FOOTER */
footer nav { width: 45%; padding-left: 9%;}
#address { width: 45%; }
footer p { padding: 0 3% 2.5rem 9%; }
footer ul { margin: 0; padding: 0; list-style-type: none;}
footer ul li { padding-bottom: 0.75rem;}

@media (max-width: 52.5rem) { footer nav, #address, footer p { width: 100%; padding: 0; } footer { padding-left:2rem; padding-right:2rem; } }

/* LEAF */
#leaf { margin: 5rem auto; width: 5rem; }
.leaficon { stroke-width: 1.5px; fill: none; } 
a .leaficon, .leaficon { stroke: black; }
a:hover .leaficon { transform: scale(1.05); stroke: grey; }

/* PRINT */
@media print {
.only-print{ display: block; text-align: center; max-width: 65%; margin-left:25%; }
#alsterdorf, header, footer, #leaf, .button, section.teaser-mini, .clearfix, .insideteaser { display: none !important; }
main { max-width: 65%; margin-left:25%; }
* { float: none; background-color: white !important; color: black !important; background-image: none !important; }
img { max-width: 75% !important; height: auto !important; }
article { padding-bottom: 1.5rem !important; }
h2 { margin: 2.5rem 0 1rem 0 !important; } }