/* The Boathouse Consulting – Nachbau der Squarespace-Gestaltung (Raster, Schriften, Farben, Buttons) */
@import url("https://fonts.googleapis.com/css2?family=Pontano+Sans&display=swap");
@font-face { font-family: "Arizona"; src: url("fonts/ABCArizonaSerif-Regular.woff") format("woff"); font-display: swap; }
@font-face { font-family: "America"; src: url("fonts/GT-America-Standard-Regular.woff") format("woff"); font-display: swap; }

:root {
  --navy: #273746;
  --lime: #d2ff29;
  --stone: #cbc9c6;
  --white: #fff;
  --sqs-site-gutter: 4vw;
  --sqs-mobile-site-gutter: 6vw;
  --sqs-site-max-width: 1400px;
  --step: min(1.2vw, 16.8px);    /* Squarespace-Schriftskala: (Wert - 1) * 1.2vw + 1rem, gedeckelt bei 1400px */
  --header-h: 73px;
  --step-small: 1.2vw;           /* Werte unter 1 (kleiner Text, kleine Buttons) werden ungedeckelt skaliert */
}
@media (max-width: 767px) { :root { --step: calc(.012 * min(100vh, 900px)); --step-small: var(--step); } }

* { box-sizing: border-box; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--white); color: var(--navy); font-family: "Pontano Sans", sans-serif; font-size: 1rem; line-height: 1.5; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- Typografie ---------- */
h1, h2, h4 { font-family: "Arizona", Georgia, serif; font-weight: 400; margin: 0; }
h3, p { font-family: "America", "Helvetica Neue", Arial, sans-serif; font-weight: 400; margin: 0; }
h1 { font-size: calc((5.6 - 1) * var(--step) + 1rem); line-height: .98; }
h2 { font-size: calc((3.8 - 1) * var(--step) + 1rem); line-height: 1.066; }
h3 { font-size: calc((2.4 - 1) * var(--step) + 1rem); line-height: 1.133; }
h4 { font-size: calc((1.7 - 1) * var(--step) + 1rem); line-height: 1.166; }
p { font-size: 1rem; line-height: 1.5; }
.sqsrte-large p, p.sqsrte-large { font-size: calc((1.5 - 1) * var(--step) + 1rem); }
.sqsrte-small p, p.sqsrte-small { font-size: calc(1rem - .1 * var(--step-small)); }
.sqs-html-content > * { margin: 1rem 0; }
.sqs-html-content > h1, .sqs-html-content > h2, .sqs-html-content > h3, .sqs-html-content > h4 { margin: 2rem 0; }
.sqs-html-content > :first-child { margin-top: 0; }
.sqs-html-content > :last-child { margin-bottom: 0; }
.sqs-html-content ul, .sqs-html-content ol { padding-left: 40px; }
.sqs-html-content li > p { margin: 7px 0; }
.sqs-html-content a { text-decoration: underline; text-underline-offset: 2px; }
.sqsrte-text-color--white { color: #fff; }
.sqsrte-text-color--lightAccent { color: var(--lime); }
.sqsrte-text-color--darkAccent { color: var(--stone); }
.sqsrte-text-highlight { background: var(--lime); color: var(--navy); }

/* ---------- Header ---------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sqs-site-gutter);
}
.site-header .logo img { height: 30px; width: auto; }
.site-header nav { display: flex; gap: 26px; }
.site-header nav a { color: #fff; text-decoration: none; font-size: 1rem; letter-spacing: .01em; }
.site-header nav a:hover, .site-header nav a[aria-current] { text-decoration: underline; text-underline-offset: 4px; }
.menu-toggle, .menu-btn { display: none; }

/* ---------- Abschnitte ---------- */
.page-section { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.page-section.vertical-alignment--bottom { justify-content: flex-end; }
.section-border { position: absolute; inset: 0; z-index: 0; }
.section-background { position: absolute; inset: 0; background: var(--section-bg, #fff); }
.section-background img { width: 100%; height: 100%; object-fit: cover; }
.section-background-overlay { position: absolute; inset: 0; background: var(--navy); opacity: var(--overlay, .15); }
.content-wrapper { position: relative; z-index: 1; width: 100%; }
.content-wrapper { padding: var(--pad, 0) 0; }
.section-height--small { min-height: 33vh; --pad: 3.3vmax; }
.section-height--medium { min-height: 66vh; --pad: 6.6vmax; }
.section-height--large { min-height: 100vh; --pad: 10vmax; }
/* erster Abschnitt: Platz für den darüberliegenden Header */
main section.page-section:first-of-type { padding-top: var(--header-h); }
.vertical-alignment--bottom > .content-wrapper { padding-top: calc(var(--pad, 0px) * 2); padding-bottom: var(--sqs-site-gutter); }

/* Farbthemen der Abschnitte */
.page-section { --section-bg: #fff; color: var(--navy); --head: var(--navy); --btn-bg: var(--navy); --btn-fg: #fff; --tert: var(--navy); }
.page-section[data-section-theme="white"] { --section-bg: #fff; }
.page-section[data-section-theme="light"] { --section-bg: var(--stone); }
.page-section[data-section-theme="black"] { --section-bg: var(--navy); color: #fff; --head: #fff; --btn-bg: #fff; --btn-fg: #000; --tert: #fff; }
.page-section[data-section-theme="black-bold"] { --section-bg: var(--navy); color: #fff; --head: var(--lime); --btn-bg: #fff; --btn-fg: #000; --tert: var(--lime); }
.page-section h1, .page-section h2, .page-section h3, .page-section h4 { color: var(--head); }
.page-section[data-section-theme="black-bold"] h3 { color: #fff; }

/* ---------- Fluid-Engine-Raster (Spalten/Zeilen kommen aus den <style>-Blöcken je Abschnitt) ---------- */
.fluid-engine { width: 100%; }
.fe-block { position: relative; display: flex; min-width: 0; }
.fe-block > .sqs-block { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0 !important; }
.sqs-block-content { width: 100%; height: 100%; }
.sqs-block-html .sqs-block-content, .sqs-block-code .sqs-block-content { height: auto; }

/* Bilder füllen ihre Rasterzelle mit dem gewählten Fokuspunkt */
.sqs-block-image .sqs-block-content,
.fluid-image-component-root, .fluid-image-animation-wrapper, .fluid-image-container,
.js-content-mode-element-wrapper, .js-content-mode-element { width: 100%; height: 100%; position: relative; }
.fluid-image-container { overflow: hidden; }
.content-fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.content-fit img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fluidImageOverlay { display: none; }

/* ---------- Buttons ---------- */
.sqs-block-button-container { display: flex; width: 100%; height: 100%; }
.sqs-block-button-container--center { justify-content: center; }
.sqs-block-button-container--left { justify-content: flex-start; }
.sqs-block-button-element, form.contact button {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; cursor: pointer;
  font-family: "America", "Helvetica Neue", Arial, sans-serif; border: 0; border-radius: 0; transition: opacity .15s;
}
.sqs-block-button-element:hover { opacity: .8; }
.sqs-stretched, .fe-block .sqs-block-button-element { width: 100%; }
.fe-block .sqs-button-element--primary { height: 100%; }
.sqs-button-element--primary, form.contact button {
  background: var(--btn-bg); color: var(--btn-fg); font-size: 1rem; letter-spacing: .02em; text-transform: uppercase;
  padding: 1.4em 2.338em; line-height: 1.2;
}
.sqs-button-element--tertiary {
  background: transparent; color: var(--tert); border: 1px solid var(--tert);
  font-size: calc(1rem - .25 * var(--step-small)); line-height: 1.2; padding: .6em 1em;
}

/* ---------- Akkordeon (Glossar klein, Werte auf "Über uns" groß) ---------- */
.accordion-items-container { list-style: none; margin: 0; padding: 0; }
.accordion-divider { height: 1px; background: currentColor; opacity: .2; }
.accordion-item__click-target { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px 0; cursor: pointer; }
.accordion-item__title { font-family: "America", sans-serif; font-size: 1rem; }
[data-wrapper="h4"] .accordion-item__click-target { padding: 30px 0; }
[data-wrapper="h4"] .accordion-item__title { font-family: "Arizona", Georgia, serif; font-size: calc((1.7 - 1) * var(--step) + 1rem); line-height: normal; }
.accordion-item:has([data-wrapper="h4"]) .accordion-divider { opacity: .5; }
.accordion-icon-container { position: relative; width: 14px; height: 14px; flex: none; }
.arrow { width: 9.9px; height: 9.9px; margin: 0 auto; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2.5px) rotate(45deg); transition: transform .2s; }
.accordion-item.open .arrow { transform: translateY(2.5px) rotate(-135deg); }
.accordion-icon-container:has(.plus) { width: 24px; height: 24px; }
.plus__horizontal-line, .plus__vertical-line { position: absolute; top: 11.5px; left: 0; width: 24px; height: 1px; background: currentColor; transition: transform .2s; }
.plus__vertical-line { transform: rotate(90deg); }
.accordion-item.open .plus__vertical-line { transform: rotate(0deg); }
.accordion-item__dropdown { display: none; }
.accordion-item.open .accordion-item__dropdown { display: block; }
.accordion-item__description { margin: 14px 0; padding-bottom: 15px; }
p[data-rte-preserve-empty]:empty::before { content: "\200b"; }

/* ---------- Laufband (Werte auf der Startseite) ---------- */
.Marquee { overflow: hidden; width: 100%; }
.Marquee-display > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.Marquee-measure { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.Marquee-item { white-space: nowrap; padding-right: .8em; }
.Marquee-item:nth-child(even) { color: var(--stone) !important; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .Marquee-measure { animation: none; } }
.v6-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Social-Icons ---------- */
.sqs-svg-icon--outer { display: inline-block; width: 32px; height: 32px; background: currentColor;
  -webkit-mask: url("images/linkedin.svg") center / 60% no-repeat; mask: url("images/linkedin.svg") center / 60% no-repeat; }
.social-icons-color-black .sqs-svg-icon--outer { background-color: var(--lime); }
.sqs-svg-icon--wrapper { display: inline-block; }

/* ---------- Formular ---------- */
form.contact { display: grid; gap: 16px; width: 100%; }
form.contact label { display: grid; gap: 6px; font-family: "America", sans-serif; }
form.contact label span { opacity: .7; font-size: .85em; }
form.contact input, form.contact textarea { font: inherit; padding: 12px; border: 1px solid var(--stone); background: #fafafa; color: var(--navy); }
form.contact button { justify-self: start; }
form.contact .hp { display: none; }

/* Code-Blöcke (Datenschutz): gleiche Textabstände wie Textblöcke */
.sqs-code-container p, .sqs-code-container ul, .sqs-code-container ol { margin: 1rem 0; }
.sqs-code-container h1, .sqs-code-container h2, .sqs-code-container h3, .sqs-code-container h4 { margin: 2rem 0; }

/* Datenschutz-Generator: Platzhaltertext ausblenden */
.dsg-license-content-blurred { display: none; }

/* ---------- Footer ---------- */
.site-footer .page-section { --section-bg: var(--navy); }

/* ---------- Mobil ---------- */
@media (max-width: 767px) {
  .site-header { padding: 0 var(--sqs-mobile-site-gutter); }
  .site-header .logo img { height: 24px; }
  .menu-btn { display: grid; gap: 6px; width: 28px; cursor: pointer; }
  .menu-btn span { display: block; height: 2px; background: #fff; }
  .site-header nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--navy); padding: 12px var(--sqs-mobile-site-gutter) 24px; }
  .site-header nav a { font-size: 1.6rem; padding: 10px 0; font-family: "Arizona", serif; }
  .menu-toggle:checked ~ nav { display: flex; }
}