/*
========================================
components.css
Wiederverwendbare Komponenten
========================================
*/

/* Buttons */
.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 26px;

    border-radius: var(--radius-full);

    font-weight: 700;
    letter-spacing: -0.01em;

    transition:
        transform var(--transition-medium),
        background var(--transition-medium),
        color var(--transition-medium),
        box-shadow var(--transition-medium);
}


.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255, 255, 255, 0.22) 42%,
            rgba(255, 255, 255, 0.34) 50%,
            rgba(255, 255, 255, 0.22) 58%,
            transparent 100%
        );

    transform: translateX(-120%);
    transition: transform 700ms ease;
}

@media (hover: hover) {
    .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 50px rgba(15, 111, 255, 0.24);
    }

    .btn:hover::before {
        transform: translateX(120%);
    }
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-white);
}

.btn-primary:hover {
    background: var(--color-accent-dark);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    backdrop-filter: blur(20px);
}

.btn-light {
    background: var(--color-gray-light);
    color: var(--color-dark);
}

/* Karten */
.card {
    position: relative;
	overflow: hidden;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium);
}

@media (hover: hover) {
    .card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-card);
    }
}

.card-dark {
    background: var(--color-dark-soft);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-inverted);
}

/* Bildflächen */
.image-frame {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-gray-light);
}

.image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--text-inverted);
    background: var(--color-dark);
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-media img,
.hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
	pointer-events: none;
/*    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.68),
        rgba(0, 0, 0, 0.18)
    );*/
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px;
    padding: 0 var(--container-padding);
	margin-top: -200px;

}

.hero-content h1{
    font-size: clamp(52px, 5vw, 82px);
    line-height: 0.92;
}

.hero-subtitle {
    max-width: 680px;
    margin-top: var(--space-md);
    color: rgba(255, 255, 255, 0.78);
}

/* CTA Bereich */
.cta-section {
    padding: var(--space-xl) var(--container-padding);
    background: var(--color-dark);
    color: var(--text-inverted);
    text-align: center;
}

.cta-section p {
    max-width: 720px;
    margin: var(--space-md) auto 0;
    color: rgba(255, 255, 255, 0.72);
}

/* Timeline */
.timeline {
    display: grid;
    gap: var(--space-md);
}

.timeline-item {
    padding-left: var(--space-md);
    border-left: 2px solid var(--color-accent);
}

/* Kleine Abschnittsüberschrift */
.eyebrow {
    display: inline-block;
    margin-bottom: var(--space-sm);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Hero Buttons */
.hero-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

/* Große Vision-Aussage */
.statement {
    max-width: 1100px;
}

/* Abschnittskopf */
.section-heading {
    max-width: 900px;
}

/* Produktbereich */
.product-family {
    background: var(--color-gray-light);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-md);
}

.product-tile {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-soft);
}

.product-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.78;
    transition: transform var(--transition-slow), opacity var(--transition-medium);
}

@media (hover: hover) {
    .product-tile:hover img {
        transform: scale(1.06);
        opacity: 0.52;
    }
}

.product-tile div {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 2;
}

.product-tile span {
    display: inline-block;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.78);
}

/* Research Grid */
.research-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-md);
}

.research-grid .card {
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    font-size: 22px;
    font-weight: 700;
}

/* Footer */
.site-footer {
    padding: 36px var(--container-padding);
    background: var(--color-black);
    color: rgba(255, 255, 255, 0.72);
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    align-items: center;
}

.footer-links {
    display: flex;
    gap: var(--space-md);
}

.footer-links a:hover {
    color: var(--color-white);
}

/* Timeline-Jahr oder Phase */
.timeline-year {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Motivation Vision Block */
.motivation-vision {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-dark);
}

.motivation-vision-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.motivation-vision-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.motivation-vision::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
	pointer-events: none;
 /*   background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.74),
            rgba(0, 0, 0, 0.22)
        );*/
}

