/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* =========================================
   GLOBAL CSS – KARATEPRAXIS (Bricks)
   ========================================= */

/* =========================
   DESIGN TOKENS
   ========================= */
:root{
  /* Markenfarben (aus Vorgaben) */
  --color-primary: #F5F5F5;      /* Primär (hell) */
  --color-secondary: #B80000;    /* Sekundär (Rot) */
  --color-accent: #CE0000;       /* Akzent (Rot) */
  --color-text: #DDDDDD;         /* Grundtext auf dunkel */

  /* Oberflächen (Dark UI) */
  --color-bg: #111111;           /* BG dark black */
  --color-surface: #1D1D1D;      /* BG dark deep */
  --color-elevated: #3B3B3B;     /* BG dark */
  --color-surface-contrast: #FFFFFF; /* weiss für Kontraste */

  /* States / UI-Details */
  --color-link: #F5F5F5;         /* Links default */
  --color-link-active: #E95454;  /* aktiver/hover Link */
  --color-border: #FFFFFF66;     /* Trenner */

  /* Individuell */
  --white: #FFFFFF;
  --black-transparent: #00000066;
  --bg-dark-light: #DDDDDD;
  --bg-grey-bright-2: #CECECE;

  /* Typografie – Helvetica */
  --font-sans: Helvetica, Arial, system-ui, -apple-system, Roboto, sans-serif;
  --fs-base: clamp(16px, 1vw, 18px);

  /* Headline Größen */
  --h1-size: clamp(3.75rem, 1.4063rem + 7.5vw, 5.625rem);
  --h2-size: clamp(2.375rem, 0.3438rem + 6.5vw, 4rem);
  --h3-size: clamp(1.875rem, 0.9375rem + 3vw, 2.625rem);
  --h4-size: clamp(1.75rem, 1.4375rem + 1vw, 2rem);
  --h5-size: clamp(1.375rem, 1.2188rem + 0.5vw, 1.5rem);
  --h6-size: 16px;

  /* Headline Line-Heights */
  --h1-lh: clamp(3.75rem, 1.4063rem + 7.5vw, 5.625rem);
  --h2-lh: clamp(2.5rem, 0.4688rem + 6.5vw, 4.125rem);
  --h3-lh: clamp(2.125rem, 1.1875rem + 3vw, 2.875rem);
  --h4-lh: clamp(2rem, 1.5313rem + 1.5vw, 2.375rem);
  --h5-lh: clamp(1.75rem, 1.5938rem + 0.5vw, 1.875rem);
  --h6-lh: 1.4;

  /* Layout / Spacing */
  --container: 1200px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.28);
  --shadow-2: 0 6px 16px rgba(0,0,0,.45);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-6:1.5rem; --space-8:2rem; --space-12:3rem;
}

/* =========================
   RESET / BASE
   ========================= */
html{ box-sizing:border-box; }
*,*::before,*::after{ box-sizing:inherit; }
body{
  margin:0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video{ max-width:100%; height:auto; display:block; }

/* =========================
   TYPOGRAPHIE
   ========================= */
h1,h2,h3,h4,h5,h6{
  margin: 0 0 0.75em;
  letter-spacing: 0;
  color: var(--color-text);
}
h1{ font-weight:600; font-size:var(--h1-size); line-height:var(--h1-lh); }
h2{ font-weight:600; font-size:var(--h2-size); line-height:var(--h2-lh); }
h3{ font-weight:600; font-size:var(--h3-size); line-height:var(--h3-lh); }
h4{ font-weight:400; font-size:var(--h4-size); line-height:var(--h4-lh); }
h5{ font-weight:400; font-size:var(--h5-size); line-height:var(--h5-lh); }
h6{ font-weight:400; font-size:var(--h6-size); line-height:var(--h6-lh); }
p{ margin:0 0 var(--space-4); }
.lead{ font-size: clamp(1.125rem, 0.75rem + 1vw, 1.5rem); line-height: 1.5; }

/* Links */
a{ color: var(--color-link); text-decoration: none; }
a:hover, a:focus{ color: var(--color-link-active); text-decoration: underline; }

/* =========================
   LAYOUT
   ========================= */

/* Grund-Sektion */
.sektion{
  width: 100%;
  max-width: 1920px;
}

/* Optionaler Standard-Container (für globale Breitenbegrenzung) */
.container{
  width: min(100% - 2.5rem, var(--container));
}

/* Container-Basislayout */
.container-basic{
  display: flex;
  flex-direction: column;
  width: calc((1 - var(--container-widget-flex-grow, 0)) * 100%); /* Fallback 0 */
  align-self: stretch;
  flex-grow: 0;
  row-gap: 5%;
  column-gap: 5%;
  padding: 8%;
}
.greyscale {filter: grayscale(100%);}
/* =========================
   RESPONSIVE TWEAKS
   ========================= */
@media (max-width: 768px){
  h1{ font-size: clamp(2.5rem, 2.2rem + 3vw, 3.25rem); line-height: 1.1; }

  /* Engere Breite auf kleinen Screens */
  .container,
  .container-basic{
    width: min(100% - 1.25rem, var(--container));
	padding: 8em 8%;
  }
}