/* =============================================
   Root – Variablen
   ============================================= */

:root {

    /* Farben */
    --white:         #ffffff;
    --black:         #000000;
    --grey:          #f0f6f9;
    --primary:       #157372;
    --primary-light: #e4f0ed;
    --secondary:     #405f83;

    /* Weiß transparent */
    --white-trans-10: rgb(255 255 255 / 10%);
    --white-trans-30: rgb(255 255 255 / 30%);
    --white-trans-50: rgb(255 255 255 / 50%);
    --white-trans-80: rgb(255 255 255 / 80%);

    /* Schwarz transparent */
    --black-trans-10: rgb(0 0 0 / 10%);
    --black-trans-30: rgb(0 0 0 / 30%);
    --black-trans-50: rgb(0 0 0 / 50%);
    --black-trans-80: rgb(0 0 0 / 80%);

    /* Typografie */
    --h-size:       3vw;
    --h-lineheight: 1.35em;
    --h-marbot:     0.9em;

    /* SVG-Pfeile */
    --arrow-black:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'><line x1='1' y1='5' x2='10' y2='5' stroke='rgb(0,0,0)' stroke-width='1.5' stroke-linecap='round'/><polyline points='7,1 13,5 7,9' fill='none' stroke='rgb(0,0,0)' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/></svg>");
    --arrow-white:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'><line x1='1' y1='5' x2='10' y2='5' stroke='rgb(255,255,255)' stroke-width='1.5' stroke-linecap='round'/><polyline points='7,1 13,5 7,9' fill='none' stroke='rgb(255,255,255)' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/></svg>");
    --arrow-primary: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'><line x1='1' y1='5' x2='10' y2='5' stroke='rgb(181,199,81)' stroke-width='1.5' stroke-linecap='round'/><polyline points='7,1 13,5 7,9' fill='none' stroke='rgb(181,199,81)' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/></svg>");
}


/* =============================================
   Fonts
   ============================================= */

/* merriweather-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/merriweather-v33-latin-regular.woff2') format('woff2');
}
/* merriweather-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/merriweather-v33-latin-700.woff2') format('woff2');
}
/* montserrat-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}
/* montserrat-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2');
}

/* =============================================
   Links & Transitions
   ============================================= */

a,
a:hover {
    transition: all 0.2s ease;
    text-decoration: none;
}


/* =============================================
   Layout-Utilities
   ============================================= */

.align_h { display: flex; align-items: center;    justify-content: space-between; }
.align_v { display: flex; flex-direction: column; justify-content: space-between; }
.align_t { display: flex; align-items: start;     justify-content: space-between; }
.align_b { display: flex; align-items: end;       justify-content: space-between; }

.fullsize {
    position:   relative;
    width:      100%;
    height:     100%;
    overflow:   hidden;
}

.clear  { clear: both; }
.nobr   { white-space: nowrap; }
.right  { text-align: right; }
.left   { text-align: left; }
.center { text-align: center; }

.shadow  { box-shadow: 0 0 15px rgb(0 0 0 / 25%); }
.spacing { letter-spacing: .2em; }
.col2    { column-count: 2; column-gap: 50px; }

.uppercase { text-transform: uppercase; }

.bottom              { position: relative; padding-bottom: 20px !important; }
.bottom a.btn        { position: absolute; bottom: 0; left: 16px; }

.linedown {
    position: absolute;
    top:    0;
    right:  0;
    height: 100px;
    width:  1px;
}


/* =============================================
   Zoom
   ============================================= */

.zoom,
.zoom a {
    overflow: hidden;
    position: relative;
    line-height: 0;
    border-radius: 12px;
}

:is(.zoom, .zoom a) img {
    width:    100%;
    height:   auto;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.zoom:hover img {
    transform: scale(1.05);
}

.zoom.visible,
.zoom.visible a {
    overflow: visible;
}


/* =============================================
   Custom Cursor
   ============================================= */

#page .portfolio-item img,
#project .portfolio-item img {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23b5c751' fill-opacity='0.5'/%3E%3Cline x1='20' y1='13' x2='20' y2='27' stroke='white' stroke-width='2.5'/%3E%3Cline x1='13' y1='20' x2='27' y2='20' stroke='white' stroke-width='2.5'/%3E%3C/svg%3E") 20 20, zoom-in;
}

