/*
Theme Name: geraats
Author: millerwerke
Version: 1.0
*/


/* ============================================================
   RESET & ROOT
   1rem = 10px
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Figtree', sans-serif;
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1.35;
  color: rgb(255, 255, 255);
  background: rgb(255, 255, 255);
  overflow-x: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

address {
  font-style: normal;
  margin-bottom: 2rem;
}

ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1.7rem;
}

ul li {
  padding: 0 0 0 2rem;
  position: relative;
}

ul li::before {
  content: '·';
  font-weight: 600;
  position: absolute;
  left: 0;
}

p {
  margin-bottom: 1.6rem;
}

h1,.h1 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 2.4rem;
  hyphens: manual;
  overflow-wrap: break-word;
  word-break: normal;
}

h2,.h2 {
  font-size: 6rem;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 2.4rem;
  hyphens: manual;
  overflow-wrap: break-word;
  word-break: normal;
}

h3,.h3 {
  font-size: 4rem;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 3.2rem;
  hyphens: manual;
  overflow-wrap: break-word;
  word-break: normal;
}
.h3_spacer {
  display:block;
  font-size: 4rem;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  text-indent:-9999px;
}

/* ============================================================
   FARBEN
   #a4b2c5 → rgb(164, 178, 197)  – light-blue / hellblau
   #55708a → rgb(85, 112, 138)   – blue-dark / mittelblau
   #4d5d97 → rgb(77, 93, 151)    – navy / kräftigblau
   #dc5e73 → rgb(220, 94, 115)   – rose / rot
============================================================ */
:root {
  --light-blue: rgb(164, 178, 197);
  --blue-dark:  rgb(85, 112, 138);
  --navy:       rgb(77, 93, 151);
  --rose:       rgb(220, 94, 115);
  --white:      rgb(255, 255, 255);
}

.bg-light-blue { background-color: var(--light-blue); }
.bg-blue-mid   { background-color: var(--blue-dark);  }
.bg-navy       { background-color: var(--navy);        }
.bg-rose       { background-color: var(--rose);        }


/* ============================================================
   LAYOUT: .full & .half
============================================================ */
.full {
  width: 100%;
  position: relative;
  margin: 0 auto;
  margin-bottom: clamp(0.7rem, calc(0.367rem + 0.667vw), 1.4rem);
  max-width: 1550px;
}

.full.site-footer {
  margin-bottom: 0;
}

