/* === Ruwac Base CSS - Lokale Aeonik Variable Fonts === */

/* 1. FONT DEFINITION */
/* Ein File pro Familie reduziert Requests und erlaubt alle benötigten Gewichte */

@font-face {
  font-family: 'Aeonik Pro';
  src: url('/typo3conf/ext/ruwac-theme/Resources/Public/Fonts/Aeonik Pro Full Family Website/aeonikprovf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik Extended Pro';
  src: url('/typo3conf/ext/ruwac-theme/Resources/Public/Fonts/Aeonik Extended Pro Full Family Website/aeonikextendedprovf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik Fono Pro';
  src: url('/typo3conf/ext/ruwac-theme/Resources/Public/Fonts/Aeonik Fono Pro Full Family Website/aeonikfonoprovf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* 2. CSS VARIABLEN FÜR DAS THEME */
:root {
    /* Farben */
    --ruwac-primary-color: #E2382A;
    --rw-primary-color: #E90006;
    --rw-primary-color-darker: #c4000a;
    --rw-bg-light-1: #f8f9fa;
    --rw-bg-light-2: #ffffff;
    --rw-white-color: #fff;
    --rw-border-color: #dee2e6;
    --rw-container-max-width: 1664px;
    --text-color-on-dark-main: #f0f0f5;       
    --text-color-on-dark-white: #ffffff;      
    --dark-stylish-edge: #282c34;             
    --dark-stylish-mid: #32363e;              
    --dark-stylish-center-slight-lift: #3a3f47; 
    --ruwac-border-color: #4a4f58;
    --rw-header-logo-width-desktop: 190px;
    --rw-header-logo-height-mobile: 26px;
    --rw-mobile-side-gap: 16px;
    --Size-6: clamp(16px, 5vw, 72px);
    --Size-8: 2.25rem;
    
    /* HIER KORRIGIERT: Variable hieß vorher rw-font-family, wurde im Body aber anders abgerufen */
    --ruwac-font-family: 'Aeonik Pro', sans-serif;
}


/* 3. GRUNDLEGENDE BODY- UND HTML-STILE */
html {
    overflow-y: scroll;
    overflow-x: hidden;
}

body {
    font-family: var(--ruwac-font-family); /* Nutzt jetzt korrekt Aeonik */
    font-size: 18px; 
    line-height: 1.6em;
    font-weight: 400;
}

.rw-bg-light,
.rw-bg-light-1,
.rw-scl-section--bg-light-1 {
    background-color: var(--rw-bg-light-1);
}

.rw-bg-white,
.rw-bg-light-2,
.rw-scl-section--bg-light-2 {
    background-color: var(--rw-bg-light-2);
}

a {
    color: var(--ruwac-primary-color);
    text-decoration: none; 
    transition: opacity 0.2s ease-in-out;
}

a:focus,
a:hover {
    color: var(--ruwac-primary-color);
    opacity: 0.8;
    text-decoration: underline;
}

p {
    margin-bottom: 1.5em;
    max-width: 65ch; 
}

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

body > header .logo-wrapper img.logo,
body > header .logo-wrapper img.logo-light,
body > header .logo-wrapper img.logo-dark,
body > header .header-main-row > a > img.logo,
body > header .header-main-row > a > img.logo-light,
body > header .header-main-row > a > img.logo-dark {
    width: var(--rw-header-logo-width-desktop) !important;
    max-width: none !important;
    height: auto !important;
}

/* 4. REVEAL ANIMATION UTILITY */
[data-rw-reveal],
.rw-reveal-block {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    transition:
        opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--rw-reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-rw-reveal="fade-left"],
.rw-reveal-block--left {
    transform: translate3d(0, 32px, 0);
}

[data-rw-reveal="fade-right"],
.rw-reveal-block--right {
    transform: translate3d(0, 32px, 0);
}

[data-rw-reveal="zoom-in"] {
    transform: translate3d(0, 32px, 0);
}

[data-rw-reveal="hero-up"],
[data-rw-reveal="hero-left"],
[data-rw-reveal="hero-right"],
.rw-reveal-block--hero {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
}

[data-rw-reveal="hero-up"] {
    transform: translate3d(0, 32px, 0);
}

[data-rw-reveal="hero-left"] {
    transform: translate3d(0, 32px, 0);
}

[data-rw-reveal="hero-right"] {
    transform: translate3d(0, 32px, 0);
}

[data-rw-reveal].is-revealed,
.rw-reveal-block.is-revealed {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-rw-reveal],
    .rw-reveal-block {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }
}

/* 4. TYPOGRAFIE / ÜBERSCHRIFTEN */
h1, h2, h3, h4, h5, h6 {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-family: var(--ruwac-font-family);
    color: var(--text-color-on-dark-white); 
    margin-bottom: 0.75em;
    line-height: 1.2;
}

h1 {
    font-family: 'Aeonik Extended Pro', sans-serif;
    font-weight: 900;
    font-size: 1em; 
    text-align: left;
    letter-spacing: 0px;
}

h2 {
    font-family: 'Aeonik Extended Pro', sans-serif;
    font-weight: 700;
    font-size: 2em; 
}

h3 {
    font-size: 1.5em; 
    font-weight: 500;
}

h4 {
    font-size: 1.2em; 
    font-weight: 500;
}

/* Hero-H1s sollen websiteweit nicht getrennt werden */
.container.header-image > h1,
.hero-content > h1,
.rw-hero-title,
.rw-job-info-hero__title,
.rw-hero-head__title-np,
.rw-job-detail-hero__title,
.blog-hero__title,
.news-hero__title {
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}


/* 5. RESPONSIVE ANPASSUNGEN & HELPER */
@media (max-width: 768px) {
    :root {
        --Size-6: var(--rw-mobile-side-gap);
        --Size-8: var(--rw-mobile-side-gap);
    }

    h1 { font-size: 8vw; }
    h2 { font-size: 6vw; }
    body { font-size: 16px; }

    .container,
    .container-fluid,
    .rw-scl-container,
    .rw-scl-container-np,
    [class^="rw-scl-container-"],
    [class*=" rw-scl-container-"] {
        padding-left: var(--rw-mobile-side-gap) !important;
        padding-right: var(--rw-mobile-side-gap) !important;
        box-sizing: border-box;
    }

    body > header .logo-wrapper img.logo,
    body > header .logo-wrapper img.logo-light,
    body > header .logo-wrapper img.logo-dark,
    body > header .header-main-row > a > img.logo,
    body > header .header-main-row > a > img.logo-light,
    body > header .header-main-row > a > img.logo-dark {
        width: auto !important;
        height: var(--rw-header-logo-height-mobile) !important;
        max-width: none !important;
    }

    p,
    li,
    dd,
    blockquote,
    figcaption,
    .text,
    .bodytext {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
        overflow-wrap: normal;
        word-break: normal;
        text-wrap: pretty;
    }

    .rw-hero-title,
    .rw-hero-head__title-np,
    .rw-job-info-hero__title,
    .rw-job-detail-hero__title,
    .news-hero__title {
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
        text-wrap: balance;
        hyphens: none;
    }
}

@media (min-width: 992px) {
    h1 { font-size: 3em; }
    h2 { font-size: 2.2em; }
    .table-responsive { display: table; }
}

@media (min-width: 1400px) {
    .container { max-width: 3000px; }
}
@media (max-width: 1399px) {
    .container { max-width: none; }
}