#team img,
#indexprojects .js-parallax img,
#projects .portfolio-item img,
#services a.bg-black-trans-40 {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%23b5c751' fill-opacity='0.5'/%3E%3Cline x1='10' y1='20' x2='25' y2='20' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpolyline points='20%2C14 27%2C20 20%2C26' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 20 20, pointer;
}


/* =============================================
   Farb-Utilities
   ============================================= */

/* Schriftfarben */
.font-white     { color: var(--white); }
.font-black     { color: var(--black); }
.font-grey      { color: var(--grey); }
.font-primary   { color: var(--primary); }
.font-secondary { color: var(--secondary); }
.font-white-trans-50 { color: var(--white-trans-50); }

/* Hintergrundfarben */
.bg-white          { background-color: var(--white); }
.bg-black          { background-color: var(--black); }
.bg-grey           { background-color: var(--grey); }
.bg-primary        { background-color: var(--primary); }
.bg-primary-light  { background-color: var(--primary-light); }
.bg-secondary      { background-color: var(--secondary); }

.bg-white-trans-10 { background-color: var(--white-trans-10); }
.bg-white-trans-30 { background-color: var(--white-trans-30); }
.bg-white-trans-50 { background-color: var(--white-trans-50); }
.bg-white-trans-80 { background-color: var(--white-trans-80); }

.bg-black-trans-10 { background-color: var(--black-trans-10); }
.bg-black-trans-30 { background-color: var(--black-trans-30); }
.bg-black-trans-50 { background-color: var(--black-trans-50); }
.bg-black-trans-80 { background-color: var(--black-trans-80); }


/* Gutenberg-Farben */
.has-white-color         { color: var(--white); }
.has-black-color         { color: var(--black); }
.has-grey-color          { color: var(--grey); }
.has-primary-color       { color: var(--primary); }
.has-primary-light-color { color: var(--primary-light); }
.has-secondary-color     { color: var(--secondary); }

.has-white-background-color           { background-color: var(--white); }
.has-black-background-color           { background-color: var(--black); }
.has-grey-background-color            { background-color: var(--grey); }
.has-primary-background-color         { background-color: var(--primary); }
.has-primary-light-background-color   { background-color: var(--primary-light); }
.has-secondary-background-color       { background-color: var(--secondary); }

.has-tuerkisblau-gradient-background { background: linear-gradient(var(--primary), var(--secondary)); }
.has-blautuerkis-gradient-background { background: linear-gradient(var(--secondary), var(--primary)); }

/* Linkfarben in farbigen Überschriften */
:is(h1, h2, h3).font-primary a,
a :is(h1, h2, h3).font-primary,
a.font-primary :is(h1, h2, h3) { color: var(--primary) !important; }

:is(h1, h2, h3).font-primary a:hover,
a:hover :is(h1, h2, h3).font-primary,
a:hover.font-primary :is(h1, h2, h3) { color: var(--white) !important; }


/* =============================================
   Typografie – Überschriften
   ============================================= */

:is(h1, h2, h3, h4, div.h1, div.h2, div.h3, a.h1, a.h2, a.h3) { font-style: normal; font-family: 'Merriweather'; font-weight: 400; display: block; }
:is(h1, h2, h3, h4, h5, h6) :is(b, strong) { font-weight: 700; }

:is(h1, h2, h3, h4, h5, h6, div.h1, div.h2, div.h3, div.h4, div.h5, div.h6).font-montserrat { font-family: 'Montserrat'; }

h1 { font-size: var(--h-size);                    line-height: calc(var(--h-lineheight) * 0.95); margin-bottom: calc(var(--h-marbot) * 0.5); }
h2 { font-size: calc(var(--h-size) * 0.70);       line-height: calc(var(--h-lineheight) * 0.95); margin-bottom: var(--h-marbot); }
:is(h3, h4, h5, h6) { font-size: calc(var(--h-size) * 0.45);       line-height: var(--h-lineheight); margin-bottom: var(--h-marbot); }