.half {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

/* .line .half {
	margin-bottom:-1px;
} */

.line hr.half {
	background-color:rgba(0,0,0,0.4);
	height:1px;
	border:none;
}


/* ============================================================
   HEADER
============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  border-bottom: clamp(0.7rem, calc(0.367rem + 0.667vw), 1.4rem) solid rgba(255,255,255,1);
  margin-bottom: 0;
}

.header-inner {
  max-width: 1550px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.header-meta {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  justify-content: space-between;
  width:100%;
  padding: 1.35rem 4.9%;
}

.header-meta p {
  margin-bottom:0.2rem;
}


/* ============================================================
   COLUMNS
============================================================ */
.col {
  flex: 0 0 50%;
  width: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: transparent;
  color: rgb(255, 255, 255);
}

.col.col-full {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: auto;
  min-height: 40rem;
  min-height: clamp(25.000rem, calc(9.000rem + 20vw), 40.000rem);
  overflow: visible;
}

.col.image-col {
  flex-shrink: 0;
}

.col.image-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.col.text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.col.text-col.valign-bottom,
.slide.valign-bottom {
  justify-content: flex-end;
}

.col.text-col.valign-top,
.slide.valign-top {
  justify-content: flex-start;
}

.text-inner {
  padding: 8% 8% 12% 9%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.text-inner b,
.text-inner strong {
  font-weight:500;
}

.col-full .text-inner {
  padding: 5% 15% 3% 5%;
}


/* ============================================================
   HERO
============================================================ */
/* .hero-section .col.image-col */
.hero-section .hero-image {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 7;
  min-height: 50rem;
}

.hero-image {
  position: relative;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 40, 80, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6rem 8rem;
}

.hero-title {
  text-indent:-4000px;
  color:transparent;
}

.hero-logo {
  inset: 0;
  width: 50vw;
  max-width:85rem;
  height: auto;
  object-fit: cover;
}


/* ============================================================
   SLIDER – Desktop & allgemein
============================================================ */
.slider-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
}

.slider-track {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* Slide: 50% Breite (2 sichtbar auf Desktop) */
.slide.col {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.slider-section[data-slides="1"] .slide.col {
  flex: 0 0 50%;
  width: 50%;
}

/* RTL flex-direction wird ausschließlich per JS als Inline-Style gesetzt
   (applyTrackDirection). Keine CSS-Regel – verhindert Konflikte auf Mobile. */

/* Buttons */
.slider-btn {
  position: absolute;
  bottom:0;
  width: clamp(6.000rem, calc(1.733rem + 5.333vw), 10.000rem);
  height:100%;
  border: none;
  background: none;
  color: var(--white);
  font-size:clamp(2.500rem, calc(-0.167rem + 3.333vw), 5.000rem);
  line-height: 0;
  cursor: pointer;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding:4% 0;
}


/* .slider-btn:hover { color: var(--white); } */

.slider-btn.disabled {
  opacity: 0;
  pointer-events: none;
}

.slider-btn.left  { 
  left:0;
}
.slider-btn.right { 
  right:0; 
}


/* Platzhalter-Slide (ersetzt herausgezogene Slides im Track) */
.slide.slider-ph {
  flex: 0 0 0 !important;
  width: 0 !important;
  overflow: hidden;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   SLIDER – Pinned Col (Mobile: einzelnes Bild oberhalb)
============================================================ */
.slider-pinned-col {
  flex: 0 0 50%;
  width: 50%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  color: rgb(255, 255, 255);
}

.slider-pinned-col.image-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-pinned-col.text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.slider-pinned-col.valign-top    { justify-content: flex-start; }
.slider-pinned-col.valign-bottom { justify-content: flex-end;   }


/* ============================================================
   MOBILE SLIDER – Bild-Slider über Text-Slider
   Wenn mehrere Bild-Slides vorhanden: separater Slider.
============================================================ */
.mobile-img-slider {
  display: none; /* wird per JS nur auf Mobile erzeugt; trotzdem */
  width: 100%;
  position: relative;
  overflow: hidden;
}

.mobile-img-slider .slider-track {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
}

.mobile-img-slider .mobile-img-slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

.mobile-img-slider .mobile-img-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-img-slider .slider-btn {
 padding-bottom:8%; 
  align-items: flex-end;
}


/* ============================================================
   FOOTER
============================================================ */
.footer-col {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: auto;
  justify-content: flex-end;
}

.footer-inner p { margin-bottom: 0; }

.footer-inner ul li {
  padding-left: 0;
}

.footer-inner ul li::before { 
	content: none;
}



/* ============================================================
   FLUID TYPOGRAPHY – Desktop
   Zielgröße bei 1550px, schrumpft bis 800px.
============================================================ */
* {
  /* font-size: clamp(1.500rem, calc(0.380rem + 1.4vw), 2.550rem); */
  font-size: clamp(1.250rem, calc(-0.137rem + 1.733vw), 2.550rem);
}

 p {
  margin-bottom: clamp(1.050rem, calc(0.250rem + 1vw), 1.800rem);
}

h1, h2 {
  font-size: clamp(2.900rem, calc(0.942rem + 3.263vw), 6.000rem);
  margin-bottom: clamp(1.900rem, calc(-1.620rem + 4.4vw), 5.200rem); 
}

h3 {
  font-size: clamp(2.300rem, calc(1.226rem + 1.789vw), 4.000rem);
  margin-bottom: clamp(1.900rem, calc(0.407rem + 1.867vw), 3.300rem); 
}

.hero-title {
  font-size: clamp(4.000rem, calc(-0.421rem + 7.368vw), 11.000rem);
}

.header-meta * {
  font-size: clamp(1.600rem, calc(0.747rem + 1.067vw), 2.400rem);
}


/* ============================================================
   MOBILE – max-width: 800px
============================================================ */
@media (max-width: 800px) {

  /* ── Fluid Typography Mobile ──────────────────────────────
     Eigene clamp-Kurve für 320px–800px.
  ---------------------------------------------------------- */
  * {
	font-size:clamp(1.200rem, calc(0.300rem + 2.813vw), 2.550rem);
  }
   
  p {
    margin-bottom: clamp(1.050rem, calc(0.550rem + 1.563vw), 1.800rem);
  }

  h1, h2 {
    font-size: clamp(2.600rem, calc(0.333rem + 7.083vw), 6.000rem);
    margin-bottom: clamp(1.600rem, calc(-0.800rem + 7.5vw), 5.200rem);
  }

  h3 {
   font-size: clamp(2.000rem, calc(0.667rem + 4.167vw), 4.000rem);
   margin-bottom: clamp(1.600rem, calc(0.467rem + 3.542vw), 3.300rem);
  }


  /* ── Header ──────────────────────────────────────────────── */
  
  .site-header {
	position:relative;

  }

  .header-meta {
    gap: 1.5rem;
    line-height:0.5;
	padding: 2.5rem 7%;
  }
  
  .header-meta * {
	font-size: clamp(1.200rem, calc(0.933rem + 0.833vw), 1.600rem)
  }
  
  @media (max-width: 550px) {
	.header-meta {
		flex-direction: column;
	}
	  .header-meta * {
		font-size: 1.3rem;
	  }	
	  
  }


  /* ── Columns ─────────────────────────────────────────────── */
  .col {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .col .text-inner { 
	padding: 12% 7% 7% 7%;
  }

  /* Desktop Pinned Col auf Mobile: volle Breite */
  .slider-pinned-col {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  /* ── Hero ────────────────────────────────────────────────── */
  .hero-section .col.image-col {
    aspect-ratio: 4 / 3;
    min-height: 30rem;
  }

  .hero-overlay {
    padding: 3rem 3rem;
  }
  
  .hero-logo {
	width: 65vw;
}

  /* ── Slider Mobile ───────────────────────────────────────── */

  /* Alle Slides 100% breit */
  .slide.col {
    flex: 0 0 100%;
    width: 100%;
  }

  /* Text-Slides immer oben links */
  .slide.text-col,
  .slide.text-col.valign-bottom,
  .slide.text-col.valign-top {
    justify-content: flex-start;
    align-items: flex-start;
  }

  .slider-btn {
	padding:6% 0;
    align-items: flex-start;
    width:clamp(5.000rem, calc(2.333rem + 8.333vw), 9.000rem);
    font-size:clamp(3.000rem, calc(1.667rem + 4.167vw), 5.000rem);
  }

  /* Mobile Bild-Slider: sichtbar machen */
  .mobile-img-slider {
    display: block;
  }

  /* ── Footer ──────────────────────────────────────────────── */
  .footer-col {
    min-height: 14rem;
  }

  .footer-col .text-inner {
    flex-direction: column;
    align-items: flex-start;
  }

}