/* SuperSiteSkills CI Base CSS
   Erstellt aus CI_Manual_V1_2.pdf
   Fonts: Poppins + Roboto via Google Fonts
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Roboto:ital,wght@0,400;0,600;1,400&display=swap");

:root {
  /* Brand Colors */
  --sss-dark-blue: #181e2c;
  --sss-blue-grey: #253241;
  --sss-gold: #f5b505;
  --sss-grey-blue-65: #7c848d;
  --sss-blue-grey-25: #c8cbcf;
  --sss-light-grey: #f1f1f1;
  --sss-white: #ffffff;

  /* Gradients */
  --sss-gradient-90: linear-gradient(
    0deg,
    rgba(24, 30, 44, 1) 0%,
    rgba(37, 50, 65, 1) 100%
  );

  /* Semantic Colors */
  --color-bg-body: var(--sss-light-grey);
  --color-bg-dark: var(--sss-dark-blue);
  --color-bg-dark-secondary: var(--sss-blue-grey);
  --color-bg-card: var(--sss-white);
  --color-text-main: var(--sss-dark-blue);
  --color-text-muted: var(--sss-grey-blue-65);
  --color-text-on-dark: var(--sss-white);
  --color-link-footer: var(--sss-blue-grey-25);
  --color-border-light: var(--sss-blue-grey-25);
  --color-accent: var(--sss-gold);

  /* Typography */
  --font-headline: "Poppins", sans-serif;
  --font-body: "Roboto", sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  /* Manual sizes converted from pt to px/rem */
  --font-size-h1: 5rem;        /* 60pt ≈ 80px */
  --font-size-h2: 3.75rem;     /* 45pt ≈ 60px */
  --font-size-h3: 2.5rem;      /* 30pt ≈ 40px */
  --font-size-h4: 2.083rem;    /* 25pt ≈ 33.33px */

  --font-size-nav: 1.083rem;   /* 13pt ≈ 17.33px */
  --font-size-footer-title: 1.667rem; /* 20pt ≈ 26.67px */
  --font-size-footer-link: 1.333rem;  /* 16pt ≈ 21.33px */
  --font-size-body: 1.333rem;  /* 16pt ≈ 21.33px */
  --font-size-small: 1rem;     /* 12pt ≈ 16px */
  --font-size-sublevel-1: 1.25rem; /* 15pt ≈ 20px */
  --font-size-sublevel-2: 1rem;    /* 12pt ≈ 16px */

  /* Layout */
  --container-width: 1200px;
  --section-padding-y: 5rem;
  --section-padding-x: 1.5rem;

  /* Borders & Shadows */
  --border-width-button: 2px;
  --border-radius-none: 0;
  --image-border-width: 6px;
  --shadow-image: 0 8px 18px rgba(24, 30, 44, 0.24);
  --shadow-card: 0 12px 30px rgba(24, 30, 44, 0.10);

  /* Motion */
  --transition-fast: 180ms ease;
}

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-text-main);
  background: var(--color-bg-body);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--sss-dark-blue);
  text-decoration: none;
  transition: color var(--transition-fast), opacity var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--sss-gold);
}

/* Typography */
h1,
h2,
h3,
h4,
.heading {
  margin: 0 0 0.6em;
  font-family: var(--font-headline);
  color: var(--color-text-main);
  line-height: 1.1;
}

h1,
.h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
}

h2,
.h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
}

h3,
.h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
}

h4,
.h4 {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-light);
}

p {
  margin: 0 0 1.2em;
}

.text-small {
  font-size: var(--font-size-small);
}

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

.text-on-dark {
  color: var(--color-text-on-dark);
}

/* Layout helpers */
.container {
  width: min(100% - 2rem, var(--container-width));
  margin-inline: auto;
}

.section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

