/*
 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(2.34375rem, 0.878938rem + 7.5vw, 3.51562rem);
  --h2-size: clamp(1.48438rem, 0.214875rem + 6.5vw, 2.5rem);
  --h3-size: clamp(1.17188rem, 0.585938rem + 3vw, 1.64062rem);
  --h4-size: clamp(1.09375rem, 0.898438rem + 1vw, 1.25rem);
  --h5-size: clamp(0.859375rem, 0.76175rem + 0.5vw, 0.9375rem);
  --h6-size: 16px;

  /* Headline Line-Heights */
  --h1-lh: clamp(2.34375rem, 0.878938rem + 7.5vw, 3.51562rem);
  --h2-lh: clamp(1.5625rem, 0.293rem + 6.5vw, 2.57812rem);
  --h3-lh: clamp(1.32812rem, 0.742188rem + 3vw, 1.79688rem);
  --h4-lh: clamp(1.25rem, 0.957063rem + 1.5vw, 1.48438rem);
  --h5-lh: clamp(1.09375rem, 0.996125rem + 0.5vw, 1.17188rem);
  --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:0.15625rem; --space-2:0.3125rem; --space-3:0.46875rem; --space-4:0.625rem;
  --space-6:0.9375rem; --space-8:1.25rem; --space-12:1.875rem;
}

/* =========================
   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(0.703125rem, 0.46875rem + 1vw, 0.9375rem); 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% - 1.5625rem, 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(1.5625rem, 1.375rem + 3vw, 2.03125rem); line-height: 1.1; }

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