/* ==========================================================================
  Otto Garne — "Ich bin ein Spinner"
  Modern rebuild stylesheet
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ==========================================================================
  Fonts
   ========================================================================== */

@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../../fonts/open-sans-v15-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-300.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../../fonts/open-sans-v15-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../../fonts/open-sans-v15-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-700.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("../../fonts/open-sans-v15-latin-ext_greek_cyrillic_cyrillic-ext_greek-ext_latin_vietnamese-800.woff2") format("woff2");
}
@font-face {
  font-family: "News Cycle"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../../fonts/news-cycle-v14-latin-ext_latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../../fonts/ubuntu-v11-latin-ext_cyrillic_greek-ext_latin-500.woff2") format("woff2");
}

/* ==========================================================================
  Design tokens
   ========================================================================== */

@layer tokens {
  :root {

    /* brand palette */

    --c-brown:    #382d24;   /* primary text/headings-hover, menu-hover, footer text, back-to-top hover */
    --c-grey:     #87888a;   /* menu + footer links */
    --c-grey-2:   #a6a6a6;   /* portfolio nav arrows, breadcrumb hover */
    --c-orange:   #f8b771;   /* links, active accents, back-to-top */
    --c-sep:      #b58666;   /* .separator--normal */
    --c-teal:     #008db1;   /* textillaborant salary box */
    --c-text:     #000;
    --c-heading:  #000;
    --c-h1:       #333;

    --bg-page:    #fff;
    --bg-header:  #f7f6f5;
    --bg-footer:  #eaeaea;
    --border-mobile: #e8e6e5;

    /* type */

    --font-body:   "Open Sans", sans-serif;
    --font-menu:   "Ubuntu", sans-serif;
    --font-bullet: "News Cycle", sans-serif;

    /* metrics */

    --container: 1100px;
    --gutter: 15px;
    --header-h: 100px;
    --section-pad: 50px;
  }
}

/* ==========================================================================
  Reset
   ========================================================================== */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100vh; -webkit-font-smoothing: antialiased; }
  img, picture, svg, iframe { display: block; max-width: 100%; }
  img { height: auto; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }
}

/* ==========================================================================
  Base typography
   ========================================================================== */

