/* ============================================================
   shared.css — polymono
   Globale Basis: Tokens, Fonts, Reset, Button-Komponente
   Wird in alle Section-Test-Dateien und die finale index.html eingebunden.
   NICHT bearbeiten ohne Abstimmung — Änderungen wirken sich auf alles aus.
============================================================ */

/* ------------------------------------------------------------
   FONTS
   Pfade relativ zu Claude/ (wo auch index.html liegt)
------------------------------------------------------------ */
@font-face {
  font-family: 'HGS3';
  src: url('../font/HurmeGeometricSans3-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'HGS3';
  src: url('../font/HurmeGeometricSans3-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'HGS3';
  src: url('../font/HurmeGeometricSans3-Regular.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'HFM';
  src: url('../font/HurmeFINMono1b-Medium.ttf') format('opentype');
  font-weight: 500;
  font-display: swap;
}

/* ------------------------------------------------------------
   DESIGN TOKENS
------------------------------------------------------------ */
:root {
  --beige:   #ebe9e6;
  --green:   #99e600;
  --dark:    #041226;
  --magenta: #cc1461;

  /* Typografie-Familien */
  --f: 'HGS3', sans-serif;   /* Hurme Geometric Sans 3 */
  --m: 'HFM', monospace;     /* Hurme FIN Mono 1b */

  /* Pattern-Tile SVG als Data-URI (vermeidet Pfad-/CORS-Probleme mit mask-image) */
  --pat-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M35.9%2C0h-12L0%2C24v12L35.9%2C0Z'/%3E%3Cpath d='M24%2C60h12l24-24v-12L24%2C60Z'/%3E%3Cpath d='M60%2C0h-6.1L0%2C54v6h6L59.9%2C6V0Z'/%3E%3Cpath d='M0%2C0v6L6%2C0H0Z'/%3E%3Cpath d='M59.9%2C60h-6l6-6v6Z'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------
   RESET & BASE
------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--f);
  background: var(--beige);
  color: var(--dark);
  overflow-x: hidden;
}

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

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

/* ------------------------------------------------------------
   TYPOGRAFIE-UTILITIES
   Klassen entsprechen 1:1 den benannten Text-Styles in Figma.
   line-height: 1 für Einzeiler (Headlines, Buttons, Nav), normal/.t-body für Fließtext, 1.4 für Kacheltexte.

   Breakpoint-Logik: Desktop-Werte als Default, Overrides via @media.
   Breakpoints: ≤960px = Tablet, ≤480px = Mobile.

   Klasse           Desktop   Tablet   Mobile   Familie / Weight
   ──────────────────────────────────────────────────────────────
   .t-h1            56px      45px     30px     HGS3 Bold 700
   .t-h2            45px      40px     24px     HGS3 Bold 700
   .t-body          21px      21px     16px     HGS3 Regular 500
   .t-btn           21px      21px     16px     HFM Medium (auch in .btn)
   .t-kachel-tit    30px      21px     21px     HGS3 Bold 700
   .t-kacheltext    21px      14px     14px     HGS3 Regular 500
   .t-footer-lnk    ?         ?        ?        HGS3 Bold 700  ← noch zu klären
   .t-menu          ?         ?        ?        HGS3 Bold 700  ← noch zu klären
   .t-lb-titel      ?         ?        ?        HGS3 Bold 700  ← noch zu klären
   .t-lb-sub        ?         ?        ?        HGS3 SemiBold 600 ← noch zu klären
   (2 Styles von Peter gelöscht — werden nach Rückmeldung bereinigt)
------------------------------------------------------------ */

/* ── Desktop (default) ────────────────────────────────── */
.t-h1 {
  font-family: var(--f);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
}

.t-h2 {
  font-family: var(--f);
  font-size: 45px;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
}

.t-body {
  font-family: var(--f);
  font-size: 21px;
  font-weight: 500;
  line-height: normal;
  font-style: normal;
}

.t-btn {
  font-family: var(--m);
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  font-style: normal;
}

.t-kachel-tit {
  font-family: var(--f);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
}

.t-kacheltext {
  font-family: var(--f);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.4;
  font-style: normal;
}

.t-footer-lnk {
  font-family: var(--f);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
}

.t-menu {
  font-family: var(--f);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
}

.t-lb-titel {
  font-family: var(--f);
  font-size: 56px;   /* Tablet: 45px | Mobile: 30px */
  font-weight: 700;
  line-height: 1;
  font-style: normal;
}

.t-lb-sub {
  font-family: var(--f);
  font-size: 27px;   /* Tablet: 24px | Mobile: 18px */
  font-weight: 600;
  line-height: 1;
  font-style: normal;
}

/* ── Tablet-Overrides (≤ 960px) ───────────────────────── */
@media (max-width: 960px) {
  .t-h1         { font-size: 45px; }
  .t-h2         { font-size: 40px; }
  /* .t-body      21px — unverändert */
  /* .t-btn       21px — unverändert */
  .t-kachel-tit { font-size: 24px; }
  /* .t-kacheltext 21px — unverändert */
  .t-lb-titel   { font-size: 45px; }
  .t-lb-sub     { font-size: 24px; }
  .t-menu       { font-size: 45px; }
}

/* ── Mobile-Overrides (≤ 480px) — ergänzt ─────────────── */

/* ── Mobile-Overrides (≤ 480px) ───────────────────────── */
@media (max-width: 480px) {
  .t-h1         { font-size: 30px; }
  .t-h2         { font-size: 24px; }
  .t-body       { font-size: 16px; }
  .t-btn        { font-size: 16px; }
  .t-kachel-tit { font-size: 21px; }
  .t-kacheltext { font-size: 16px; }
  .t-lb-titel   { font-size: 30px; }
  .t-lb-sub     { font-size: 18px; }
  .t-menu       { font-size: 30px; }
}

/* ------------------------------------------------------------
   PATTERN-TILE — FARBVARIANTEN
   Basisform: assets/images/pattern-tile.svg (60×60, fill #041226)
   Rekolorierung via CSS mask-image — SVG bleibt unverändert.

   Verwendung: <div class="pat-green"> statt <img src="pattern-tile.svg">
   Größe wird vom Elternelement (grid-cell oder eigenem width/height) gesteuert.
------------------------------------------------------------ */
/* Kachelgröße-Modifier — überschreibt mask-size der .pat-* Klassen */
.pat-tiles-lg {
  -webkit-mask-size: 120px 120px;
          mask-size: 120px 120px;
}
.pat-tiles-sm {
  -webkit-mask-size: 30px 30px;
          mask-size: 30px 30px;
}

.pat-green {
  background-color: var(--green);
  -webkit-mask-image: var(--pat-svg);
          mask-image: var(--pat-svg);
  -webkit-mask-size: 60px 60px;
          mask-size: 60px 60px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}

.pat-dark {
  background-color: var(--dark);
  -webkit-mask-image: var(--pat-svg);
          mask-image: var(--pat-svg);
  -webkit-mask-size: 60px 60px;
          mask-size: 60px 60px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}

.pat-beige {
  background-color: var(--beige);
  -webkit-mask-image: var(--pat-svg);
          mask-image: var(--pat-svg);
  -webkit-mask-size: 60px 60px;
          mask-size: 60px 60px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-mode: alpha;
          mask-mode: alpha;
}

/* ------------------------------------------------------------
   BUTTON-KOMPONENTE
   Struktur: <a class="btn btn-light"> oder <button class="btn btn-dark">
               <div class="btn-box"><img src="assets/icons/arrow.svg" alt=""></div>
               Buttontext
             </a>

   btn-light = auf hellem Hintergrund (beige/grün)
               → dunkle Border, dunkle Box, dunkler Text
   btn-dark  = auf dunklem Hintergrund (dark/magenta)
               → beige Border, beige Box, beiger Text
               → arrow.svg (beiger Strich) wird per filter:invert(1) dunkel
------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  height: 60px;
  gap: 30px;
  padding-right: 30px;
  border: 1px solid currentColor;
  cursor: pointer;
  font-family: var(--m);
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  background: none;
}

.btn-box {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;           /* ← aus Figma: p-[22px] */
  overflow: hidden;        /* verhindert dass scale den Button-Rahmen sprengt */
}

.btn-box img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.2s ease;
}

