* {
box-sizing: border-box;
outline: 0;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
b,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
} table {
border-collapse: collapse;
border-spacing: 0;
}  @font-face {
font-display: swap; font-family: 'Unbounded';
font-style: normal;
font-weight: 200;
src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/unbounded-v7-latin_latin-ext-200.woff2) format('woff2'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/unbounded-v7-latin_latin-ext-200.ttf) format('truetype'); } @font-face {
font-display: swap; font-family: 'Unbounded';
font-style: normal;
font-weight: 400;
src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/unbounded-v7-latin_latin-ext-regular.woff2) format('woff2'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/unbounded-v7-latin_latin-ext-regular.ttf) format('truetype'); } @font-face {
font-display: swap; font-family: 'Unbounded';
font-style: normal;
font-weight: 800;
src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/unbounded-v7-latin_latin-ext-800.woff2) format('woff2'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/unbounded-v7-latin_latin-ext-800.ttf) format('truetype'); } @font-face {
font-display: swap; font-family: 'Unbounded';
font-style: normal;
font-weight: 900;
src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/unbounded-v7-latin_latin-ext-900.woff2) format('woff2'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/unbounded-v7-latin_latin-ext-900.ttf) format('truetype'); } @font-face {
font-display: swap; font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 400;
src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-regular.eot); src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-regular.eot?#iefix) format('embedded-opentype'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-regular.woff2) format('woff2'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-regular.woff) format('woff'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-regular.ttf) format('truetype'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-regular.svg#AtkinsonHyperlegible) format('svg'); } @font-face {
font-display: swap; font-family: 'Atkinson Hyperlegible';
font-style: italic;
font-weight: 400;
src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-italic.eot); src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-italic.eot?#iefix) format('embedded-opentype'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-italic.woff2) format('woff2'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-italic.woff) format('woff'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-italic.ttf) format('truetype'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-italic.svg#AtkinsonHyperlegible) format('svg'); } @font-face {
font-display: swap; font-family: 'Atkinson Hyperlegible';
font-style: normal;
font-weight: 700;
src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700.eot); src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700.eot?#iefix) format('embedded-opentype'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700.woff2) format('woff2'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700.woff) format('woff'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700.ttf) format('truetype'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700.svg#AtkinsonHyperlegible) format('svg'); } @font-face {
font-display: swap; font-family: 'Atkinson Hyperlegible';
font-style: italic;
font-weight: 700;
src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700italic.eot); src: url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700italic.eot?#iefix) format('embedded-opentype'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700italic.woff2) format('woff2'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700italic.woff) format('woff'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700italic.ttf) format('truetype'), url(//beratung.knoe.org/wp-content/themes/orgaberatung/fonts/atkinson-hyperlegible-v10-latin-700italic.svg#AtkinsonHyperlegible) format('svg'); } html {
font-size: 15px;
}
@media only screen and (min-width : 600px) {
html {
font-size: 16px;
}
}
@media only screen and (min-width : 800px) {
html {
font-size: 17px;
}
}
@media only screen and (min-width : 1000px) {
html {
font-size: 18px;
}
}
@media only screen and (min-width : 1200px) {
html {
font-size: 19px;
}
}
body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.5;
color: #000;
}
h1,
h2,
h3,
h4,
.heading {
font-family: var(--font-head);
line-height: 1.2;
font-weight: 900;
hyphens: auto; }
h1 {
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 3rem;
}
h2 {
font-size: 1.5rem;
font-weight: 300;
margin: 3rem 0 2rem;
}
h3 {
font-size: 1.2rem;
font-weight: 900;
margin: 2rem 0 1rem;
}
h4 {
font-size: 1.2rem;
font-weight: 900;
margin: 2rem 0 1rem;
}
p {
margin: 1.6rem 0;
}
p:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
a {
color: inherit;
text-decoration: underline;
}
strong,
b {
font-weight: 700;
}
.black {
font-weight: 900;
}
em {
font-style: italic;
}
.small {
font-size: 80%;
}
*:focus {
outline: 2px solid var(--color-purple);
} .wp-block-gallery,
.wp-block-accordion,
.wp-block-site-logo {
margin: var(--default-padding) 0;
} .onlydesktop {
display: none;
}
@media (hover: hover) {
.onlymobile {
display: none !important;
}
.onlydesktop {
display: inherit;
}
}
body {
background: white;
} .cookiebanner {
display: none;
position: fixed;
bottom: -100%;
transition: bottom .5s ease-out;
width: 100%;
background: rgb(51, 51, 51);
color: white;
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
z-index: 10;
padding: var(--default-padding);
}
.cookiebanner.active {
bottom: 0;
}
.cookiebanner>* {
flex: 1 0 0;
max-width: var(--default-max-width);
}
.cookiebanner-title span {
font-size: 3rem;
}
.cookiebanner .button:not(.button-inverse) {
background-color: white;
border-color: white;
color: rgb(51 51 51);
}
.cookiebanner .button:focus {
outline: 2px solid #ccc;
}
@media only screen and (min-width : 900px) {
.cookiebanner {
flex-direction: row;
}
} .skiplink {
display: block;
position: absolute;
top: -100%;
background: var(--color-purple);
padding: .5rem;
text-align: center;
color: white;
font-size: .8rem;
font-weight: bold;
}
.skiplink:focus {
position: static;
} header {
position: sticky;
top: 0;
width: 100%;
height: var(--header-height);
background: #fbfbfb;
display: flex;
justify-content: space-between;
align-items: stretch;
z-index: 999999; box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .2);
}
.header-logo img {
display: block;
height: 100%;
width: auto;
padding: 1vh;
}
.header-menu {
display: flex;
height: 100%;
}
.header-menu ul {
list-style: none;
display: flex;
height: 100%;
}
.header-logo:focus,
.header-menu a:focus,
.header-menu .button:focus {
outline: none;
background: var(--color-purple-lightest);
}
.header-menu a {
display: flex;
align-items: center;
padding: 0 .9rem;
height: 100%;
font-weight: bold;
font-size: .8rem;
text-decoration: none;
}
.header-menu a:hover,
.header-menu .current-menu-item a {
background: var(--color-blue); }
.header-menu .button {
background: transparent;
border-radius: 0;
border: none;
color: #333;
box-shadow: none;
padding: .5rem 1.2rem;
}
.header-menu .button-label {
display: none;
}
.header-menu .button:hover {
background: var(--color-purple);
color: white;
} @media only screen and (max-width : 500px) {
.header-menu>ul>li {
display: none;
}
.header-menu>ul>li:last-child {
display: unset;
}
} section {
background-color: white;
padding: var(--default-padding);
}
.section-title {
color: var(--color-aubergine);
text-align: center;
text-transform: uppercase;
padding: 1rem 0;
}
.section-content {
max-width: var(--default-max-width);
margin: 0 auto;
} .hero {
background-color: var(--color-blue);
justify-content: flex-end;
align-items: stretch;
padding: 0;
}
.hero-image {
min-height: 40vh;
background-size: cover;
background-position: center center;
}
.hero-text {
padding: calc(2*var(--default-padding)) var(--default-padding);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero-text>* {
width: 100%;
max-width: var(--default-max-width);
}
.hero-text-single>* {
max-width: calc(1.4*var(--default-max-width));
text-wrap: balance;
}
.single .hero-text>* {
text-align: center;
}
.hero-text h1 {
margin-bottom: 1rem;
}
.hero-text .buttonset {
width: 100%;
}
@media only screen and (min-width : 800px) {
.hero {
display: flex;
}
.hero-image {
min-height: 80vh;
flex: 50% 1 1;
}
.hero-text {
flex: 50% 1 1;
}
} .intro {
max-width: calc(1.2 * var(--default-max-width));
margin: 2rem auto;
margin-bottom: 0;
font-size: 120%;
} .banner {
padding: var(--default-padding);
background-size: cover;
background-position: center center;
min-height: 90vh;
display: flex;
margin: auto;
justify-content: center;
align-items: center;
}
.banner h2 {
max-width: 36rem;
color: white;
font-size: 8vmin;
margin: 0;
text-shadow: .125rem .125rem .3rem rgba(0, 0, 0, .4);
} .services-list {
list-style: none;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
width: 100%;
gap: 1rem;
margin-bottom: 2rem;
}
.service {
width: 100%;
max-width: 26rem;
background: var(--color-blue);
border-radius: 1rem;
padding: var(--default-padding);
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
margin: 0 auto;
}
.service img {
display: block;
width: 10rem;
height: 10rem;
margin-bottom: 1rem;
object-fit: contain;
}
.service-text {
max-width: 26rem;
}
.service-text h4 {
font-size: 1.3rem;
font-weight: bold;
}
@media only screen and (min-width : 600px) {
.services-list {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
}
@media only screen and (min-width : 1200px) {
.services-list {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
}
}
.services-text {
max-width: var(--default-max-width);
margin: 4rem auto;
} .topics {
padding-bottom: 3rem;
}
.topics-list {
list-style: none;
display: flex;
flex-direction: column;
width: 100%;
gap: 3rem;
align-items: flex-start;
}
.topic {
padding: var(--default-padding);
background: var(--color-blue);
display: flex;
flex-direction: column;
gap: 3rem;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.topic img {
display: block;
width: 7rem;
height: 7rem;
object-fit: contain;
}
.topic-text {
max-width: 26rem;
}
.topic-text h4 {
font-size: 1.5rem;
font-weight: bold;
}
.topic-longtext,
.button.topic-hidetext {
display: none;
}
.topic-longtext {
margin-bottom: 1rem;
opacity: 1;
animation: fadein .5s ease;
}
@keyframes fadein {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@media only screen and (min-width : 700px) {
.topic {
flex-direction: row;
align-items: flex-start;
}
.topic img {
width: 10rem;
height: 10rem;
}
} .calendar {
background: white;
padding-top: 0;
}
.calendar .section-title {
color: var(--color-green);
}
.calendar-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
.event {
display: flex;
align-items: flex-start;
flex-direction: column;
width: 100%;
max-width: 50rem;
}
.event-date {
background: var(--color-green);
padding: var(--default-padding);
font-family: var(--font-head);
font-size: 2.5rem;
line-height: 1;
text-align: center;
color: white;
}
.event-date-month {
font-size: 50%;
}
.event-text {
background: var(--color-blue-light);
padding: var(--default-padding);
flex: 1;
width: 100%;
background: var(--color-blue);
}
.event-text-meta {
font-size: .9rem;
margin-bottom: .5rem;
}
.event-text-title {
margin-top: .5rem;
}
@media only screen and (min-width : 600px) {
.event {
flex-direction: row;
}
} .team {
padding-left: 0;
padding-right: 0;
}
.team-list {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 1rem;
padding: var(--default-padding);
}
.person {
flex-basis: clamp(20rem, 30%, 40rem);
}
.person-portrait {
display: block;
width: 100%;
height: 15rem;
object-fit: cover;
border-radius: 1rem 1rem 0 0;
margin: 0 auto;
}
.person-text {
background: var(--color-green);
color: white;
padding: var(--default-padding);
border-radius: 0 0 1rem 1rem;
}
.person-longbio {
margin-top: 1rem;
}
.person-longbio,
.button.person-hidebio {
display: none;
}
.person .button {
background: var(--color-blue);
color: black;
border-color: var(--color-blue);
margin-top: 1rem;
}
.person .button:hover {
background: transparent;
color: var(--color-blue);
}
.team-organisation {
width: 100%;
padding: calc(var(--default-padding) * 2) var(--default-padding);
background: var(--color-blue);
}
.team-organisation-text {
max-width: var(--default-max-width);
margin: 2rem auto;
}
@media only screen and (min-width : 800px) {
.team-organisation {
background: var(--color-blue) url(//beratung.knoe.org/wp-content/themes/orgaberatung/img/aboutusbanner-background.png) bottom right no-repeat;
background-size: contain;
}
} .testimonials {
background: white;
}
.testimonials .section-title {
color: var(--color-green);
}
.testimonials-list {
list-style: none;
margin: 0 auto;
display: grid;
}
.testimonial {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2rem;
margin: 0 auto;
grid-column: 1;
grid-row: 1;
transform: translateY(5rem);
opacity: 0;
transition: all .3s ease;
pointer-events: none;
}
.testimonial.active {
transform: translateY(0);
opacity: 1;
z-index: 3;
pointer-events: all;
}
.testimonial-image {
width: 10rem;
margin: 0 auto;
}
.testimonial-image img {
display: block;
}
.testimonial-image-logo img {
width: 10rem;
height: 6rem;
object-fit: contain;
object-position: top;
}
.testimonial-image-portrait img {
width: 6rem;
height: 6rem;
margin-left: 4rem;
object-fit: cover;
border-radius: 50%;
}
.testimonial-text {
max-width: var(--default-max-width);
}
.testimonial-text-content {
font-style: italic;
font-size: 1.1rem;
}
.testimonial-text-title {
font-weight: bold;
font-size: .9rem;
margin-top: 1rem;
}
.testimonials-nav {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
width: 100%;
padding: 2rem;
background: white;
z-index: 99;
position: relative;
}
.testimonials-nav button {
font-size: .1rem;
color: transparent;
width: 1rem;
height: 1rem;
border: 2px solid var(--color-orange);
background: white;
padding: 0;
border-radius: 1rem;
cursor: pointer;
transition: all .3s ease;
}
.testimonials-nav button:hover {
background: var(--color-orange);
}
.testimonials-nav button.active {
background: var(--color-orange);
}
@media only screen and (min-width : 800px) {
.testimonial {
flex-direction: row;
}
} .contact {
background: var(--color-blue);
}
.contact-form {
max-width: var(--default-max-width);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-form label {
display: block;
font-size: .8rem;
font-weight: bold;
text-transform: uppercase;
margin-bottom: .5rem;
}
.contact-form input[type=text],
.contact-form textarea {
display: block;
width: 100%;
border: none;
background: white;
padding: 1rem;
}
.contact-message {
max-width: var(--default-max-width);
margin: 0 auto;
padding: var(--default-padding);
background: var(--color-green-light);
border-radius: 1rem;
} .content {
background: white;
padding: var(--default-padding);
max-width: var(--default-max-width);
margin: 0 auto;
} footer {
background: var(--color-gray);
color: white;
text-align: center;
padding: var(--default-padding);
}
footer .button {
color: white;
border-color: var(--color-primary-light);
}
footer .button:hover {
background-color: var(--color-primary-light);
}
footer ul {
list-style: none;
}
.footer-social,
.footer-admin,
.footer-menu>ul {
display: flex;
justify-content: center;
padding: var(--default-padding);
}
.footer-social .buttonset {
justify-content: center;
list-style: none;
}
.footer-menu>ul {
gap: var(--default-padding);
flex-wrap: wrap;
font-size: .8rem;
text-transform: uppercase;
}
.footer-menu>ul>.menu-item-has-children {
flex-basis: 8rem;
}
.footer-menu a {
display: block;
padding: .3rem;
color: var(--color-primary-light);
text-decoration: none;
}
.footer-menu a:hover,
.footer-menu .current-menu-item a {
color: white;
}
.footer-menu a[href='#'] {
pointer-events: none;
cursor: default;
font-weight: bold;
color: white;
}
@media only screen and (min-width : 800px) {
.footer-newsletter form {
flex-direction: row;
}
.footer-menu>ul {
gap: calc(2*var(--default-padding));
}
.footer-menu>ul>.menu-item-has-children {
flex-basis: 10rem;
}
}:root { --header-height: 3rem;
--color-blue: #c3dcf2;
--color-blue-dark: #4082a0;
--color-green: #0f5940;
--color-aubergine: #542c3c;
--color-orange: #FB551A;
--color-yellow: #D1C262;
--color-brown: #4F2C39;
--color-gray: #898096;
--color-gray-dark: #675e74;
--color-gray-light: #dcd2ea;
--color-gray-lighter: #f1f0f2;
--default-max-width: 34rem;
--default-padding: 1rem;
--default-vertical-spacing: calc(4 * var(--default-padding));
--font-head: 'Unbounded', sans-serif;
--font-body: 'Atkinson Hyperlegible', Helvetica, Arial, sans-serif;
}
@media only screen and (min-width : 800px) {
:root {
--default-padding: 2rem;
}
} .buttonset {
display: flex;
flex-wrap: wrap;
gap: .5rem;
list-style: none;
}
.button,
.wp-block-buttons .wp-block-button__link {
background-color: var(--color-aubergine);
color: white;
align-items: center;
padding: .5rem .8rem;
border: 2px solid var(--color-aubergine);
border-radius: .8rem;
text-decoration: none;
font-size: .8rem;
line-height: 1rem;
font-weight: bold;
cursor: pointer;
}
.button:hover {
background-color: transparent;
color: var(--color-aubergine);
}
.button.disabled {
border-color: #777;
border-style: dashed;
color: #666;
pointer-events: none;
cursor: default;
background-color: white;
}
.button-secondary {
background-color: var(--color-green);
border: 2px solid var(--color-green);
}
.button-secondary:hover {
background-color: transparent;
color: var(--color-green);
}