#site-footer {
  display: none;
}

/*
 * ═══════════════════════════════════════════════════════════
 * FASTEN-SYLT – Globales CSS
 * ═══════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────
   CSS VARIABLEN
───────────────────────────────────────────────────────── */

:root {
  
  --sylt-sand-light: #eadfca;  /* heller Strand / Hintergrund */
  --sylt-sand:       #d8c79f;  /* natürlicher Sylter Sand */
  --sylt-dune:       #b9a77e;  /* Düne / Akzent */
  --sylt-grass:      #8f9b73;  /* Dünengras */
  --sylt-sea:        #6f9ca3;  /* Nordsee */
  --sylt-sky:        #dbe8ea;  /* heller Himmel */
  
  
  /* Hintergründe */
  --main-bg-color: #eadfca; /* #f7f2e1 */
  --main-bg-color2: white;

  /* Rot / Burgunder */
  --main-red-color: #6d1a34;
  --main-red2-color: #460f22;

  /* Blau */
  --main-blue-color: #5e87b6;
  --main-blue-color2: #6d92ba;
  --main-blue-color3: #e8f2f8;
  --main-blue-dark: #3d6a9a;

  --red: #6d1a34;
  --red2: #460f22;

  /* Erdbraun */
  --earth: #7a5c3a;
  --earth-dark: #5a3f24;

  /* Neutral */
  --charcoal: #28201a;
  --muted: #6b6b5e;
  --border: rgba(109, 26, 52, 0.1);
  --link-color: blue;
  --bdr: #f2f2f2;

  /* Typografie */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --serif: "Cormorant Garamond", Georgia, serif;

  --font-sans: "DM Sans", system-ui, sans-serif;
  --sans: "DM Sans", system-ui, sans-serif;

  /* Abstände */
  --radius: 2px;
  --radius-pill: 999px;

  --navy: #1e3a5f;
  --navy-light: #2a5080;
  --teal: #2e7d6b;
  --teal-light: #5e87b6;
  --sand: #f5f1eb;
  --sand-dark: #ede8df;
  --white: #ffffff;
  --text: #1a1a1a;
  --text-mid: #4a5568;
  --text-muted: #718096;
  --border: #ddd8cf;

  --cream: #f7f2e1;
  --cream2: #ede8d5;
  --dark: #1e3a5f !important;

  --focus: #ede8df;

  --form-color: #DECCAB;
  --color-hover: #afeeee;

  --color-buchinger: #0000ff;
  --color-basenfasten: #ff6c0f;
  --color-vitalfasten: #008000;

  /* ── Abstand unter der Navigation (zentral steuerbar) ──────────
     --nav-gap regelt den Abstand zwischen Nav-Unterkante und erstem
     Inhalt auf ALLEN Seiten an einer einzigen Stelle. */
  --nav-gap: 9rem;          /* Desktop: 96px */
  --nav-gap-mobile: 1rem;   /* Mobil:   16px */
  --section-spacing: 6rem;  /* Abstand ZWISCHEN den Sections */
  --nav-h: 73px;            /* echte Nav-Höhe; wird vom Banner-JS gesetzt */
}

/* ─────────────────────────────────────────────────────────
   HEADER
───────────────────────────────────────────────────────── */

#site-header {
  position: absolute;
  top: calc(100vh - 1px);
  right: 0;
  left: 0;
  z-index: 200;
  transition: none;
}

#site-header.is-fixed {
  position: fixed;
  top: 0;
  transform: unset;
}


/* ─────────────────────────────────────────────────────────
   Mein Hero
───────────────────────────────────────────────────────── */

.hero {
  text-align: center;
}


/* ─────────────────────────────────────────────────────────
   FONTS
───────────────────────────────────────────────────────── */