.motivation-vision-content {
    position: relative;
    z-index: 2;
    max-width: 920px;
    padding: var(--space-xl) var(--container-padding);
}

.motivation-vision-content p {
    color: rgba(255, 255, 255, 0.76);
}

/* Produkt Benefits Bereich */
.product-benefits {
    background: var(--color-gray-light);
}

/* Anwendungskarten */
.application-card {
	position: relative;
	overflow: hidden;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium);
}

@media (hover: hover) {
    .application-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-card);
    }
}

.application-card span {
    display: inline-block;
    margin-bottom: var(--space-sm);
    font-size: 14px;
    font-weight: 800;
    color: var(--color-accent);
}

.application-card h3 {
    margin-bottom: var(--space-sm);
}

/* Forschung-Verlinkung */
.research-link-section {
    background: var(--color-gray-light);
}

.research-link-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-height: 320px;
    padding: var(--space-md);

    border-radius: var(--radius-lg);
    background:
        linear-gradient(
            135deg,
            rgba(15, 111, 255, 0.95),
            rgba(16, 18, 20, 0.95)
        );
    color: var(--color-white);

    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium);
}

@media (hover: hover) {
    .research-link-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-card);
    }
}

.research-link-card span {
    margin-bottom: var(--space-sm);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.research-link-card p {
    color: rgba(255, 255, 255, 0.72);
}

/* Research Hub Hintergrund */
.research-hub-section {
    background: var(--color-gray-light);
}

/* Grid für die sieben Background-Karten */
.background-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

/* Einzelne Background-Karte */
.background-card {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-dark);
    color: var(--color-white);
    box-shadow: var(--shadow-soft);
}

/* Das siebte Thema darf breiter wirken */
.background-card:nth-child(7) {
    grid-column: span 3;
    min-height: 360px;
}

/* Bild in der Karte */
.background-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
    transition:
        transform var(--transition-slow),
        opacity var(--transition-medium);
}

/* Hover-Bildbewegung */
@media (hover: hover) {
    .background-card:hover img {
        transform: scale(1.06);
        opacity: 0.46;
    }
}

/* Textfläche in der Karte */
.background-card div {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 26px;
    z-index: 2;
}

/* BG-Label */
.background-card span {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.72);
}

/* Textfarbe */
.background-card p {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.76);
}

/* Infografik-Bereich */
.infographic-section {
    background: var(--color-gray-light);
}

/* Platzhalter für spätere Infografiken */
.infographic-placeholder {
    min-height: 520px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            rgba(15, 111, 255, 0.12),
            rgba(16, 18, 20, 0.04)
        );
}

/* Inhalt des Platzhalters */
.infographic-placeholder div {
    max-width: 620px;
    text-align: center;
    padding: var(--space-md);
}

/* Label */
.infographic-placeholder span {
    display: inline-block;
    margin-bottom: var(--space-sm);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Forschung Fakten */
.research-facts {
    display: grid;
    gap: var(--space-sm);
}

/* Einzelner Fakt */
.research-facts article {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Nummer */
.research-facts span {
    display: inline-block;
    margin-bottom: var(--space-sm);
    font-size: 13px;
    font-weight: 800;
    color: var(--color-accent);
}

/* Text im dunklen Bereich */
.research-facts p {
    color: rgba(255, 255, 255, 0.78);
}

/* Produktbezug */
.product-reference-section {
    background: var(--color-gray-light);
}

/* Weiterführendes Thema */
.next-topic-section {
    background: var(--color-dark);
}

/* Große Next-Card */
.next-topic-card {
    display: block;
    padding: clamp(40px, 8vw, 96px);
    border-radius: var(--radius-lg);

    background:
        linear-gradient(
            135deg,
            var(--piero-ivory),
            var(--color-white)
        );

    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium);
}

@media (hover: hover) {
    .next-topic-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-card);
    }
}

