/*
Theme Name: Château Louis (Test)
Theme URI: https://chateaulouis.de
Author: Château Louis
Description: Test-Theme für den Website-Relaunch – One-Pager auf Basis des Layout-Entwurfs. Proportionen und Abstände sind Pixel für Pixel aus der Layout-Vorlage (1920px-Entwurf) übernommen. Inhalte/Bilder sind noch Platzhalter, dieses Theme dient als austauschbare Test-Grundlage.
Version: 0.2
Text Domain: chateau-louis
*/

/* ==========================================================================
   Variablen
   ========================================================================== */
:root{
  --cl-red:#e2231a;      /* Platzhalter für CL-Rot, bitte exakten HEX-Wert eintragen */
  --cl-grey:#6f6f6f;      /* helleres Grau (Bänder "Intro", "Kennenlernen") – aus Vorlage: ~#6b6b6b */
  --cl-grey-dark:#666666; /* dunkleres Grau (Work-Teaser, People, Footer) – aus Vorlage: ~#666666 */
  --cl-bg:#ffffff;
  --cl-ink:#1a1a1a;
  --cl-font: -apple-system, "Helvetica Neue", Arial, sans-serif; /* Platzhalter, bis die Hausschrift feststeht */
}

/*
  Skalierungs-Prinzip
  --------------------
  Die Layout-Vorlage ist ein 1920px breiter Entwurf. Alle Abstände, Größen
  und Schriftgrade unten sind direkt aus dieser Vorlage abgemessen (Wert in
  px bei 1920px Breite steht jeweils im Kommentar) und als
  clamp(Minimum, Wert-in-vw, Maximum-in-px) umgesetzt:
    - Auf einem 1920px breiten Bildschirm entspricht das Layout exakt der
      Vorlage (der vw-Wert trifft dann genau den px-Wert).
    - Auf kleineren Screens skaliert alles proportional mit, bis zu einem
      sinnvollen Minimum (Lesbarkeit/Abstand auf Mobile).
    - Auf sehr breiten Screens (>1920px) wächst nichts unbegrenzt weiter,
      sondern bleibt bei der "Vorlagen-Größe" stehen.
*/

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--cl-font);
  color:var(--cl-ink);
  background:var(--cl-bg);
  line-height:1.5;
}
img,video{max-width:100%;display:block;}
a{color:inherit;}

.cl-wrap{
  max-width:1920px;
  margin:0 auto;
  padding:0 clamp(20px, 7.4vw, 142px); /* Vorlage: 142px Seitenabstand bei 1920px */
}

/* ---------- Header ---------- */
.cl-header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:clamp(16px, 2.6vw, 50px) clamp(20px, 4.3vw, 83px);
}
.cl-logo{
  display:inline-flex;
  text-decoration:none;
}
.cl-logo-mark{
  width:clamp(56px, 7.66vw, 147px); /* Vorlage: Logo-Box 147 x 147px bei 1920px */
  height:clamp(56px, 7.66vw, 147px);
  display:block;
}
.cl-burger{width:clamp(20px, 2.7vw, 52px);height:2px;background:var(--cl-red);position:relative;margin-top:clamp(6px,1vw,18px);}
.cl-burger::before,.cl-burger::after{content:"";position:absolute;left:0;width:100%;height:2px;background:var(--cl-red);}
.cl-burger::before{top:-8px;}
.cl-burger::after{top:8px;}