/* latin */
@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BMSo3Sup8.woff2)
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond/cormorant-garamond-v21-latin-300.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond/cormorant-garamond-v21-latin-300italic.woff2")
    format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond/cormorant-garamond-v21-latin-600.woff2")
    format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond/cormorant-garamond-v21-latin-italic.woff2")
    format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond/cormorant-garamond-v21-latin-regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans/dm-sans-v17-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans/dm-sans-v17-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans/dm-sans-v17-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ─────────────────────────────────────────────────────────
   RESET & BASIS
───────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  background: var(--main-bg-color);
  color: var(--charcoal);
  line-height: 1.7;
  opacity: 1;
}


img {
  display: block;
  max-width: 100%;
}

a {
  color: var(--main-red-color);
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: var(--main-red2-color);
}

/* ─────────────────────────────────────────────────────────
   TYPOGRAFIE
───────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 300;
  line-height: 1.2;
  color: var(--charcoal);
}

em {
  font-style: italic;
}

p {
  color: #555;
  line-height: 1.85;
}

blockquote {
	font-family: var(--serif);
	font-size:14px;
}

/* ─────────────────────────────────────────────────────────
   ZENTRALE SCHRIFTGRÖSSEN
───────────────────────────────────────────────────────── */

body {
  font-size: 15px;
}

h1, h2, h3, h4 {
  width: fit-content;
}


h1 {
	color: var(--main-red-color);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}

h1.text-center {
	width: 100%;  
}

h2 {
	color: var(--main-red-color);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}

h3 { 
	color: var(--main-red-color);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}

h4, h5 {
	color: var(--main-red-color);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}



.small {
  font-size:10px;
}


p,
li,
button,
input,
select,
textarea {
  font-size: 15px;
}

.eyebrow,
.section-label,
.eyebrow-center {
  font-size: 0.65rem;
}

.btn,
.fs-button,
.btn-link,
.small-font {
  font-size: 0.75rem;
}

.tag {
  font-size: 0.62rem;
}

.highlight p {
  font-size: 1.05rem;
}

.info-box-icon {
  font-size: 1rem;
}

.info-box p {
  font-size: 0.88rem;
}

.sidebar-card-head {
  font-size: 0.68rem;
}

.sidebar-card-body p,
.kontakt-item {
  font-size: 0.85rem;
}

.toc a {
  font-size: 0.72rem;
}

.own-icon {
  font-size: 10px;
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.55;
  }

  h1 {
    font-size: 2.2rem;
    line-height: 1.1;
  }

  h2 {
    font-size: 35px;
    line-height: 1.12;
  }

  h3 { 
    font-size: 25px;
    line-height: 1.12;
  }


  h4 {
    font-size:20px;
    line-height: 1.12;
  }

  p,
  li,
  button,
  input,
  select,
  textarea {
    font-size: 17px;
    line-height: 1.6;
  }
}


/* ── Abstand ZWISCHEN den Sections ──────────────────────────────── */
section {
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
  border-top: 1px dotted gray;
}

/* ── Erstes Inhaltselement: einheitlicher Abstand unter der Nav ────
   Gilt für normale Seiten (erste <section>) UND FIT-Interface-Seiten
   (.fit-interface-body). Zentral geregelt über --nav-gap.
   Hinweis: Liegt auf einer Seite ein <section id="page-banner"> als
   erste Section, hier zusätzlich auf "#page-banner + section" umstellen. */
section:first-of-type,
.fit-interface-body {
  padding-top: var(--nav-gap);
  border-top: 0;
}

#fitcPanel {
  padding:0pc !important;
}



.container , .fs-module__inner {
  max-width: 1250px;
  margin: 0 auto;
  padding: 0px 30px;
}

