/* =========================================================
   DSS — Digital Smart Solutions
   Design Tokens: Colors + Typography
   Extracted from www.dss-info.de source code.
   ========================================================= */

/* Inter Font - Lokal gehostet (DSGVO-konform) */
/* Quelle: @fontsource/inter – keine Verbindung zu Google-Servern */

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-300-normal.woff2') format('woff2'),
         url('../fonts/inter-latin-ext-300-normal.woff') format('woff');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-400-normal.woff2') format('woff2'),
         url('../fonts/inter-latin-ext-400-normal.woff') format('woff');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-500-normal.woff2') format('woff2'),
         url('../fonts/inter-latin-ext-500-normal.woff') format('woff');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-600-normal.woff2') format('woff2'),
         url('../fonts/inter-latin-ext-600-normal.woff') format('woff');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-latin-ext-700-normal.woff2') format('woff2'),
         url('../fonts/inter-latin-ext-700-normal.woff') format('woff');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/inter-latin-300-normal.woff2') format('woff2'),
         url('../fonts/inter-latin-300-normal.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'),
         url('../fonts/inter-latin-400-normal.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-latin-500-normal.woff2') format('woff2'),
         url('../fonts/inter-latin-500-normal.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'),
         url('../fonts/inter-latin-600-normal.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'),
         url('../fonts/inter-latin-700-normal.woff') format('woff');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ---------- COLOR SYSTEM ---------- */

  /* Brand — DSS primary (Electric Cyan) */
  --dss-brand:           #00C3D2;  /* DSS signature — main brand accent */
  --dss-brand-hover:     #2DD8E6;  /* hover / active lift */
  --dss-brand-soft:      rgba(0, 195, 210, 0.10);  /* 10% fill: icon tiles, hero badges */
  --dss-brand-border:    rgba(0, 195, 210, 0.22);  /* 22% border */
  --dss-brand-glow:      rgba(0, 195, 210, 0.30);  /* button shadow, focus glow */
  --dss-brand-focus:     rgba(0, 195, 210, 0.15);  /* focus ring */

  /* Loxone accent — STRICTLY for Smarthome/Loxone context only */
  --dss-accent:          #69BE28;  /* Loxone-green — smarthome section only */
  --dss-accent-hover:    #7CD636;
  --dss-accent-soft:     rgba(105, 190, 40, 0.10);
  --dss-accent-border:   rgba(105, 190, 40, 0.20);
  --dss-accent-glow:     rgba(105, 190, 40, 0.30);
  --dss-accent-focus:    rgba(105, 190, 40, 0.15);

  /* Neutral brand base */
  --dss-anthracite:      #1A1D21;  /* brand neutral — primary surface */
  --dss-white:           #F0F0F0;  /* brand neutral — primary text/logo */

  /* Surfaces — dark theme only */
  --dss-bg:              #1A1D21;  /* page background */
  --dss-bg-alt:          #22262B;  /* cards, form fields, section-alt */
  --dss-bg-dark:         #111316;  /* header/footer, blog teaser section */
  --dss-bg-elev:         #2A2D32;  /* focused input background */

  /* Foreground */
  --dss-primary:         #F0F0F0;  /* headings, strongest text */
  --dss-primary-light:   #CCCCCC;  /* hero gradient, subtle */
  --dss-text:            #E0E0E0;  /* body copy */
  --dss-text-light:      #9CA3AF;  /* secondary text, meta, captions */

  /* Structure */
  --dss-border:          #333840;  /* dividers, card borders */
  --dss-border-strong:   rgba(255,255,255,0.10);  /* footer separator */

  /* Semantic category accents (blog tags) */
  --dss-cat-smarthome:   #69BE28;  /* green */
  --dss-cat-it:          #3B82F6;  /* blue */
  --dss-cat-local:       #F59E0B;  /* amber */

  --dss-cat-smarthome-bg: rgba(105, 190, 40, 0.15);
  --dss-cat-it-bg:        rgba(59, 130, 246, 0.15);
  --dss-cat-local-bg:     rgba(245, 158, 11, 0.15);

  /* Shadows */
  --dss-shadow:          0 4px 24px rgba(0, 0, 0, 0.25);
  --dss-shadow-lg:       0 8px 40px rgba(0, 0, 0, 0.35);
  --dss-shadow-header:   0 2px 20px rgba(0, 0, 0, 0.40);
  --dss-shadow-btn:      0 4px 16px rgba(0, 195, 210, 0.30);

  /* Radii */
  --dss-radius-sm:       6px;   /* tags, small chips */
  --dss-radius:          8px;   /* buttons, inputs */
  --dss-radius-md:       12px;  /* cards, forms (main --radius) */
  --dss-radius-lg:       14px;  /* icon tiles */
  --dss-radius-xl:       16px;  /* hero glass cards */
  --dss-radius-2xl:      24px;  /* hero graphic */
  --dss-radius-pill:     50px;  /* hero badge */
  --dss-radius-full:     9999px;

  /* Spacing (tokenized from website layout) */
  --dss-space-1:         4px;
  --dss-space-2:         8px;
  --dss-space-3:         12px;
  --dss-space-4:         16px;
  --dss-space-5:         20px;
  --dss-space-6:         24px;   /* container padding */
  --dss-space-8:         32px;
  --dss-space-10:        40px;   /* form padding */
  --dss-space-12:        48px;
  --dss-space-16:        64px;
  --dss-space-24:        100px;  /* section vertical padding */

  /* Layout */
  --dss-container:       1160px;
  --dss-container-blog:  1200px;
  --dss-content:         760px;  /* legal pages, blog article body */
  --dss-header-height:   132px;

  /* Motion */
  --dss-transition:      0.3s ease;
  --dss-transition-fast: 0.2s ease;

  /* ---------- TYPOGRAPHY ---------- */
  --dss-font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --dss-font-mono:       ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Weights */
  --dss-w-light:         300;
  --dss-w-regular:       400;
  --dss-w-medium:        500;
  --dss-w-semibold:      600;
  --dss-w-bold:          700;

  /* Base */
  --dss-fs-base:         16px;
  --dss-lh-base:         1.7;     /* relaxed body line-height */
  --dss-lh-tight:        1.2;     /* display headings */
  --dss-lh-snug:         1.3;     /* section headings */
  --dss-lh-normal:       1.4;     /* card titles */
  --dss-lh-relaxed:      1.6;     /* article prose */

  /* Type scale — extracted from actual website usage */
  --dss-fs-display:      3rem;      /* 48px — hero h1 desktop */
  --dss-fs-h1:           2.625rem;  /* 42px — article h1 */
  --dss-fs-h2:           2.25rem;   /* 36px — section h2 */
  --dss-fs-h3-article:   1.75rem;   /* 28px — article h2 */
  --dss-fs-h3:           1.25rem;   /* 20px — card titles */
  --dss-fs-h4:           1.1rem;    /* blog card title */
  --dss-fs-body-lg:      1.15rem;   /* hero subtitle */
  --dss-fs-body:         1.05rem;   /* about/contact copy */
  --dss-fs-default:      1rem;      /* body default */
  --dss-fs-sm:           0.95rem;   /* card copy */
  --dss-fs-xs:           0.9rem;    /* nav, footer links */
  --dss-fs-2xs:          0.85rem;   /* hero badge, section label */
  --dss-fs-3xs:          0.8rem;    /* tags, tiny meta */
  --dss-fs-micro:        0.75rem;   /* category pills */

  /* Display number — the big stat numerals */
  --dss-fs-stat:         2.5rem;    /* 40px stat number */

  /* Letter-spacing */
  --dss-ls-label:        2px;       /* uppercase section labels */
  --dss-ls-kicker:       0.5px;     /* category tags uppercase */
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Apply dss-prose class to render article-like content.
   ========================================================= */

