/*
Theme Name: BTT Klenk Bau
Theme URI:   https://klenk-bau.de
Author:      BTT Klenk Bau
Author URI:  https://klenk-bau.de
Description: Professionelles Unternehmensthema für BTT Klenk Bau – Tiefbau, Straßenbau, Erdbau.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: btt-klenk-bau
Tags:        construction, business, custom-colors, custom-menu, custom-logo, featured-images, footer-widgets, responsive-layout
*/

/* ============================================================
   DESIGN TOKENS — single source of truth
   Never hardcode these values anywhere else in the codebase.
   ============================================================ */
:root {
  /* Brand colours */
  --color-dark:    #1C1B23;
  --color-accent:  #EA562A;
  --color-white:   #FFFFFF;
  --color-gray:    #F4F4F4;
  --color-text:    #2D2D2D;
  --color-muted:   #6B6B6B;

  /* Typography */
  --font-primary: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'BTT Brand', var(--font-primary);
  --font-size-base: 1rem;       /* 16 px */
  --line-height-base: 1.6;

  /* Spacing scale (0.25 rem steps) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Layout */
  --container-max: 1200px;
  --container-padding: var(--space-6);

  /* Header */
  --header-height: 72px;

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 15px rgba(0,0,0,.10), 0 4px 6px rgba(0,0,0,.05);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul,
ol {
  list-style: none;
}

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

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
  font-size: 0.875rem;
  color: var(--color-muted);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: currentColor;
  opacity: 0.55;
}

.breadcrumbs__item a {
  color: inherit;
}

.breadcrumbs__item a:hover,
.breadcrumbs__item a:focus {
  color: var(--color-accent);
}