.btn span {
  display: inline-block;
  transition: transform 0.2s ease;
}

.btn:hover .btn-box img {
  transform: scale(1.2);
}

.btn:hover span {
  transform: scale(1.05);
}

/* Variante: heller Hintergrund */
.btn-light {
  color: var(--dark);
  border-color: var(--dark);
}
.btn-light .btn-box {
  background: var(--dark);
}

/* Variante: dunkler Hintergrund */
.btn-dark {
  color: var(--beige);
  border-color: var(--beige);
}
.btn-dark .btn-box {
  background: var(--beige);
}
.btn-dark .btn-box img {
  filter: invert(1);       /* beige arrow → dunkel sichtbar auf beiger Box */
}

/* ------------------------------------------------------------
   BUTTON — MOBILE
   Box 45×45px statt 60×60px (lt. Figma node 1:10568)
   Innenabstand proportional angepasst (22px → 16px).
------------------------------------------------------------ */
@media (max-width: 480px) {
  .btn {
    height: 45px;
    gap: 20px;
    padding-right: 20px;
    font-size: 16px;   /* Button/Mobile lt. Figma */
  }
  .btn-box {
    width: 45px;
    height: 45px;
    padding: 16px;
  }
}

/* ============================================================
   BURGER MENU — OVERLAY
   Figma: 1:11405 Desktop / 1:11427 Tablet / 1:11449 Mobile

   Struktur:
     .bm-overlay  — position:fixed, fullscreen, dark
       .bm-inner  — max-width:1200px, Grid 3 Spalten × 4 Reihen
         .bm-logo   — col 1, row 1 (polyBeige SVG, 240×120px)
         .bm-close  — absolut rechts/oben
         .bm-nav    — col 2, row 2 (Nav-Links)
         .bm-social — col 2, row 3 (Social Icons)
         .bm-lang   — col 2, row 4 (DE/EN Toggle-Buttons)

   Einbindung: via shared.css automatisch in allen Sections.
   HTML + JS: muss in jede Section-Datei eingefügt werden.
============================================================ */