/* ---------- Hero ---------- */
/* Vorlage: Hero-Fläche 1080px hoch bei 1920px breit (=16:9 der Breite) */
.cl-hero{
  min-height:clamp(320px, 56.25vw, 1080px);
  background:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.cl-hero video{
  width:100%;
  max-width:1400px;
  height:auto;
}

/* ---------- Grundbausteine für Bänder ---------- */
.cl-section h2{
  font-size:clamp(24px, 2.6vw, 50px); /* Vorlage: Headline ~50px bei 1920px */
  line-height:1.2;
  letter-spacing:.01em;
  margin:0;
}
.cl-section p,
.cl-highlight-text p{
  max-width:clamp(280px, 85.2vw, 1636px); /* Vorlage: Textspalte reicht fast bis zum rechten Seitenrand (142px..1778px) */
  font-size:clamp(15px, 1.72vw, 33px);    /* Vorlage: Fließtext ~33px bei 1920px */
  line-height:clamp(20px, 2.5vw, 48px);   /* Vorlage: Zeilenabstand exakt ~48px – als fixer Wert, nicht relativ zur Schrift,
                                              damit der Zeilenumbruch/die Zeilenanzahl unabhängig von der (noch nicht
                                              finalen) Schriftart der Vorlage entspricht */
  margin:0;
}

/* ---------- Intro: "We make brands outstanding" ---------- */
/* Laut Vorlage ZWEI Bänder: graues Band mit Headline + 1. Absatz,
   direkt darunter ein WEISSES Band mit den beiden weiteren Absätzen. */
.cl-intro-grey{
  min-height:clamp(220px, 23.65vw, 454px); /* Vorlage: Bandhöhe fix verankert, unabhängig vom Zeilenumbruch der (noch nicht finalen) Schrift */
  box-sizing:border-box;
  background:var(--cl-grey);
  color:#fff;
  padding:clamp(48px, 7.19vw, 138px) 0 clamp(24px, 3.18vw, 61px); /* Vorlage: 138px oben / 61px unten */
}
.cl-intro-grey h2{margin-bottom:clamp(24px, 4.58vw, 88px);} /* Vorlage: 88px Abstand Headline -> Absatz */

.cl-intro-white{
  min-height:clamp(170px, 17.19vw, 330px); /* Vorlage: Bandhöhe fix verankert */
  box-sizing:border-box;
  background:#fff;
  color:var(--cl-ink);
  padding:clamp(24px, 2.55vw, 49px) 0 clamp(24px, 2.66vw, 51px); /* Vorlage: 49px oben / 51px unten */
}
.cl-intro-white p + p{margin-top:clamp(20px, 3.54vw, 68px);} /* Vorlage: 68px zwischen den Absätzen */

/* ---------- Rotes Zitat/Know-how-Band ---------- */
.cl-highlight{
  min-height:clamp(180px, 16.88vw, 324px); /* Vorlage: Bandhöhe fix verankert */
  box-sizing:border-box;
  padding:clamp(28px, 2.86vw, 55px) 0 clamp(20px, 3.75vw, 72px); /* Vorlage: 55px oben, unten passend zum fixen min-height */
  background:var(--cl-red);
  color:#fff;
}
.cl-highlight-inner{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px, 3vw, 58px);
  align-items:flex-end;
  justify-content:space-between;
}
.cl-highlight-text p{max-width:clamp(280px, 65vw, 1250px);} /* im roten Band teilt sich der Text die Zeile mit dem Icon rechts, daher schmaler als die volle Spalte */
.cl-highlight-text p + p{margin-top:clamp(20px, 2.76vw, 53px);} /* Vorlage: 53px Abstand Absatz -> Link-Zeile */

/* ---------- Link mit Krönchen-Icon (Know-how / Work / People) ---------- */
/* Vorlage: gekipptes Quadrat mit Krönchen (Icon-Datei) LINKS, das Label mit
   Pfeil steht DANEBEN (rechts vom Icon, an dessen Unterkante ausgerichtet) –
   nicht darunter. Icon-Box in der Vorlage ca. 145 x 145px bei 1920px Breite. */
.cl-link-arrow{
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  gap:clamp(10px, 1.2vw, 23px);
  text-decoration:none;
  flex:0 0 auto;
}
.cl-link-icon{
  width:clamp(64px, 7.55vw, 145px);
  height:clamp(64px, 7.55vw, 145px);
  display:block;
  flex:0 0 auto;
}
.cl-link-label{
  display:inline-flex;
  align-items:center;
  gap:clamp(6px, 0.8vw, 15px);
  text-decoration:underline;
  font-size:clamp(13px, 1vw, 19px);
  white-space:nowrap;
  padding-bottom:clamp(2px, 0.4vw, 8px);
}
.cl-link-label .cl-arrow{text-decoration:none;}

/* ---------- Work-Teaser / Slider ---------- */
.cl-work{
  padding:clamp(48px, 7vw, 135px) 0;
  background:var(--cl-grey-dark);
  color:#fff;
}
/* Slider-Grundgerüst: horizontales Scrollen mit Scroll-Snap (funktioniert
   auch ohne JavaScript, per Touch/Trackpad), die Pfeil-Buttons per JS sind
   nur Komfort obendrauf. So können beliebig viele Folien (Projekte) genau
   nach diesem Muster angelegt werden – aktuell 3x als Vorlage dupliziert. */