.eyebrow,
.section-label,
.eyebrow-center {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  color: var(--main-red-color);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.eyebrow::before,
.eyebrow::after,
.eyebrow-center::before,
.eyebrow-center::after,
.section-label::before,
.section-label::after
{
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
}

.eyebrow-center {
  justify-content: center !important;
}


.eyebrow-white {
  color: rgba(255, 255, 255, 0.45);
}

.eyebrow-white::before, .eyebrow-white::after {
  background: rgba(255, 255, 255, 0.25);
}

/* ─────────────────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.75rem 1.8rem;
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}

.btn:hover {
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

/* Rot (primär) */
.btn-red {
  background: var(--main-red-color);
  color: #fff;
  border-color: var(--main-red-color);
}
.btn-red:hover {
  background: var(--main-red2-color);
  border-color: var(--main-red2-color);
  color: #fff;
}

/* Blau */
.btn-blue {
  background: var(--main-blue-color);
  color: #fff;
  border-color: var(--main-blue-color);
}
.btn-blue:hover {
  background: var(--main-blue-dark);
  border-color: var(--main-blue-dark);
  color: #fff;
}

/* Erdbraun */
.btn-earth {
  background: var(--earth);
  color: #fff;
  border-color: var(--earth);
}
.btn-earth:hover {
  background: var(--earth-dark);
  border-color: var(--earth-dark);
  color: #fff;
}

/* Outline Rot */
.btn-outline-red {
  background: transparent;
  color: var(--main-red-color);
  border-color: rgba(109, 26, 52, 0.3);
}
.btn-outline-red:hover {
  background: var(--main-red-color);
  color: #fff;
  border-color: var(--main-red-color);
}

/* Weiß (auf dunklem Hintergrund) */
.btn-white {
  background: #fff;
  color: var(--main-red-color);
  border-color: #fff;
}
.btn-white:hover {
  background: var(--main-bg-color);
  border-color: var(--main-bg-color);
}

/* ─────────────────────────────────────────────────────────
   BADGES / TAGS
───────────────────────────────────────────────────────── */

.tag {
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 3px 8px;
  border-radius: var(--radius);
  display: inline-block;
  width: fit-content;
  line-height: 1.4;
}

.tag-red {
  background: var(--main-red-color);
}
.tag-blue {
  background: var(--main-blue-color);
}
.tag-earth {
  background: var(--earth);
}
.tag-dark {
  background: var(--charcoal);
}

/* Pill-Variante */
.tag-pill {
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.9rem;
}

/* ─────────────────────────────────────────────────────────
   KARTEN
───────────────────────────────────────────────────────── */

.card {
  background: var(--main-bg-color2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    border-color 0.2s,
    transform 0.2s;
}

.card:hover {
  border-color: var(--main-red-color);
  transform: translateY(-2px);
}

.card-body {
  padding: 1.5rem;
}

/* ─────────────────────────────────────────────────────────
   HIGHLIGHT-BOX
───────────────────────────────────────────────────────── */

.highlight {
  background: white;
  border-left: 3px solid var(--main-red-color);
  border-radius: 10px;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
}

.highlight p {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--main-red-color);
  margin: 0;
  line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────
   INFO-BOX
───────────────────────────────────────────────────────── */

.info-box {
  background: var(--main-bg-color2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.info-box-icon {
  color: var(--main-blue-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.info-box p {
  color: #666;
  margin: 0;
  line-height: 1.75;
  font-size: 14px;
  font-style: italic;
}

.info-badge {
	background:rgba(109,26,52,.07);
  color:#6d1a34;
  border-color:rgba(109,26,52,.18);
	letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 1px;
  border: 1px solid;
  display: inline-block;
  margin-bottom: 0.7rem;  
}

/* ─────────────────────────────────────────────────────────
   SIDEBAR-KARTEN
───────────────────────────────────────────────────────── */

.sidebar-card {
  background: var(--main-bg-color2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}

.sidebar-card-head {
  background: var(--main-red-color);
  padding: 0.85rem 1.2rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.sidebar-card-head.blue {
  background: var(--main-blue-color);
}
.sidebar-card-head.earth {
  background: var(--earth);
}
.sidebar-card-head.dark {
  background: var(--charcoal);
}

.sidebar-card-body {
  padding: 1.3rem;
}

.sidebar-card-body p {
  color: #777;
  line-height: 1.75;
  margin-bottom: 1rem;
}



/* ─────────────────────────────────────────────────────────
   KONTAKT-ITEMS
───────────────────────────────────────────────────────── */

.kontakt-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 0.6rem;
}

.kontakt-item .k-icon {
  color: var(--main-red-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.kontakt-item a {
  color: #555;
  text-decoration: none;
}

.kontakt-item a:hover {
  color: var(--main-red-color);
}

/* ─────────────────────────────────────────────────────────
   ANIMATIONEN
───────────────────────────────────────────────────────── */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-up {
  animation: fadeUp 0.6s ease both;
}
.fade-up-2 {
  animation: fadeUp 0.6s ease 0.1s both;
}
.fade-up-3 {
  animation: fadeUp 0.6s ease 0.2s both;
}
.fade-up-4 {
  animation: fadeUp 0.6s ease 0.3s both;
}


/* ─────────────────────────────────────────────────────────
   INHALTSVERZEICHNIS
───────────────────────────────────────────────────────── */

.toc {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.toc a {
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--main-red-color);
  text-decoration: none;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(109, 26, 52, 0.25);
  border-radius: 999px;
  transition: all 0.2s;
}

.toc a:hover {
  background: var(--main-blue-color);
  color: white !important;
  border-color: var(--main-blue-color);
}



/* ─────────────────────────────────────────────────────────
   EIGENES
───────────────────────────────────────────────────────── */

.no-display {
  display: none !important;
}

.text-center {
  text-align: center !important;
}

.white {
  background: var(--white) !important;
}

.fs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  font-family: var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;

  padding: 0.8rem 2rem;
  border: 2px solid var(--main-blue-color);
  border-radius: 2px;

  background: var(--main-blue-color);
  color: #fff !important;

  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.fs-button:hover {
  background: var(--navy);
  cursor: pointer;
}

.max-width {
  display: block;
  width: 100%;
}

.hovered:hover {
  background: var(--color-hover) !important;
  border-color: var(--main-blue-color) !important;
  transform: translateY(-2px) !important;
}

.small-font {
  line-height: 1.7;
  color: var(--muted);
}

.no-padding {
  padding: 0px !important;
}

a.link {
  color: blue !important;
  text-decoration: underline !important;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal:nth-of-type(2) {
  transition-delay: 0.08s;
}

.reveal:nth-of-type(3) {
  transition-delay: 0.16s;
}

.reveal:nth-of-type(4) {
  transition-delay: 0.24s;
}

.rounded {
  border: 1px solid gray;
  border-radius: 50%;
  padding: 25px;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.4rem 0.8rem;
  background: var(--cream);
  color: var(--red);
  border: 1px solid rgba(109, 26, 52, 0.2);
  border-radius: 2px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
  width: fit-content;
  margin-top: 20px;
}
.btn-link:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  cursor: pointer;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

html.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.own-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  padding: 4px;
  box-sizing: border-box;

  background: transparent;

  font-weight: 700;
  line-height: 1;

  color: inherit;
}

.no-border {
  border:0px !important;
}

.shadow {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}


.fit-interface-main .first, .fs-layout-aside__main.artikel section:first-child {
  padding-top: 0px !important;
}

.margin-3px {
	margin-top:-3px !important;
  margin-bottom:-3px !important;
}


/* ─────────────────────────────────────────────────────────
   RESPONSIVE HELFER
───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .cta-section {
    padding: 4rem 2rem;
  }

  .no-display-mobile,
  .fs-layout-aside__aside {
    display: none !important;
  }

  #site-header.is-fixed {
    top: 31px;
  }

  .container,
  .fs-module__inner {
    padding: 0 20px;
  }

  .responsive-grid {
    grid-template-columns: 1fr !important;
  }
}