.next-topic-card span {
    display: inline-block;
    margin-bottom: var(--space-sm);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.next-topic-card p {
    max-width: 720px;
    margin-top: var(--space-md);
}

/* Werte-Bereich */
.values-section {
    background: var(--color-gray-light);
}

/* Kontaktbereich */
.contact-section {
    padding: var(--space-xl) var(--container-padding);
    background: var(--color-dark);
    color: var(--color-white);
}

.contact-section p {
    color: rgba(255, 255, 255, 0.72);
}

/* Kontaktkarte */
.contact-card {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Kontaktliste */
.contact-card ul {
    display: grid;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* Einzelne Kontaktzeile */
.contact-card li {
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Label */
.contact-card span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Links */
.contact-card a {
    color: var(--color-white);
}

.contact-card a:hover {
    color: var(--color-accent);
}

/*
========================================
Schmale Unterseiten-Header
========================================
*/

/*
==================================================
Subpage Header Premium
==================================================
*/

.subpage-header {
    position: relative;
    min-height: 460px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;
    background: var(--color-dark);
    color: var(--color-white);
}

.subpage-header-media {

    position: absolute;

    inset: 0;

    z-index: 0;

}

.subpage-header-media img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}

.subpage-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

/*    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.10) 45%,
            rgba(0, 0, 0, 0.52) 100%
        );*/
}

.subpage-header-inner {
    position: relative;
    z-index: 2;

    padding-top: 150px;
    padding-bottom: 58px;
}

.subpage-header h1 {
    max-width: 760px;

    font-size: clamp(36px, 4.4vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.045em;

    color: var(--color-white);
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.24);
}

.subpage-summary {
    max-width: 680px;
    margin-top: 18px;

    font-size: clamp(16px, 1.45vw, 21px);
    line-height: 1.65;

    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.26);
}

/*
==================================================
Subpage Meta Tags
==================================================
*/

.subpage-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.subpage-meta span {
    display: inline-flex;
    align-items: center;

    padding: 7px 13px;
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.9);
}

/*
========================================
Unterseiten-Inhalt
========================================
*/

.subpage-content {
    padding: var(--space-xl) var(--container-padding);
}

.subpage-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: start;
}

.subpage-text p + p {
    margin-top: var(--space-sm);
}

.project-link-card {
    display: block;
    margin-top: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-dark);
    color: var(--color-white);
    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium);
}

.project-link-card span {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.project-link-card p {
    color: rgba(255, 255, 255, 0.72);
}

@media (hover: hover) {
    .project-link-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-card);
    }
}

/*
========================================
Premium Card Motion
========================================
*/

.card,
.application-card,
.research-link-card,
.next-topic-card,
.project-link-card {
    transform: translateZ(0);
}

@media (hover: hover) {
    .card:hover,
    .application-card:hover,
    .research-link-card:hover,
    .next-topic-card:hover,
    .project-link-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 28px 90px rgba(0, 0, 0, 0.14);
    }
}

/*
========================================
Cinematic Tiles
========================================
*/

.product-tile::after,
.background-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.06) 0%,
            rgba(0, 0, 0, 0.18) 46%,
            rgba(0, 0, 0, 0.72) 100%
        );

    transition: opacity var(--transition-medium);
}

.product-tile div,
.background-card div {
    z-index: 2;
}

@media (hover: hover) {
    .product-tile:hover,
    .background-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.18);
    }

    .product-tile:hover::after,
    .background-card:hover::after {
        opacity: 0.86;
    }
}

.editorial-intro {
    max-width: 900px;
}

.editorial-intro p {
    margin-top: var(--space-md);
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.45;
	color: var(--piero-navy-950);
}

.editorial-feature {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: var(--space-lg);
    align-items: stretch;
}

.fact-panel {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--color-gray-light);
    border: 1px solid var(--color-border);
}

.fact-panel ul {
    display: grid;
    gap: 14px;
    margin-top: var(--space-md);
}