.cl-slider{position:relative;}
.cl-slider-track{
  display:flex;
  gap:clamp(24px, 4.95vw, 95px);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  margin:0 -4px;
  padding:0 4px;
}
.cl-slider-track::-webkit-scrollbar{display:none;}
.cl-slide{
  scroll-snap-align:start;
  flex:0 0 100%;
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px, 4.95vw, 95px); /* Vorlage: 95px Abstand Bild -> Text */
  align-items:center;
}
.cl-slider-nav{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:clamp(20px, 3vw, 40px);
}
.cl-slider-prev,.cl-slider-next{
  width:40px;height:40px;
  border:1px solid rgba(255,255,255,.6);
  background:transparent;
  color:#fff;
  border-radius:50%;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  flex:0 0 auto;
}
.cl-slider-prev:hover,.cl-slider-next:hover{background:rgba(255,255,255,.15);}
.cl-slider-dots{display:flex;gap:10px;}
.cl-slider-dots button{
  width:9px;height:9px;border-radius:50%;
  border:1px solid #fff;background:transparent;padding:0;cursor:pointer;
}
.cl-slider-dots button[aria-current="true"]{background:#fff;}

/* Bild-Rahmen: gekipptes Quadrat, GENAU wie in der Vorlage (und wie beim
   Krönchen-Icon) – hier bewusst als CSS-Rotation umgesetzt, damit später
   einfach ein <img> in den inneren (ungekippten) Rahmen gesetzt werden kann
   und automatisch im richtigen Winkel erscheint, ohne dass das Bild selbst
   vorab in Photoshop gedreht werden muss.
   Vorlage: äußere Bounding-Box (das, was an Platz im Layout reserviert
   werden muss) ~938px bei 1920px Breite; das darin gekippte Quadrat selbst
   hat eine Kantenlänge von ~765px, gedreht um 15°. */
.cl-work-visual-frame{
  width:clamp(240px, 48.85vw, 938px);
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.cl-work-visual{
  width:clamp(200px, 39.8vw, 765px);
  aspect-ratio:1/1;
  background:#f2f0ec;
  border:1px dashed #b9b3a8;
  transform:rotate(15deg);
  display:flex;
  align-items:center;
  justify-content:center;
}
.cl-work-visual span{
  display:block;
  transform:rotate(-15deg); /* Platzhaltertext bleibt lesbar aufrecht */
  text-align:center;
  color:#8a8a8a;
  font-size:14px;
  padding:20px;
}
.cl-work-visual img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.cl-work-text{flex:1 1 280px;}
.cl-work-text h3{
  margin:0 0 clamp(10px, 1.6vw, 31px); /* Vorlage: 31px Abstand Headline -> Beschreibung */
  font-size:clamp(20px, 2.19vw, 42px); /* Vorlage: ~42px */
  font-weight:600;
}
.cl-work-text p{
  margin:0 0 clamp(32px, 10vw, 193px); /* Vorlage: 193px Abstand Beschreibung -> Link */
  font-size:clamp(15px, 1.72vw, 33px);
  line-height:1.35;
  opacity:.9;
}

/* ---------- Leistungen ---------- */
.cl-services{
  min-height:clamp(280px, 26.67vw, 512px); /* Vorlage: Bandhöhe fix verankert */
  box-sizing:border-box;
  padding:clamp(28px, 2.86vw, 55px) 0 clamp(48px, 5.05vw, 97px); /* Vorlage: 55px oben / 97px unten */
  background:var(--cl-red);
  color:#fff;
}
.cl-services h2{margin-bottom:clamp(32px, 6.6vw, 127px);} /* Vorlage: 127px Abstand Headline -> Liste */
.cl-services-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  column-gap:clamp(20px, 3vw, 58px);
  row-gap:clamp(12px, 1.93vw, 37px); /* Vorlage: 37px Zeilenabstand */
}
.cl-services-list li a{
  text-decoration:underline;
  font-size:clamp(15px, 1.72vw, 33px);
}

/* ---------- People ---------- */
.cl-people-section{
  padding:clamp(24px, 2vw, 40px) 0;
}
.cl-people{
  display:flex;
  flex-wrap:nowrap;
  gap:clamp(16px, 6.25vw, 120px); /* Vorlage: ~120px Abstand zwischen den Karten */
  justify-content:space-between;
}
/* Auch hier: quadratisch und ungekippt, wie bei .cl-work-visual. Die
   Vorlage zeigt die drei Portraits randabfallend (fast volle Breite),
   daher hier bewusst ohne den sonst üblichen Seitenabstand (.cl-wrap). */
.cl-people-card{
  width:clamp(140px, 28vw, 540px); /* Vorlage: ~540px Kantenlänge bei 1920px */
  aspect-ratio:1/1;
  background:#f2f0ec;
  border:1px dashed #b9b3a8;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#8a8a8a;
  font-size:14px;
  padding:16px;
  flex:0 0 auto;
}
.cl-people-wrap{
  padding:0 clamp(8px, 1.5vw, 30px); /* Vorlage: People-Reihe fast randabfallend */
}

/* ---------- CTA-Band ---------- */
.cl-cta-section{
  min-height:clamp(140px, 13.28vw, 255px); /* Vorlage: Bandhöhe fix verankert */
  box-sizing:border-box;
  display:flex;
  align-items:center;
  padding:clamp(28px, 5.5vw, 106px) 0; /* Vorlage: 106px oben/unten, mittig */
  background:var(--cl-grey);
  color:#fff;
}
.cl-cta-section > .cl-wrap{width:100%;}
.cl-cta{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:space-between;
}
.cl-cta p{font-size:clamp(18px, 1.87vw, 36px);margin:0;}
.cl-cta .cl-link-arrow{align-items:flex-end;}

/* ---------- Footer ---------- */
.cl-footer{
  padding:clamp(32px, 4vw, 80px) 0 120px;
  background:var(--cl-grey-dark);
  color:#fff;
  font-size:15px;
  min-height:clamp(240px, 12.2vw, 234px);
}
.cl-footer a{text-decoration:underline;}

@media (max-width:640px){
  .cl-slide{flex-direction:column;align-items:flex-start;}
  .cl-people{gap:14px;}
  .cl-highlight-inner{align-items:flex-start;}
}