/* ---- Wipe-Animation (Burger + Lightbox) ----
   Aufbau: links → rechts    clip-path inset right: 100% → 0%
   Abbau:  rechts → links    clip-path inset right: 0%  → 100%
   Easing: cubic-bezier(0.76, 0, 0.24, 1) — snappy ease-in-out
   Steuerung via .is-open Klasse (kein hidden-Attribut nach erstem Öffnen)
*/
.bm-overlay,
.lb-overlay {
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  transition: clip-path 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.bm-overlay.is-open,
.lb-overlay.is-open {
  clip-path: inset(0 0% 0 0);
  pointer-events: auto;
}

.bm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: var(--dark);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Inner-Grid ---- */
.bm-inner {
  display: grid;
  grid-template-columns: 240px 1fr 60px;
  grid-template-rows: 240px auto auto auto;
  min-height: 100vh;
  align-content: start;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- Logo: col 1, row 1 ---- */
.bm-logo {
  grid-column: 1;
  grid-row: 1;
  width: 240px;
  height: 120px;
  align-self: start;
  justify-self: start;
}
.bm-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

/* ---- Close-Button (absolut) ---- */
.bm-close {
  position: absolute;
  right: 60px;
  top: 60px;
  width: 60px;
  height: 60px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bm-close img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Navigation: col 2, row 2 ---- */
.bm-nav {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px 0;
}
.bm-nav a {
  font-family: var(--f);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: var(--beige);
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s ease;
}
.bm-nav a:hover {
  color: var(--magenta);
}

/* ---- Social Icons: col 2, row 3 ---- */
.bm-social {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
  padding-bottom: 30px;
}
.bm-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.bm-social a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---- Sprach-Toggle: col 2, row 4 ---- */
.bm-lang {
  grid-column: 2;
  grid-row: 4;
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: flex-start;
  padding-bottom: 60px;
}
.bm-lang-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--m);
  font-size: 21px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 2px solid var(--beige);
  background: transparent;
  color: var(--beige);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bm-lang-btn.lang-active {
  background: var(--magenta);
  color: var(--beige);
  border-color: var(--magenta);
}

/* ---- Tablet (≤ 960px) ---- */
@media (max-width: 960px) {
  .bm-inner {
    grid-template-columns: 120px 1fr 60px;
  }
  .bm-nav a {
    font-size: 45px;
  }
}

/* ---- Mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  .bm-inner {
    grid-template-columns: 60px 1fr 60px;
    grid-template-rows: 102px auto auto auto;
  }
  .bm-logo {
    width: 120px;
    height: 60px;
  }
  .bm-close {
    right: 0;
    top: 0;
  }
  .bm-nav {
    gap: 10px;
    padding: 15px 0;
  }
  .bm-nav a {
    font-size: 30px;
  }
  .bm-social {
    gap: 15px;
    padding-bottom: 15px;
  }
  .bm-social a {
    width: 45px;
    height: 45px;
  }
  .bm-lang {
    padding-bottom: 30px;
  }
  .bm-lang-btn {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }
}

/* ── Burger-Button global sticky ───────────────────────────────
   Überschreibt position:absolute in allen Seiten-Styles
   damit der Burger beim Scrollen sichtbar bleibt.
────────────────────────────────────────────────────────────── */
.nav-burger { position: fixed !important; }

/* ── Zweisprachige Inline-Elemente ─────────────────────────────
   lang.js setzt html[lang="en"] → CSS blendet die jeweils
   andere Sprachversion lautlos aus. Kein extra JS nötig.
────────────────────────────────────────────────────────────── */
.lang-en               { display: none; }
html[lang="en"] .lang-de { display: none; }
html[lang="en"] .lang-en { display: inline; }

/* ── Datenschutzhinweis am Kontaktformular ──────────────────────
   Desktop/Tablet: 80% von 21px body = ~17px
   Mobile ≤480px:  80% von 16px body = ~13px
────────────────────────────────────────────────────────────── */
.kontakt-privacy {
  font-family: var(--f);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--beige);
  margin: 0;
  opacity: 0.8;
}
.kontakt-privacy a {
  color: var(--beige);
  text-decoration: underline;
}
.kontakt-privacy a:hover {
  opacity: 0.7;
}

@media (max-width: 480px) {
  .kontakt-privacy {
    font-size: 13px;
  }
}