.fact-panel li {
    padding-left: 18px;
    position: relative;
    color: var(--text-secondary);
}

.fact-panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

.editorial-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
}

.editorial-block {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-white);
}

.editorial-block span {
    display: inline-block;
    margin-bottom: var(--space-sm);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--color-accent);
}

.editorial-block p {
    margin-top: var(--space-sm);
}

.editorial-highlight {
    grid-column: span 2;
    padding: clamp(36px, 6vw, 72px);
    border-radius: var(--radius-lg);
    background: var(--color-dark);
    color: var(--color-white);
}

.editorial-highlight strong {
    display: block;
    font-size: clamp(56px, 9vw, 120px);
    line-height: 0.9;
    letter-spacing: -0.06em;
}

.editorial-highlight p {
    margin-top: var(--space-md);
    max-width: 680px;
    color: rgba(255, 255, 255, 0.72);
}
/*
========================================
Piero Brand Theme Override
Anpassung an Logo: Tiefes Navy + eleganter Goldton
========================================
*/

:root {
    --piero-navy-950: #0b0b0b;
    --piero-navy-900: #171717;
    --piero-navy-800: #2a2a2a;

    --piero-gold-300: #f7e3aa;
    --piero-gold-400: #dfc06a;
    --piero-gold-500: #c49a3a;
    --piero-gold-700: #7a5a1d;

    --piero-ivory: #f6f1e7;
    --piero-border: rgba(122, 90, 29, 0.20);

    --color-dark: var(--piero-navy-900);
    --color-dark-soft: #232323;
    --color-black: var(--piero-navy-950);
    --color-accent: var(--piero-gold-500);
    --color-accent-dark: var(--piero-gold-700);
    --color-gray-light: var(--piero-ivory);
    --color-border: var(--piero-border);
}

body {
    background: var(--piero-ivory);
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-heading,
.statement {
    color: var(--piero-gold-700);
}

.hero h1,
.hero h2,
.cta-section h1,
.cta-section h2,
.motivation-vision h1,
.motivation-vision h2,
.contact-section h1,
.contact-section h2,
.subpage-header h1,
.card-dark h1,
.card-dark h2,
.card-dark h3,
.editorial-highlight h1,
.editorial-highlight h2,
.editorial-highlight h3,
.product-tile h1,
.product-tile h2,
.product-tile h3,
.background-card h1,
.background-card h2,
.background-card h3,
.project-link-card h1,
.project-link-card h2,
.project-link-card h3,
.research-link-card h1,
.research-link-card h2,
.research-link-card h3 {
    color: var(--piero-gold-300);
    text-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}

.next-topic-card h1,
.next-topic-card h2,
.next-topic-card h3  {
    color: var(--piero-gold-700);
    text-shadow: none;
}

.eyebrow,
.timeline-year,
.application-card span,
.project-link-card span,
.infographic-placeholder span,
.research-facts span,
.contact-card span,
.editorial-block span,
.fact-panel li::before {
    color: var(--piero-gold-700);
}

.card,
.application-card,
.editorial-block,
.fact-panel {
    background: rgba(255, 255, 255, 0.86);
    border-color: var(--piero-border);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.07);
}

.card-dark,
.hero,
.cta-section,
.motivation-vision,
.next-topic-section,
.contact-section,
.project-link-card,
.subpage-header {
    background: linear-gradient(135deg, #0b0b0b, #252525);
}

.btn-primary {
    background: linear-gradient(135deg, var(--piero-gold-300), var(--piero-gold-500));
    color: var(--piero-navy-950);
    box-shadow: 0 14px 42px rgba(210, 170, 72, 0.28);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--piero-gold-400), var(--piero-gold-700));
    color: var(--color-white);
}

.btn-secondary {
    background: rgba(244, 220, 140, 0.13);
    border: 1px solid rgba(244, 220, 140, 0.28);
    color: var(--piero-gold-300);
}