html { scroll-behavior: smooth; scroll-padding-top: 140px; }

body.dss {
  font-family: var(--dss-font-sans);
  color: var(--dss-text);
  background: var(--dss-bg);
  line-height: var(--dss-lh-base);
  font-size: var(--dss-fs-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic headings — defaults. Components may override in-place. */
.dss-h1 {
  font-family: var(--dss-font-sans);
  font-size: var(--dss-fs-display);
  font-weight: var(--dss-w-bold);
  line-height: var(--dss-lh-tight);
  color: var(--dss-primary);
  letter-spacing: -0.01em;
}

.dss-h2 {
  font-size: var(--dss-fs-h2);
  font-weight: var(--dss-w-bold);
  line-height: var(--dss-lh-snug);
  color: var(--dss-primary);
}

.dss-h3 {
  font-size: var(--dss-fs-h3);
  font-weight: var(--dss-w-semibold);
  color: var(--dss-primary);
  line-height: var(--dss-lh-normal);
}

.dss-h4 {
  font-size: var(--dss-fs-h4);
  font-weight: var(--dss-w-semibold);
  color: var(--dss-primary);
  line-height: var(--dss-lh-normal);
}

.dss-p {
  font-size: var(--dss-fs-default);
  color: var(--dss-text);
  line-height: var(--dss-lh-base);
}

.dss-lead {
  font-size: var(--dss-fs-body-lg);
  color: var(--dss-text-light);
  line-height: var(--dss-lh-relaxed);
}

.dss-muted {
  color: var(--dss-text-light);
}

/* Section label — uppercase accent kicker */
.dss-kicker {
  display: inline-block;
  font-size: var(--dss-fs-3xs);
  font-weight: var(--dss-w-bold);
  text-transform: uppercase;
  letter-spacing: var(--dss-ls-label);
  color: var(--dss-brand);
}

/* Inline link style */
.dss-link {
  color: var(--dss-brand);
  text-decoration: none;
  transition: color var(--dss-transition);
}
.dss-link:hover { color: var(--dss-brand-hover); }

/* Code */
.dss-code {
  font-family: var(--dss-font-mono);
  font-size: 0.92em;
  background: var(--dss-bg-dark);
  padding: 2px 6px;
  border-radius: var(--dss-radius-sm);
  color: var(--dss-primary);
  border: 1px solid var(--dss-border);
}