.section--dark {
  color: var(--color-text-on-dark);
  background: var(--color-bg-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark .heading {
  color: var(--color-text-on-dark);
}

.section--gradient {
  color: var(--color-text-on-dark);
  background: var(--sss-gradient-90);
}

/* Header / Navigation */
.site-header {
  background: var(--sss-dark-blue);
  color: var(--sss-white);
}

.site-header--mobile {
  background: var(--sss-gradient-90);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-headline);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.main-nav a {
  color: var(--sss-white);
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav .is-active {
  color: var(--sss-gold);
}

.sub-nav {
  background: var(--sss-white);
  box-shadow: var(--shadow-card);
}

.sub-nav__level-1 {
  font-family: var(--font-headline);
  font-size: var(--font-size-sublevel-1);
  font-weight: var(--font-weight-regular);
  color: var(--sss-dark-blue);
}

.sub-nav__level-2 {
  font-family: var(--font-headline);
  font-size: var(--font-size-sublevel-2);
  font-weight: var(--font-weight-regular);
  color: var(--sss-grey-blue-65);
}

.sub-nav__item {
  border-bottom: 1px solid var(--sss-blue-grey-25);
}

.sub-nav__item::before {
  content: "›";
  margin-right: 0.35em;
  color: var(--sss-gold);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1.35rem;
  font-family: var(--font-headline);
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: var(--border-radius-none);
  border: var(--border-width-button) solid transparent;
  cursor: pointer;
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.btn:focus-visible {
  outline: 2px solid var(--sss-gold);
  outline-offset: 3px;
}

/* Outline on dark background */
.btn--outline-light {
  color: var(--sss-white);
  background: transparent;
  border-color: var(--sss-blue-grey-25);
}

.btn--outline-light:hover,
.btn--outline-light:focus-visible {
  color: var(--sss-dark-blue);
  background: var(--sss-white);
  border-color: var(--sss-white);
}

/* Outline gold */
.btn--outline-gold {
  color: var(--sss-gold);
  background: transparent;
  border-color: var(--sss-gold);
}

.btn--outline-gold:hover,
.btn--outline-gold:focus-visible {
  color: var(--sss-dark-blue);
  background: var(--sss-gold);
  border-color: var(--sss-gold);
}

/* Filled button on dark background */
.btn--filled-dark {
  color: var(--sss-dark-blue);
  background: var(--sss-gold);
  border-color: var(--sss-gold);
}

.btn--filled-dark:hover,
.btn--filled-dark:focus-visible {
  color: var(--sss-dark-blue);
  background: var(--sss-white);
  border-color: var(--sss-white);
}

/* Filled button on light background */
.btn--filled-light {
  color: var(--sss-white);
  background: var(--sss-dark-blue);
  border-color: var(--sss-dark-blue);
}

.btn--filled-light:hover,
.btn--filled-light:focus-visible {
  color: var(--sss-dark-blue);
  background: var(--sss-white);
  border-color: var(--sss-dark-blue);
}

/* Cards */
.card {
  background: var(--sss-white);
  color: var(--sss-dark-blue);
  box-shadow: var(--shadow-card);
}

.card__content {
  padding: 2rem;
}

/* Images */
.image-framed {
  border: var(--image-border-width) solid var(--sss-white);
  box-shadow: var(--shadow-image);
}

.image-cutout {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Footer */
.site-footer {
  color: var(--sss-blue-grey-25);
  background: var(--sss-dark-blue);
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .footer-title {
  font-family: var(--font-headline);
  font-size: var(--font-size-footer-title);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--sss-white);
}

.site-footer a {
  color: var(--sss-blue-grey-25);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--sss-gold);
}

.site-footer .legal-link {
  font-family: var(--font-body);
  font-size: var(--font-size-small);
}

.sub-footer {
  color: var(--sss-grey-blue-65);
  border-top: 1px solid var(--sss-blue-grey);
}

/* Utility classes */
.bg-dark-blue {
  background: var(--sss-dark-blue);
}

.bg-blue-grey {
  background: var(--sss-blue-grey);
}

.bg-gradient-90 {
  background: var(--sss-gradient-90);
}

.bg-light-grey {
  background: var(--sss-light-grey);
}

.bg-white {
  background: var(--sss-white);
}

.color-gold {
  color: var(--sss-gold);
}

.color-muted {
  color: var(--sss-grey-blue-65);
}

.border-light {
  border-color: var(--sss-blue-grey-25);
}

/* Responsive adjustments */
@media (max-width: 900px) {
  :root {
    --font-size-h1: 3.25rem;
    --font-size-h2: 2.65rem;
    --font-size-h3: 2rem;
    --font-size-h4: 1.65rem;
    --font-size-body: 1.125rem;
  }

  .main-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  :root {
    --font-size-h1: 2.55rem;
    --font-size-h2: 2.15rem;
    --font-size-h3: 1.7rem;
    --font-size-h4: 1.4rem;
    --font-size-body: 1rem;
  }

  .section {
    padding-block: 3.5rem;
  }

  .btn {
    width: 100%;
  }
}