.btn-light {
    background: var(--piero-ivory);
    color: var(--piero-navy-950);
    border: 1px solid var(--piero-border);
}

@media (hover: hover) {
    .btn:hover {
        box-shadow: 0 20px 50px rgba(210, 170, 72, 0.28);
    }

    .card:hover,
    .application-card:hover,
    .research-link-card:hover,
    .next-topic-card:hover,
    .project-link-card:hover,
    .product-tile:hover,
    .background-card:hover {
        box-shadow: 0 34px 96px rgba(0, 0, 0, 0.22);
    }
}

.hero::after,
.motivation-vision::after {
 /*   background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.88),
            rgba(40,40,40,0.45)
        );*/
}

.subpage-header::before {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.16) 0%,
            rgba(30,30,30,0.22) 45%,
            rgba(0,0,0,0.76) 100%
        );
}

.research-link-card {
    background:
        linear-gradient(
            135deg,
            #181818,
            #4a4a4a
        );
}

.infographic-placeholder {
    background:
        linear-gradient(
            135deg,
            var(--piero-ivory),
            var(--color-white)
        );
}

.timeline-item {
    border-left-color: var(--piero-gold-500);
}

.site-footer {
    background: var(--piero-navy-950);
}

.footer-links a:hover,
.contact-card a:hover {
    color: var(--piero-gold-300);
}

/*
========================================
Piero Premium Black & Champagne Refinement
Luxuriöses Finish: Schwarz, warmes Gold, gebrochenes Weiß
========================================
*/

:root {
    --piero-black: #0b0b0b;
    --piero-charcoal: #171717;
    --piero-graphite: #252525;
    --piero-stone: #e9e1d2;
    --piero-soft-white: #f6f1e7;
    --piero-champagne: #f7e3aa;
    --piero-gold-soft: #dfc06a;
    --piero-gold-rich: #c49a3a;
    --piero-gold-deep: #7a5a1d;

    --color-dark: var(--piero-charcoal);
    --color-dark-soft: var(--piero-graphite);
    --color-black: var(--piero-black);
    --color-gray-light: var(--piero-soft-white);
    --color-accent: var(--piero-gold-rich);
    --color-accent-dark: var(--piero-gold-deep);
    --color-border: rgba(122, 90, 29, 0.18);
}

body {
   background:
        radial-gradient(circle at 18% 0%, rgba(196, 154, 58, 0.07), transparent 32%),
        linear-gradient(180deg, #fbf8ef 0%, var(--piero-soft-white) 100%);
}

/* Edle, aber gut lesbare Überschriften */
h1,
h2,
h3,
h4,
h5,
h6,
.section-heading,
.statement {
    color: var(--piero-gold-deep);
}

.hero h1,
.hero h2,
.cta-section h1,
.cta-section h2,
.motivation-vision h1,
.motivation-vision h2,
.contact-section h1,
.contact-section h2,
.subpage-header h1,
.card-dark h1,
.card-dark h2,
.card-dark h3,
.editorial-highlight h1,
.editorial-highlight h2,
.editorial-highlight h3,
.product-tile h1,
.product-tile h2,
.product-tile h3,
.background-card h1,
.background-card h2,
.background-card h3,
.project-link-card h1,
.project-link-card h2,
.project-link-card h3,
.research-link-card h1,
.research-link-card h2,
.research-link-card h3 {
    color: var(--piero-champagne);
    text-shadow: 0 12px 34px rgba(0, 0, 0, 0.36);
}

.hero,
.cta-section,
.motivation-vision,
.next-topic-section,
.contact-section,
.project-link-card,
.subpage-header,
.card-dark,
.editorial-highlight {
    background:
 /*       radial-gradient(circle at 18% 0%, rgba(247, 227, 170, 0.10), transparent 30%),
        linear-gradient(135deg, var(--piero-black), var(--piero-graphite));*/
}

.hero::after,
.motivation-vision::after {
    background:
 /*       linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.86),
            rgba(22, 22, 22, 0.48)
        );*/
}

.subpage-header::before {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.24) 44%,
            rgba(0, 0, 0, 0.78) 100%
        );
}