/* Überschriften im Content-Bereich */
.content h1 { font-size: calc(var(--h-size) * 0.8);   line-height: calc(var(--h-lineheight) * 0.95); margin-bottom: var(--h-marbot); }
.content h2 { font-size: calc(var(--h-size) * 0.45);   line-height: calc(var(--h-lineheight) * 0.95);             margin-bottom: var(--h-marbot); }
.content h3 { font-size: calc(var(--h-size) * 0.35);   line-height: calc(var(--h-lineheight) * 0.95);             margin-bottom: calc(var(--h-marbot) * 1.2); }
.content :is(h4, h5, h6) { font-size: calc(var(--h-size) * 0.30);   line-height: var(--h-lineheight);             margin-bottom: calc(var(--h-marbot) * 1.3); }

/* div mit Überschriften-Anmutung */
div.h1, a.h1 { font-size: calc(var(--h-size) * 0.60); line-height: calc(var(--h-lineheight) * 0.95); }
div.h2, a.h2 { font-size: calc(var(--h-size) * 0.45); line-height: calc(var(--h-lineheight) * 0.95); }
div.h3, a.h3 { font-size: calc(var(--h-size) * 0.35); line-height: calc(var(--h-lineheight) * 0.95); }
div:is(.h4, .h5, .h6), a:is(.h4, .h5, .h6) { font-size: calc(var(--h-size) * 0.30); line-height: calc(var(--h-lineheight) * 1.2); }

