/* ==========================================================================
   Ueber uns — Ikonenschmiede Redesign 2026-04
   Variablen aus base.css, Nav aus header.css, Footer aus footer.css
   ========================================================================== */

/* Scope-Variable: content-max nur fuer Ueber-uns (1200px statt global 1400px) */
.about-hero,
.stats__inner,
.core__inner,
.principles__inner,
.founder__inner,
.discover__inner,
.cta-section__inner {
    --content-max: 1200px;
}


/* ==============================================
   HERO
============================================== */
.about-hero {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 48px 24px 0;
}
.about-hero__label {
    display: block;
    font-family: var(--font-body) !important;
    font-weight: 500;
    font-size: 11px;
    color: var(--ik-red-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 16px;
}
.about-hero__headline {
    font-family: var(--font-display) !important;
    font-weight: 200 !important;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--ik-black);
    margin-bottom: 20px;
}
.about-hero__subline {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px;
    color: var(--ik-text-secondary);
    line-height: 1.6;
    max-width: 600px;
    margin-bottom: 48px;
}
.about-hero__image {
    width: 100%;
    aspect-ratio: 2.5 / 1;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
    background: var(--ik-gray);
}


/* ==============================================
   STATS
============================================== */
.stats {
    background: var(--ik-gray);
    padding: 64px 0;
}
.stats__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px;
}
.stats__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
}
.stats__number {
    font-family: var(--font-display) !important;
    font-weight: 500;
    font-size: 40px;
    color: var(--ik-black);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.stats__label {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 13px;
    color: var(--ik-text-secondary);
}


/* ==============================================
   MANIFEST: Woran wir glauben
============================================== */
.manifest {
    background: var(--ik-white);
    border-top: 1px solid var(--ik-gray-border);
    padding: 96px 0;
    text-align: center;
}
.manifest__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}
.manifest__label {
    display: block;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ik-venetian-red, #B5453A);
    margin-bottom: 24px;
}
.manifest__statement {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    font-size: 32px;
    color: var(--ik-black);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 40px;
}
.manifest__body p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    color: var(--ik-text-secondary);
    line-height: 1.7;
    margin: 0 0 18px;
}
.manifest__body p:last-child {
    margin-bottom: 0;
}
.manifest__highlight {
    color: var(--ik-black) !important;
    font-size: 18px !important;
}
.manifest__highlight em {
    color: var(--ik-venetian-red, #B5453A);
    font-style: italic;
}
@media (max-width: 768px) {
    .manifest { padding: 64px 0; }
    .manifest__statement { font-size: 24px; }
    .manifest__body p { font-size: 16px; }
    .manifest__highlight { font-size: 17px !important; }
}


/* ==============================================
   CORE STATEMENT
============================================== */
.core {
    background: var(--ik-white);
    padding: 96px 0;
    text-align: center;
}
.core__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px;
}
.core__statement {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    font-size: 28px;
    color: var(--ik-black);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}
.core__text {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 15px;
    color: var(--ik-text-secondary);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto;
}


/* ==============================================
   THREE PRINCIPLES
============================================== */
.principles {
    background: var(--ik-white);
    border-top: 1px solid var(--ik-gray-border);
    padding: 96px 0;
}
.principles__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px;
}
.principles__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}
.principle__header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}
.principle__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--ik-red);
}
.principle__icon svg {
    width: 100%;
    height: 100%;
}
.principle__title {
    font-family: var(--font-display) !important;
    font-weight: 500;
    font-size: 20px;
    color: var(--ik-black);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}
.principle__text {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 15px;
    color: var(--ik-text-secondary);
    line-height: 1.6;
    max-width: 320px;
}