/* Ruhigere, hochwertigere Karten */
.card,
.application-card,
.editorial-block,
.fact-panel {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 241, 231, 0.88));
    border-color: rgba(122, 90, 29, 0.16);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

/* Dezente Goldkante für Premium-Flächen */
.card::after,
.application-card::after,
.editorial-block::after,
.fact-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    border: 1px solid rgba(247, 227, 170, 0.22);
}

/* Buttons: weniger grell, mehr Schmuckstück */
.btn-primary {
    background:
        linear-gradient(135deg, var(--piero-champagne), var(--piero-gold-rich));
    color: var(--piero-black);
    box-shadow:
        0 16px 44px rgba(196, 154, 58, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn-primary:hover {
    background:
        linear-gradient(135deg, #ffe9ad, var(--piero-gold-deep));
    color: var(--color-white);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(247, 227, 170, 0.28);
    color: var(--piero-champagne);
}

.btn-light {
    background: rgba(246, 241, 231, 0.92);
    color: var(--piero-black);
    border: 1px solid rgba(122, 90, 29, 0.18);
}

/* Akzente */
.eyebrow,
.timeline-year,
.application-card span,
.project-link-card span,
.infographic-placeholder span,
.research-facts span,
.contact-card span,
.editorial-block span {
    color: var(--piero-gold-deep);
}

.fact-panel li::before {
    background: var(--piero-gold-rich);
}

.timeline-item {
    border-left-color: var(--piero-gold-rich);
}

/* Research- und Next-Karten hochwertiger statt blau */
.research-link-card,
.next-topic-card {
    background:
        radial-gradient(circle at 12% 0%, rgba(247, 227, 170, 0.18), transparent 34%),
        linear-gradient(135deg, #141414, #3a3a3a);
    color: var(--color-white);
    border: 1px solid rgba(247, 227, 170, 0.18);
}

.next-topic-card h1,
.next-topic-card h2,
.next-topic-card h3,
.research-link-card h1,
.research-link-card h2,
.research-link-card h3 {
    color: var(--piero-champagne);
}

.next-topic-card p,
.research-link-card p {
    color: rgba(255, 255, 255, 0.76);
}

/* Infografik und helle Sektionen: edler Stein-/Papierlook */
.product-family,
.product-benefits,
.research-link-section,
.research-hub-section,
.infographic-section,
.product-reference-section,
.values-section {
    background:
        linear-gradient(180deg, #fbf8ef, var(--piero-soft-white));
}

.infographic-placeholder {
    background:
        radial-gradient(circle at center, rgba(247, 227, 170, 0.16), transparent 42%),
        linear-gradient(135deg, #fbf8ef, #eee5d5);
    border-color: rgba(122, 90, 29, 0.16);
}

/* Footer klar und luxuriös */
.site-footer {
    background: var(--piero-black);
    border-top: 1px solid rgba(247, 227, 170, 0.14);
}

.footer-links a:hover,
.contact-card a:hover {
    color: var(--piero-champagne);
}

@media (hover: hover) {
    .card:hover,
    .application-card:hover,
    .research-link-card:hover,
    .next-topic-card:hover,
    .project-link-card:hover,
    .product-tile:hover,
    .background-card:hover {
        box-shadow:
            0 34px 100px rgba(0, 0, 0, 0.22),
            0 0 0 1px rgba(247, 227, 170, 0.12);
    }
}

/*
==================================================
Landing Hero mit Karten-Navigation
==================================================
*/

.landing-hero {
    min-height: 100vh;
    padding: 150px var(--container-padding) 80px;

    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(60px, 8vw, 140px);
    align-items: center;

    background-color: #101214;
    color: var(--color-white);

    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.055) 0, transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(15,111,255,0.10) 0, transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,0.035) 25%, transparent 25%),
        linear-gradient(225deg, rgba(255,255,255,0.025) 25%, transparent 25%);
    background-size:
        900px 900px,
        760px 760px,
        38px 38px,
        38px 38px;
    background-position:
        left top,
        right center,
        0 0,
        19px 19px;
}

.landing-text {
    max-width: 560px;
}

.landing-text h1 {
    font-size: clamp(46px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.landing-text p {
    margin-top: 28px;
    max-width: 520px;
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.76);
}

.landing-card-list {
    display: grid;
    gap: 14px;
}

.landing-card {
    min-height: 62px;
    padding: 0 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 18px;

    font-size: clamp(18px, 2vw, 28px);
    font-weight: 700;
    letter-spacing: -0.035em;

    color: var(--color-white);

    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 18px 50px rgba(0,0,0,0.18);

    transition:
        transform var(--transition-medium),
        box-shadow var(--transition-medium),
        filter var(--transition-medium);
}

@media (hover: hover) {
    .landing-card:hover {
        transform: translateX(10px) scale(1.015);
        box-shadow: 0 26px 80px rgba(0,0,0,0.30);
        filter: brightness(1.08);
    }
}

/* Card-Farben */
.card-blue {
    background: linear-gradient(135deg, #0f6fff, #084fbd);
}

.card-slate {
    background: linear-gradient(135deg, #4b5563, #1f2937);
}

.card-steel {
    background: linear-gradient(135deg, #64748b, #334155);
}

.card-graphite {
    background: linear-gradient(135deg, #2f343b, #15181c);
}

.card-indigo {
    background: linear-gradient(135deg, #3949ab, #1a237e);
}

.card-cyan {
    background: linear-gradient(135deg, #0e7490, #164e63);
}

.card-charcoal {
    background: linear-gradient(135deg, #3a3f45, #101214);
}

.card-green {
    background: linear-gradient(135deg, #047857, #064e3b);
}

.card-darkblue {
    background: linear-gradient(135deg, #1e3a8a, #111827);
}

/*
==================================================
Expertise Grid
==================================================
*/

.expertise-hero-grid-wrap {
    position: relative;
    z-index: 2;

    width: min(100%, 980px);
    padding: 0 var(--container-padding);
    margin-left: auto;
	padding-top: 120px;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.expertise-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 22px;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    color: white;
    text-decoration: none;
    box-shadow: 0 18px 60px rgba(0,0,0,.18);
    transition:
        transform .45s,
        box-shadow .45s;
}

.expertise-tile img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform 6s linear;

}

.expertise-tile::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.00) 0%,
            rgba(0, 0, 0, 0.08) 35%,
            rgba(0, 0, 0, 0.28) 65%,
            rgba(0, 0, 0, 0.72) 100%
        );

    transition:
        opacity var(--transition-medium),
        background var(--transition-medium);
}

.expertise-tile div{

    position:relative;

    z-index:3;

}

.expertise-tile h3{

    margin:0;

    font-size:clamp(20px,1.8vw,30px);

    line-height:1.15;
	
	color: var(--piero-champagne);
	
	text-shadow: 0 2px 14px rgba(0,0,0,.45);

}

.expertise-tile span{

    display:block;

    margin-top:10px;

    font-size:15px;

    color:rgba(255,255,255,.72);
	
}

@media (hover:hover){

.expertise-tile:hover{

    transform:
        translateY(-10px);

    box-shadow:
        0 34px 90px rgba(0,0,0,.26);

}

.expertise-tile:hover img{

    transform:
        scale(1.08);

}

}

.expertise-tile:hover::before {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.00) 0%,
            rgba(0, 0, 0, 0.12) 30%,
            rgba(0, 0, 0, 0.36) 62%,
            rgba(0, 0, 0, 0.82) 100%
        );
}