@layer base {
  body {
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 100;
    line-height: 24px;
    color: var(--c-text);
    background: var(--bg-page);
    overflow-x: hidden;
  }

  p { line-height: 37px; margin-bottom: 28px; }
  p:last-child { margin-bottom: 0; }
  p a, a.inline { color: var(--c-orange); transition: color .15s ease-out; }

  strong, b { font-weight: 700; }

  h1, h2, h3, h4, h5, h6 { word-wrap: break-word; hyphens: auto; }
  h1 { font-size: 56px; font-weight: 800; line-height: 70px; letter-spacing: 0.02em; color: var(--c-h1); }
  h2 { font-size: 35px; font-weight: 700; line-height: 34px; letter-spacing: 0.02em; color: var(--c-heading); margin-bottom: 30px; }
  h3 { font-size: 24px; font-weight: 400; line-height: 1.285em; color: #393939; }
  h4 { font-size: 20px; font-weight: 700; line-height: 37px; color: var(--c-heading); }
  h5 { font-size: 20px; font-weight: 700; line-height: 40px; color: var(--c-heading); }
  h6 { font-size: 13px; font-weight: 700; line-height: 1.571em; color: var(--c-brown); }

  h1 + h4{ margin-top: 14px; }

  @media (max-width: 600px) {
    h1 { font-size: 36px; line-height: 50px; }
    h2 { font-size: 26px; }
    h4, h5, p { font-size: 16px; line-height: 28px; }
  }
}

/* ==========================================================================
  Utilities & shared inline SVG icon sizing
   ========================================================================== */

@layer utilities {
  .container { width: min(var(--container), 100%); margin-inline: auto; padding-inline: var(--gutter); }
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

  /* responsive container step-downs (matches the original breakpoints) */

  @media (max-width: 1200px) { :root { --container: 950px; } }
  @media (max-width: 1000px) { :root { --container: 768px; } }
  @media (max-width: 768px)  { :root { --container: 600px; } }
  @media (max-width: 600px)  { :root { --container: 420px; } }
  @media (max-width: 480px)  { :root { --container: 300px; } }
  @media (max-width: 350px)  { :root { --container: 95%; } }
}

/* Hide the inline SVG sprite element itself. */

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
  Layout — site header, navigation, footer
   ========================================================================== */

@layer layout {

  /* --- Header shell -------------------------------------------------------- */
  /* Sub-pages: header sits in flow at the top; when scrolled past, JS adds
     .is-sticky and it re-appears fixed with a slide-down reveal (like the theme). */

  .site-header {
    position: relative; z-index: 110;
    background: var(--bg-header);
    transition: background .2s ease-out;
  }
  .site-header.is-sticky {
    position: fixed; top: 0; left: 0; right: 0;
    animation: header-reveal .33s cubic-bezier(.694, .048, .335, 1) both;
  }

  /* offset the content by the header height only while it is detached (fixed) */

  body.is-header-fixed:not(.page-home) main { padding-top: var(--header-h); }
  @keyframes header-reveal { from { transform: translateY(-100%); } to { transform: translateY(0); } }

  .site-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-h);
    max-width: none;             /* full-width bar; menus/logo self-center */
    padding-inline: 5px;
  }
  @media (max-width: 480px) { .site-header__bar { padding-inline: 25px; } }
  @media (max-width: 420px) { .site-header__bar { padding-inline: 15px; } }

  /* Home: header overlays the hero, transparent until scrolled (always fixed) */

  body.page-home .site-header { position: fixed; inset: 0 0 auto 0; background: transparent; animation: none; }
  body.page-home .site-header.is-scrolled { background: var(--bg-header); }

  /* --- Logo ---------------------------------------------------------------- */

  .logo { grid-column: 2; justify-self: center; height: var(--header-h); display: flex; align-items: center; }
  .logo img { height: 100px; width: auto; }
  @media (max-width: 1000px) { .logo img { height: 80px; } }
  @media (max-width: 480px)  { .logo img { height: 70px; } }

  /* --- Desktop menus ------------------------------------------------------- */

  .main-nav { display: flex; }
  .main-nav--left  { grid-column: 1; justify-content: flex-end; }
  .main-nav--right { grid-column: 3; justify-content: flex-start; }
  .main-nav > ul { display: flex; align-items: center; }
  .main-nav > ul > li { position: relative; margin: 0 5px; }
  .main-nav a {
    display: block;
    font-family: var(--font-menu);
    font-size: 18px; font-weight: 500; letter-spacing: 3px;
    line-height: var(--header-h);
    color: var(--c-grey);
    transition: color .15s ease-out;
  }
  .main-nav > ul > li > a > span,
  .main-nav > ul > li > a {
        transition: text-decoration .2s ease-out, border-color .2s ease-out, background-color .2s ease-out;
  }
  .main-nav > ul > li > a .label {
    display: inline-block; line-height: 40px; padding: 0 9px 0 15px;
    border: 1px solid transparent;
  }
  .main-nav > ul > li:hover > a,
  .main-nav > ul > li > a:hover { color: var(--c-grey); }
  .main-nav > ul > li:hover > a .label,
  .main-nav > ul > li[aria-current] > a .label { border-color: white; }
  .is-scrolled .main-nav > ul > li:hover > a .label,
  .is-scrolled .main-nav > ul > li[aria-current] > a .label { border-color: var(--c-grey); }
  .main-nav > ul > li > a.current,
  .main-nav > ul > li.is-active > a { color: var(--c-text); }

  body.page-home .site-header:not(.is-scrolled) .main-nav a { color: #fff; }

  /* --- Desktop dropdown ---------------------------------------------------- */

  .submenu {
    position: absolute; top: calc(100% - 30px); left: 0; z-index: 10;
    min-width: 460px; padding: 0;
    opacity: 0; visibility: hidden; overflow: hidden;
    transition: opacity .15s ease-out;
  }
  .main-nav .has-sub:hover > .submenu,
  .submenu.drop_down_start { opacity: 1; visibility: visible; overflow: visible; }
  .submenu ul { background: rgba(255,255,255,.9); padding: 10px 0; }
  .submenu li { display: block; }
  .submenu a {
    display: block; line-height: 26px; padding: 6px 20px; margin: 0;
    font-family: var(--font-menu); font-size: 16px; font-weight: 500;
    letter-spacing: 2px; color: var(--c-grey) !important; white-space: nowrap;
  }
  .submenu a:hover { color: #000 !important; }

  /* --- Mobile nav ---------------------------------------------------------- */

  .nav-toggle { display: none; grid-column: 1; justify-self: start; width: 40px; height: var(--header-h); color: var(--c-brown); font-size: 19px; align-items: center; margin-left: 39px; }
  .nav-toggle .icon { width: 22px; height: 22px; }

  .mobile-nav { display: none; padding: 0 45px; background: #fff; }
  .mobile-nav ul { width: 100%; }
  .mobile-nav li { position: relative; border-bottom: 1px solid var(--border-mobile); }
  .mobile-nav a, .mobile-nav .sub-toggle {
    display: block; padding: 9px 0; line-height: 17px;
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px;
    color: var(--c-brown);
  }
  .mobile-nav a:hover { color: #000; }
  .mobile-nav .submenu-mobile { display: none; }
  .mobile-nav .submenu-mobile.open { display: block; }
  .mobile-nav .submenu-mobile li { margin-left: 20px; }
  .mobile-nav .sub-toggle {
    position: absolute; right: 0; top: 0; width: 50px; height: 37px; line-height: 37px;
    padding: 0 10px 0 0; text-align: right; color: var(--c-brown);
  }
  .mobile-nav .sub-toggle .icon { display: inline-block; width: 1em; height: 1em; vertical-align: middle; transition: transform .2s; }
  .mobile-nav .sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

  @media (max-width: 1000px) {
    .main-nav { display: none; }
    .nav-toggle { display: inline-flex; }

    /* mobile: header scrolls with the page (matches the theme); no fixed overlay */

    .site-header, .site-header.is-sticky, body.page-home .site-header { position: relative; background: var(--bg-header); animation: none; }
    body.is-header-fixed:not(.page-home) main { padding-top: 0; }
    body.page-home .site-header .main-nav a { color: var(--c-brown); }
  }

  /* --- Footer -------------------------------------------------------------- */

  .site-footer {
    min-height: 168px; display: flex; align-items: center; justify-content: center;
    background: var(--bg-footer); text-align: center;
  }
  .site-footer p { font-size: 17px; font-weight: 300; line-height: 25px; color: var(--c-brown); margin: 0; }
  .site-footer a { color: var(--c-grey); transition: color .15s ease-out; }
  .site-footer a:hover { color: #000; }
}

/* ==========================================================================
  Components
   ========================================================================== */

@layer components {

  /* --- Back-to-top --------------------------------------------------------- */

  .back-to-top {
    position: fixed; right: 25px; bottom: 65px; z-index: 10000;
    width: 46px; height: 46px; display: grid; place-items: center;
    color: #f7f6f5; background: var(--c-orange);
    border: 1px solid transparent; box-sizing: border-box;
    opacity: 0; visibility: hidden; transition: opacity .15s ease-out;
  }
  .back-to-top .icon { width: 25px; height: 25px; }
  .back-to-top.on { opacity: 1; visibility: visible; }
  .back-to-top:hover { color: var(--c-brown); background: transparent; border-color: var(--c-brown); }

  /* --- Sections ------------------------------------------------------------ */

  .section { padding: var(--section-pad) 0; }
  .section--tight { padding: 0; }
  .section__center { text-align: center; }

  /* airier block rhythm around major section headings (mirrors original block spacing) */

  .section .container > :is(h1, h2):not(:first-child) { margin-top: 40px; }
  .video iframe { border: 0; max-width: 100%; aspect-ratio: 1060 / 596; }

  /* --- Bullet list (News Cycle + check marker) ----------------------------- */

  ul.bulletliste { }
  ul.bulletliste li {
    font-family: var(--font-bullet); font-size: 20px; font-weight: 400; line-height: 37px;
    text-align: left; position: relative; padding-left: 30px;
  }
  ul.bulletliste li::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: .8em; height: .9em; background: currentColor;
    -webkit-mask: var(--icon-check) no-repeat center / contain;
            mask: var(--icon-check) no-repeat center / contain;
  }

  /* --- Separator ----------------------------------------------------------- */

  .separator { display: block; border-bottom: 1px solid #b2b2b2; margin: 10px 0; }
  .separator--transparent { border-bottom-color: transparent; }
  .separator--normal { border-bottom: 6px solid var(--c-sep); }

  /* --- Hero slider (design-coordinate scaling) ----------------------------- */

  .hero { position: relative; width: 100%; margin: 0 auto; overflow: hidden; }
  .hero__stage { position: relative; transform-origin: 0 0; }
  .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
  .hero__slide.is-active { opacity: 1; }

  /* staggered fade-up entrance for the positioned layers when a slide activates */

  .hero__slide.is-active .hero__layer { animation: hero-layer-in .8s ease both; }
  .hero__slide.is-active .hero__layer:nth-child(2) { animation-delay: .15s; }
  .hero__slide.is-active .hero__layer:nth-child(3) { animation-delay: .30s; }
  .hero__slide.is-active .hero__layer:nth-child(4) { animation-delay: .45s; }
  .hero__slide.is-active .hero__layer:nth-child(5) { animation-delay: .60s; }
  .hero__slide.is-active .hero__layer:nth-child(6) { animation-delay: .75s; }
  .hero__slide.is-active .hero__layer:nth-child(n+7) { animation-delay: .9s; }
  @keyframes hero-layer-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hero__layer { position: absolute; max-width: none; }         /* inline top/left place each layer */
  .hero__text { line-height: 1.2em; white-space: nowrap; margin-bottom: 0; }
  .hero__bullets { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 20; display: flex; justify-content: center; gap: 10px; }
  .hero__bullet {
    width: 12px; height: 12px; padding: 0; border-radius: 50%;
    border: 2px solid #fff; background: rgba(255,255,255,.35);
    box-shadow: 0 0 3px rgba(0,0,0,.35); cursor: pointer; transition: background .2s, transform .2s;
  }
  .hero__bullet:hover { transform: scale(1.15); }
  .hero__bullet.is-active { background: #fff; }
  @media (prefers-reduced-motion: reduce) {
    .hero__slide { transition: none; }
    .hero__slide.is-active .hero__layer { animation: none; }
    .site-header.is-sticky { animation: none; }
  }

  /* --- Portfolio grid (Ausbildung cards) ----------------------------------- */

  .portfolio { display: grid; grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 1000px) { .portfolio { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px)  { .portfolio { grid-template-columns: 1fr; } }
  .card { position: relative; overflow: hidden; }
  .card__img { display: block; width: 100%; aspect-ratio: 1100 / 820; object-fit: cover; }
  .card__shader { position: absolute; inset: 0; z-index: 3; background: rgba(62,62,62,.7); opacity: 0; transition: opacity .3s cubic-bezier(.785,.135,.15,.86); }
  .card__overlay { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; transition: opacity .3s ease-out; padding: 0 20px; }
  .card__link { position: absolute; inset: 0; z-index: 5; }
  .card:hover .card__shader, .card:hover .card__overlay { opacity: 1; }
  .card__title { color: #fff; font-size: 19px; font-weight: 700; line-height: 34px; text-transform: none; transition: color .15s; }
  .card:hover .card__title { color: #fff; }
  .card__sep { display: inline-block; height: 2px; width: 20%; margin: 10px auto; background: transparent; }
  .card:hover .card__sep { background: #279eff; }
  @media (max-width: 600px) { .card:hover .card__sep { background: var(--c-orange); } }

  /* --- Two-column blocks + CTA --------------------------------------------- */

  .cols-2 { display: flex; flex-direction: row; gap: 30px; }
  .cols-2 + .cols-2,
  .cols-2 + p { margin-top: 30px; }
  @media (max-width: 600px) { .cols-2 { flex-direction: column; } }
  @media (min-width: 601px) {
    .cols-2 { align-items: center; }
    .cols-2 ul { padding-bottom: 1em; }
  }
  .contact-block { grid-template-columns: minmax(0, 240px) 1fr; align-items: center; gap: 24px; margin-bottom: 20px; }
  .contact-block p { margin: 0; }
  .cta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; align-items: center; justify-content: center; }
  .cta h1 { padding-bottom: 0.6em; }
  .cta h1 a { color: var(--c-h1); }

  /* --- Portfolio-single (detail) navigation -------------------------------- */

  .portfolio-nav { position: relative; text-align: center; padding: 40px 0 50px; }
  .portfolio-nav a { display: inline-flex; color: var(--c-grey-2); font-size: 30px; transition: color .15s; }
  .portfolio-nav a:hover { color: #393939; }
  .portfolio-nav .prev { position: absolute; left: 0; top: 40px; }
  .portfolio-nav .next { position: absolute; right: 0; top: 40px; }
  .portfolio-nav .icon { width: 30px; height: 33px; }

  /* --- Salary box (per-profession colour, set inline) ---------------------- */

  .box-salary { margin-top: 20px; padding: 12px 20px 18px; color: #fff; }
  .box-salary h4 { color: #fff; }
  .verdienst { color: #fff; }
}

/* icon mask data (check) used by bullet lists */

:root {
  --icon-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438 105 167 377l-157-157 30-30 127 127L408 75z"/></svg>');
}