/* Überschriften in Fließtext-Bereichen */
:is(#page, #single) .content.text h1 { font-size: 3.2vw;   line-height: 1.2em;  margin-bottom: 0.75em; }
:is(#page, #single) .content.text h2 { font-size: 1.65rem; line-height: 1.45em; }
:is(#page, #single) .content.text h3 { font-size: 1.5rem;  line-height: 1.45em; }
:is(#page, #single) .content.text h4,
:is(#page, #single) .content.text h5,
:is(#page, #single) .content.text h6 { font-size: 1.35rem; line-height: 1.45em; }

/* =============================================
   Typografie – Allgemein
   ============================================= */

b, strong { font-weight: 700; }
em        { font-style: italic; }
u         { text-decoration: underline; }
sub       { vertical-align: sub; font-size: .7em; line-height: 1em; }
time      { display: block; }

div.round,
a.round   { border-radius: 12px; }
img.round { border-radius: 8px; }
.nomar { margin: 0 !important; }
.nopad { padding: 0 !important; }

.overlay-blue { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgb(64 95 131 / 50%); }

/* Icon-Font */
i {
    margin-right: .5em;
    font-size: .9em;
    font-family: 'simple-line-icons';
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    text-decoration: inherit;
    text-align: center;
}

.icon-arrow-left::before  { content: "\e605"; }
.icon-arrow-right::before { content: "\e606"; }

/* Trennlinien */
hr {
    height:     1px;
    width:      100px;
    border:     0;
    background: var(--primary);
    margin:     50px auto 50px 0;
    text-align: left;
}

hr.wp-block-separator {
    height:     1px;
    width:      100%;
    border:     0;
    background: var(--primary);
    margin:     50px auto 50px 0;
}

hr.small {
    height:     1px;
    width:      40px;
    border:     0;
    background: var(--primary);
    margin:     15px auto 15px 0;
}

.font-white hr,
hr.white { background: var(--white-trans-30); }


/* =============================================
   Text-Komponente
   ============================================= */

.text                   { font-size: 1rem; line-height: 1.6em; }
.text p                 { margin-bottom: 1.6rem; }
.text p:last-child      { margin-bottom: 0; }
.text p.has-background  { padding: 20px 25px 25px; }

.text ul             { margin: 0 0 1.7rem 1.2rem; padding: 0; }
.text ul li          { list-style-type: square; list-style-position: outside; line-height: 1.6em; margin-bottom: .3em; }
.text ul ul          { margin-bottom: 0; margin-left: 2rem; }

.text ol             { margin: 0 0 1.5rem 1.1rem; padding: 0; }
.text ol li          { list-style-type: decimal; list-style-position: outside; }
.text ol ol          { margin-bottom: 0; margin-left: 2rem; }

.text .small,
.text.small,
small                { font-size: .85rem; line-height: 1.35em; }

.text .verysmall,
.text.verysmall,
.has-small-font-size { font-size: .7rem; line-height: 1.4em; }

.text blockquote {
    font-size:     1.4em;
    line-height:   1.25em;
    margin-bottom: 1.75rem;
    padding-left:  1.5rem;
    font-weight:   300;
    color:         var(--primary);
    border-left:   2px solid var(--primary);
}
.text blockquote p    { margin-bottom: 1.1rem; }
.text blockquote cite { font-size: .9rem; font-style: normal; }

.text p a         { color: var(--black); font-weight: 700; }
.text p a:hover   { color: var(--primary); }
.text a:focus-visible { outline: 0; background: var(--black); color: var(--white) !important; }

.font-white .text a,
.font-white.text a,
.font-white .text a:visited,
.font-white.text a:visited { color: var(--white); }

.font-white .text a:hover,
.font-white.text a:hover   { color: var(--primary); }

/* Text-Reveal */
.content .text-reveal          { font-size: calc(var(--h-size) * 0.75); line-height: calc(var(--h-lineheight) * 0.95); border-top: 1px solid var(--white-trans-30); border-bottom: 1px solid var(--white-trans-30); padding: 2rem 0; margin-bottom: 1.75rem; }
.content .text-reveal strong   { color: var(--white); }
.content .text-reveal .word    { opacity: 0.2; display: inline-block; }


/* =============================================
   Gutenberg – Blöcke
   ============================================= */

.text .wp-block-pullquote,
.text .wp-block-pullquote.is-style-solid-color blockquote { max-width: 100% !important; text-align: left; }

.text .wp-block-pullquote      { margin: 0 0 1.1rem 0 !important; padding: 0 !important; }

.text .wp-block-columns        { margin-bottom: 1.6rem; }
:where(.wp-block-columns.is-layout-flex) { gap: 40px; }
.text .wp-block-columns .wp-block-column,
.text .wp-block-columns .wp-block-column .wp-block-columns { margin-bottom: 0; margin-top: 0; }
.text .wp-block-columns .wp-block-column .wp-block-columns .wp-block-column { margin-top: .55rem; margin-bottom: .55rem; }

.text .wp-block-image { margin-bottom: 1.65rem; }
.text .wp-block-image figcaption  { padding: 0.65rem; margin-bottom: 1em; font-size: .9rem; line-height: 1em; }
.text.bg-lightgrey .wp-block-image figcaption { background: var(--white); }

/* Content-Bilder */
.content img                      { width: 100%; height: auto; border-radius: 12px; }
.content .wp-block-file a[href*=".pdf"] { padding: 6px 0 4px 30px; margin-bottom: .5rem; background: transparent url(../images/pdf.png) no-repeat left; line-height: 2em; }

.content.text figure.alignleft.size-full  { width: calc(50% - 15px); margin-right: 30px; }
.content.text figure.alignright.size-full { width: calc(50% - 15px); margin-left: 30px; }

.content.text figure.alignleft.size-full figcaption,
.content.text figure.alignright.size-full figcaption { margin: 0; }

.content.text figure.alignleft.size-full.is-resized  { width: auto; margin-right: 30px; }
.content.text figure.alignright.size-full.is-resized { width: auto; margin-left: 30px; }


/* =============================================
   Tabelle
   ============================================= */

table {
    display:         table;
    width:           100%;
    max-width:       100%;
    border-spacing:  0;
    border-collapse: collapse;
    font-size:       .9rem;
}

table tr           { display: table-row; border-bottom: 1px dotted var(--black); }
table tr:last-child { border-bottom: none; }
table thead        { border-bottom: 3px solid var(--black); }

table tr th {
    display:     table-cell;
    text-align:  left;
    font-weight: 700;
    padding:     0 10px 10px;
}
table tr th:first-child { padding-left: 0; }
table tr th:last-child  { padding-right: 0; }

table tbody { display: table-row-group; border-bottom: 1px solid var(--black); }

table tr td {
    display:      table-cell;
    padding:      10px;
    border-right: 1px dotted var(--black);
    line-height:  1.35em;
}
table tr td:first-child { padding-left: 0; }
table tr td:last-child  { border-right: 0; padding-right: 0; vertical-align: middle; }

table tfoot { display: table-row-group; border-bottom: 1px solid var(--black); }


/* =============================================
   Buttons
   ============================================= */

button { background: var(--white); }

a.btn           { display: inline-block; color: var(--secondary); font-size: 1rem; line-height: 1em; padding: 8px 10px; border: 2px solid var(--secondary); cursor: pointer; border-radius: 4px; }
a.btn.white     { color: var(--white); }
a.btn.large     { font-size: 1.2rem;  padding: 13px 25px 13px 22px; margin-top: .5em; }
a.btn.small     { font-size: .85rem;  line-height: .85em; padding: 7px 10px 7px 7px; }
a.btn.verysmall { font-size: .65rem;  line-height: .65em; padding: 5px 10px 5px 7px; }

a.btn:hover     { color: var(--primary); border: 2px solid var(--primary); }

/* =============================================
   Gutenberg – Button-Block
   ============================================= */

.wp-block-button {
    color:   var(--white);
    margin:  0 !important;
    display: inline-block;
}

.wp-block-button__link {
    background-color: transparent !important;
    color:            var(--secondary) !important;
    border:           2px solid var(--secondary) !important;
    border-radius:    4px !important;
    box-shadow:       none !important;
    cursor:           pointer !important;
    display:          inline-block !important;
    font-size:        1rem !important;
    line-height:      1rem !important;
    margin:           0 0 1em !important;
    padding:          8px 10px 8px 6px !important;
    text-align:       center !important;
    text-decoration:  none !important;
    text-transform:   none !important;
    overflow-wrap:    break-word !important;
}

.wp-block-button__link::before {
    font-family:  'simple-line-icons';
    font-size:    .8em !important;
    content:      "\e606";
    margin-right: .5em;
}

.wp-block-button__link:hover {
    color:      var(--primary) !important;
    border:     2px solid var(--primary) !important;
}

/* Animierter Gutenberg-Button */
.wp-block-button.btn.ani a.wp-block-button__link {
    margin:     0 !important;
    padding:    0 !important;
    background: none !important;
    color:      var(--black) !important;
}

.wp-block-button.btn.ani a.wp-block-button__link:hover              { color: var(--primary) !important; }
header#start .wp-block-button.btn.ani a.wp-block-button__link:hover  { color: var(--white) !important; }

.font-white .wp-block-button.btn.ani a.wp-block-button__link         { color: var(--white) !important; }
.font-white .wp-block-button.btn.ani a.wp-block-button__link:hover   { color: var(--primary) !important; }


/* =============================================
   Accordeon
   ============================================= */

.accordion-item {
    border-bottom: 1px solid #dcdcde;
}

.accordion-trigger {
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 14px 0;
    margin: 0;
    position: relative;
    padding-right: 24px;
}

.accordion-trigger::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    font-size: 20px;
    line-height: 1;
}

.accordion-item.is-open .accordion-trigger::after {
    content: '−';
}

.accordion-content {
    display: none;
    padding-bottom: 14px;
}

.toggle {
    border: 2px solid var(--secondary);
    border-radius: 4px;
}

.toggle:hover,
.toggle:has(.list-toggle.is-open) {
    border-color: var(--primary);
}

.list-content {
    display: block;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.text .list-content ul { 
    padding: 1rem 1rem 1rem 2.25rem;
    margin: 0;
    background: var(--primary-light);
}

.list-toggle { 
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px; 
    position: relative;
    color: var(--secondary);
}

.list-toggle:hover,
.list-toggle.is-open { 
    color: var(--primary);
}

.list-toggle::after {
    content: '+';
    font-size: 1.3rem;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.list-toggle.is-open::after {
    content: '-';
}