:root {
   /* Main color variants */
   --main: #14bbbb;
   --main-light: #6ee4e4;
   --main-dark: #398080;

   /* Contrast color variants */
   --contrast: #ff3d00;
   --contrast-light: #ff6a00;
   --contrast-dark: rgb(226, 124, 0);

   /* Grey scale */
   --grey-100: #f8f9fa;
   --grey-200: #e9ecef;
   --grey-300: #dee2e6;
   --grey-400: #ced4da;
   --grey-500: #adb5bd;
   --grey-600: #6c757d;
   --grey-700: #495057;
   --grey-800: #343a40;
   --grey-900: #212529;

   /* Status colors */
   --success: #1fab2b;
   --warning: #f1c40f;
   --error: #e74c3c;

   /* Typography */
   --font-base: 'Montserrat', sans-serif;

   /* Shape & motion */
   --radius: 4px;
   --transition-fast: 0.15s ease-in-out;

      /* Layout */
   --container-max: 1400px;
   --container-padding: 24px;

   /* Spacing scale */
   --space-xs: 8px;
   --space-sm: 16px;
   --space-md: 24px;
   --space-lg: 48px;
   --space-xl: 80px;

   /* Typography scale */
   --font-size-base: 16px;
   --font-size-sm: 14px;
   --font-size-lg: 20px;
   --font-size-xl: 28px;
   --font-size-2xl: 40px;

   --line-height-base: 1.6;
   --line-height-heading: 1.2;
}

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v31-latin-500.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v31-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v31-latin-700.woff2') format('woff2');
}
/* ---------------------------------------------------------------------
   Basis-Layout, Typografie und Spacing für alle Seiten.
   Farben/Variablen kommen aus global.css.
   --------------------------------------------------------------------- */

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

body, html {
   margin: 0;
   padding: 0;
   font-family: var(--font-base);
}

html {
   font-size: var(--font-size-base);
}

body {
   color: var(--grey-900);
   line-height: var(--line-height-base);
   background: white;
}

h1, h2 { font-family: var(--font-heading); }

h1, h2, h3, h4 {
   line-height: var(--line-height-heading);
   font-weight: 700;
   color: var(--grey-900);
}

h1 {
   font-size: var(--font-size-2xl);
}

h2 {
   font-size: var(--font-size-xl);
   margin-bottom: var(--space-sm);
}

h3 {
   font-size: var(--font-size-lg);
   margin-bottom: var(--space-xs);
}

p {
   margin-bottom: var(--space-sm);
}

p:last-child {
   margin-bottom: 0;
}

a {
   color: inherit;
}

/* Links inside body text (not .btn) get a visible style */
.content a:not(.btn) {
   color: var(--main-dark);
   text-decoration: underline;
}

.content a:not(.btn):hover,
.content a:not(.btn):focus-visible {
   color: var(--main);
}

.icon-rotating {
  animation: rotateOnce 0.8s ease-in-out;
}

[bind-function]:not(.lb-initialized) {
   visibility: hidden;
 }

 @keyframes rotateOnce {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}


/* ---------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------- */

.container {
   width: 100%;
   max-width: var(--container-max);
   margin: 0 auto;
   padding-left: var(--container-padding);
   padding-right: var(--container-padding);
}

.section {
   padding-top: var(--space-xl);
   padding-bottom: var(--space-xl);
}

.section-sm {
   padding-top: var(--space-lg);
   padding-bottom: var(--space-lg);
}

.section-grey {
   background: var(--grey-100);
}

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

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

@media (max-width: 768px) {
   :root {
      --font-size-2xl: 32px;
      --font-size-xl: 24px;
      --space-xl: 56px;
   }

   .container {
      padding-left: var(--space-sm);
      padding-right: var(--space-sm);
   }
}



/* ---------------------------------------------------------------------
   .btn
   --------------------------------------------------------------------- */


.btn {
   display: inline-block;
   border: 1px solid var(--main);
   padding: 8px 16px;
   border-radius: var(--radius);
   cursor: pointer;
   min-width: fit-content;
   text-align: center;
   text-decoration: none;
 }

.btn.default {
   background: linear-gradient(135deg, var(--main-light), var(--main));
   color: white;
}

.btn.large {
   padding: 12px 24px;
   font-size: 140%;
}

.btn.default:hover,
.btn.default:focus-visible {
   background: var(--main-dark);
   border-color: var(--main-dark);
}

.btn.inverted {
   background: white;
   color: var(--main);
}

.btn.inverted:hover,
.btn.inverted:focus-visible {
   background: var(--main-light);
}

.btn.contrast {
    border: 1px solid var(--contrast);
}

.btn.contrast.default {
   background: linear-gradient(135deg, var(--contrast-light), var(--contrast));
   color: white;
}

.btn.contrast.default:hover,
.btn.contrast.default:focus-visible {
   background: var(--contrast-dark);
   border-color: var(--contrast-dark);
}

.btn.contrast.inverted {
   background: white;
   color: var(--contrast);
}

.btn.contrast.inverted:hover,
.btn.contrast.inverted:focus-visible {
   background: var(--contrast-light);
   color: white;
}

.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}