/* CR SMARTHOME – Design System CSS
   Fonts + CSS-Tokens für alle HTML-Seiten */

/* ── Responsive Baseline ── */
img { max-width: 100%; height: auto; }
* { box-sizing: border-box; }
body { overflow-x: clip; }

a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* ── Wordbr­eak für Überschriften ── */
h1, h2, h3, h4, h5 {
  overflow-wrap: break-word;
  word-break: break-word;
}

@font-face {
  font-family: 'Chalet';
  src: url('fonts/Chalet-Paris-1960.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chalet';
  src: url('fonts/Chalet-London-1960.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chalet';
  src: url('fonts/Chalet-NewYork-1960.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chalet Paris 1960';
  src: url('fonts/Chalet-Paris-1960.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Chalet London 1960';
  src: url('fonts/Chalet-London-1960.otf') format('opentype');
  font-display: swap;
}
@font-face {
  font-family: 'Chalet New York 1960';
  src: url('fonts/Chalet-NewYork-1960.otf') format('opentype');
  font-display: swap;
}

:root {
  --brand:        #82b818;
  --brand-hover:  #6ea010;
  --accent:       #bfd100;
  --brand-dark:   #007624;
  --dark:         #003c12;
  --text1:        #454545;
  --text2:        #6b6b6b;
  --dim:          #999999;
  --bg:           #ffffff;
  --surface:      #f5f5f5;
  --border:       #d0d0d0;
  --display:      'Chalet London 1960', 'Chalet', Helvetica, Arial, sans-serif;
  --body:         'Chalet Paris 1960', 'Chalet', Helvetica, Arial, sans-serif;
  --medium:       'Chalet New York 1960', 'Chalet', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Chalet Paris 1960', 'Chalet', Helvetica, Arial, sans-serif;
  background: #ffffff;
  color: #454545;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: #82b818; color: #fff; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #82b818; }

input, select, textarea {
  font-family: 'Chalet Paris 1960', 'Chalet', Helvetica, Arial, sans-serif;
}
input::placeholder, textarea::placeholder { color: #bbb; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #82b818 !important;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroBg {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0) translateX(-50%); }
  50%       { transform: translateY(6px) translateX(-50%); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.brand-track { display: flex; width: max-content; animation: marquee 54s linear infinite; }
.brand-track:hover { animation-play-state: paused; }

/* ── Tablet (769 – 1024 px) ── */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Schmalere Seitenabstände auf Tablet */
  .section-pad { padding-left: 28px !important; padding-right: 28px !important; }
}

/* ── Mobile (≤ 768 px) ── */
@media (max-width: 768px) {
  .desktop-nav { display: none !important; }
  .mobile-menu-btn { display: flex !important; }

  /* Tabellen horizontal scrollbar statt Überlauf */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Lange Wörter / URLs umbrechen */
  p, li, td, th { overflow-wrap: break-word; word-break: break-word; }
}

/* ── Extra-Small (≤ 400 px) ── */
@media (max-width: 400px) {
  /* Noch kompaktere Basis-Schrift */
  body { font-size: 14px; }
}