/* Principle fade-in animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.principle:nth-child(1) { animation: fadeInUp 0.6s var(--ease) 0.1s both; }
.principle:nth-child(2) { animation: fadeInUp 0.6s var(--ease) 0.25s both; }
.principle:nth-child(3) { animation: fadeInUp 0.6s var(--ease) 0.4s both; }


/* ==============================================
   FOUNDER
============================================== */
.founder {
    background: var(--ik-gray);
    padding: 96px 0;
}
.founder__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px;
}
.founder__grid {
    display: grid !important;
    grid-template-columns: 45fr 55fr;
    gap: 48px;
    align-items: center;
}
.founder__img-wrap {
    position: relative;
    height: 480px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ik-gray-border);
}
.founder__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.founder__text {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}
.founder__label {
    display: block;
    font-family: var(--font-body) !important;
    font-weight: 500;
    font-size: 11px;
    color: var(--ik-red-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 24px;
}
.founder__name {
    font-family: var(--font-display) !important;
    font-weight: 500;
    font-size: 28px;
    color: var(--ik-black);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.founder__role {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 13px;
    color: var(--ik-text-tertiary);
    margin-bottom: 20px;
}
.founder__quote-mark {
    font-family: var(--font-display) !important;
    font-weight: 200;
    font-size: 48px;
    line-height: 1;
    color: var(--ik-gray-border);
    margin-bottom: 8px;
}
.founder__quote {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px;
    /* IVE-Korrektur: kein font-style: italic (Brand Guide) */
    color: var(--ik-text-secondary);
    line-height: 1.7;
    max-width: 420px;
    margin-bottom: 16px;
}
.founder__bio {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 15px;
    color: var(--ik-text-secondary);
    line-height: 1.6;
    max-width: 420px;
}
.founder__bio p { margin-bottom: 12px; }
.founder__bio p:last-child { margin-bottom: 0; }
.founder__claim {
    font-family: var(--font-display) !important;
    font-weight: 500;
    font-size: 15px;
    color: var(--ik-black);
    letter-spacing: 0.02em;
    margin-top: 24px;
}


/* ==============================================
   DISCOVER MORE
============================================== */
.discover {
    background: var(--ik-white);
    border-top: 1px solid var(--ik-gray-border);
    padding: 96px 0;
}
.discover__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px;
}
.discover__label {
    display: block;
    font-family: var(--font-body) !important;
    font-weight: 500;
    font-size: 11px;
    color: var(--ik-red-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.discover__headline {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    font-size: clamp(24px, 3vw, 32px);
    color: var(--ik-black);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 48px;
}
.discover__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.discover-card {
    display: block !important;
    text-decoration: none;
    color: inherit;
}
.discover-card__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--ik-gray);
}
.discover-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s var(--ease);
}
/* IVE-Korrektur: Hover = opacity, nicht Farbwechsel */
.discover-card:hover .discover-card__img { opacity: 0.7; }
.discover-card__title {
    font-family: var(--font-display) !important;
    font-weight: 500;
    font-size: 18px;
    color: var(--ik-black);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.discover-card__desc {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 14px;
    color: var(--ik-text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}
.discover-card__cta {
    font-family: var(--font-body) !important;
    font-weight: 500;
    font-size: 13px;
    color: var(--ik-red);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.3s var(--ease);
}
/* IVE-Korrektur: Hover = opacity statt Farbwechsel */
.discover-card:hover .discover-card__cta { opacity: 0.7; }
.discover-card__arrow {
    transition: transform 0.25s var(--ease);
}
.discover-card:hover .discover-card__arrow { transform: translateX(3px); }


/* ==============================================
   CTA-BEREICH
============================================== */
.cta-section {
    background: var(--ik-gray);
    padding: 96px 0;
    text-align: center;
}
.cta-section__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 24px;
}
.cta-section__label {
    display: block;
    font-family: var(--font-body) !important;
    font-weight: 500;
    font-size: 11px;
    color: var(--ik-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
}
.cta-section__headline {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 3.5vw, 36px);
    color: var(--ik-black);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.cta-section__sub {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 16px;
    color: var(--ik-text-secondary);
    line-height: 1.6;
    max-width: 540px;
    margin: 0 auto 32px;
}
.cta-section__form { display: flex; justify-content: center; margin-bottom: 16px; }
.cta-section__combo {
    display: flex;
    background: #FFFFFF;
    border: 1px solid var(--ik-gray-border);
    border-radius: 6px;
    overflow: hidden;
    width: 480px;
    max-width: 100%;
}
.cta-section__input {
    flex: 1;
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 15px;
    color: var(--ik-black);
    background: transparent;
    border: none;
    padding: 14px 20px;
    outline: none;
    min-height: 44px;
}
.cta-section__input::placeholder { color: var(--ik-text-tertiary); }
.cta-section__input:focus { outline: none; }
.cta-section__btn {
    font-family: var(--font-body) !important;
    font-weight: 500;
    font-size: 13px;
    color: #FFFFFF;
    background: var(--ik-red-metal);
    border: none;
    padding: 14px 24px;
    border-radius: 6px;
    margin: 4px;
    cursor: pointer;
    white-space: nowrap;
    min-height: 44px;
    transition: opacity 0.3s var(--ease);
}
/* IVE-Korrektur: Hover = opacity statt Farbwechsel */
.cta-section__btn:hover { opacity: 0.7; }
.cta-section__bonus {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 14px;
    color: var(--ik-text-tertiary);
    margin-bottom: 12px;
}
.cta-section__privacy {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    font-size: 13px;
    color: var(--ik-text-tertiary);
}
.cta-section__privacy a {
    color: var(--ik-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cta-section__privacy a:hover { opacity: 0.7; }


/* ==============================================
   OUTLINE BUTTON (falls verwendet)
============================================== */
.btn--outline {
    display: inline-block;
    font-family: var(--font-body) !important;
    font-weight: 500;
    font-size: 13px;
    color: var(--ik-red);
    background: transparent;
    border: 1px solid var(--ik-red);
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    min-height: 44px;
    transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* IVE-Korrektur: Outline-Hover per Brand Guide */
.btn--outline:hover {
    background: #FDF7F6;
    color: var(--ik-red-dark);
    border-color: var(--ik-red-dark);
}


/* ==============================================
   RESPONSIVE: 768px
============================================== */
@media (max-width: 768px) {
    /* Hero */
    .about-hero { padding: 32px 16px 0; }
    .about-hero__headline { font-size: clamp(26px, 8vw, 36px); }
    .about-hero__subline { margin-bottom: 32px; }

    /* Stats */
    .stats { padding: 48px 0; }
    .stats__inner { padding: 0 16px; }
    .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

    /* Core */
    .core { padding: 64px 0; }
    .core__inner { padding: 0 16px; }
    .core__statement { font-size: 22px; }

    /* Principles */
    .principles { padding: 64px 0; }
    .principles__inner { padding: 0 16px; }
    .principles__grid { grid-template-columns: 1fr; gap: 32px; }
    .principle__text { max-width: 100%; }

    /* Founder */
    .founder { padding: 64px 0; }
    .founder__inner { padding: 0 16px; }
    .founder__grid { grid-template-columns: 1fr; gap: 32px; }
    .founder__img-wrap { height: 320px; }
    .founder__quote, .founder__bio { max-width: 100%; }

    /* Discover */
    .discover { padding: 64px 0; }
    .discover__inner { padding: 0 16px; }
    .discover__grid { grid-template-columns: 1fr; gap: 32px; }

    /* CTA */
    .cta-section { padding: 64px 0; }
    .cta-section__inner { padding: 0 16px; }
    .cta-section__combo { width: 100%; flex-direction: column; }
    .cta-section__input { padding: 14px 16px; }
    .cta-section__btn { margin: 4px; }
}


/* ==============================================
   RESPONSIVE: 480px
============================================== */
@media (max-width: 480px) {
    .stats__grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .about-hero__image { aspect-ratio: 16 / 9; }
}


/* ==============================================
   REDUCED MOTION
============================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}