/* ============================================================
   LEGACY COMPONENT STYLES (backward compat)
   Included on older pages not yet redesigned
   ============================================================ */

.section-tag { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--teal); margin-bottom: 0.5rem; display: block; }
.section-title { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 400; color: var(--navy); margin-bottom: 1.2rem; max-width: 680px; line-height: 1.2; }
.section-subtitle { font-size: 1.05rem; color: var(--text-mid); margin-bottom: 2rem; max-width: 700px; line-height: 1.7; }
.hero-content { max-width: 760px; }

.team-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg-white); transition: var(--ease); }
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.team-img-wrapper { aspect-ratio: 4/3; overflow: hidden; }
.team-img-wrapper img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: filter 0.5s ease, transform 0.5s ease; }
.team-card:hover .team-img-wrapper img { filter: saturate(1.0); transform: scale(1.03); }
.team-info { padding: 1.2rem; border-top: 1px solid var(--border); }
.team-name { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; color: var(--navy); margin-bottom: 0.25rem; }
.team-role { font-size: 0.78rem; color: var(--text-mid); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.hero-split-banner { margin-top: 2rem; height: 420px; overflow: hidden; border-radius: 4px; box-shadow: var(--shadow-md); }
.hero-split-banner img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: filter 0.5s, transform 0.5s; }
.hero-split-banner:hover img { filter: saturate(1); transform: scale(1.02); }

.ecosystem-card { background: var(--bg-white); border: 1px solid var(--border); border-radius: 6px; padding: 2rem; display: flex; flex-direction: column; height: 100%; transition: var(--ease); }
.ecosystem-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--navy); }
.card-num { font-family: var(--serif); font-size: 2.8rem; color: var(--border); line-height: 1; margin-bottom: 1rem; transition: color 0.25s; }
.ecosystem-card:hover .card-num { color: var(--teal); }
.card-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--navy); margin-bottom: 0.75rem; line-height: 1.3; }
.card-desc { font-size: 0.9rem; color: var(--text-mid); line-height: 1.6; flex-grow: 1; margin-bottom: 1.5rem; }
.card-cta { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; transition: gap 0.22s; }
.card-cta::after { content: '→'; }
.ecosystem-card:hover .card-cta { gap: 0.7rem; }

.channel-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1.4rem 0; border-bottom: 1px solid var(--border); }
.channel-item:last-child { border-bottom: none; }
.channel-icon { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; }
.channel-title { font-family: var(--sans); font-size: 0.88rem; font-weight: 700; color: var(--navy); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; }
.channel-text { font-size: 0.88rem; color: var(--text-mid); line-height: 1.6; }
.channel-link { color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.conditions-container { background: var(--bg-sand); border: 1px solid var(--border); border-radius: 6px; padding: 2rem; }
.conditions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 600px) { .conditions-grid { grid-template-columns: 1fr; } }
.condition-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; background: var(--bg-white); border: 1px solid var(--border); border-radius: 4px; transition: var(--ease); cursor: pointer; }
.condition-item:hover { border-color: var(--gold); padding-left: 1.3rem; }
.condition-name { font-family: var(--serif); font-size: 1rem; color: var(--navy); }
.condition-arrow { color: var(--gold); transition: transform 0.22s; }
.condition-item:hover .condition-arrow { transform: translateX(3px); }

.contact-form { background: var(--bg-white); border: 1px solid var(--border); border-radius: 6px; padding: 2.5rem; box-shadow: var(--shadow-sm); }
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy); margin-bottom: 0.5rem; font-family: var(--sans); }
.form-control { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--border); background: var(--bg-white); font-family: var(--sans); font-size: 0.95rem; color: var(--navy); border-radius: 4px; transition: border-color 0.25s; }
.form-control:focus { outline: none; border-color: var(--gold); }
.form-select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='%23bd9363' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }

.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 2rem; background: var(--navy); color: #fff; border: 1.5px solid var(--navy); border-radius: 3px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--ease); }
.btn-primary:hover { background: var(--navy-dark); border-color: var(--navy-dark); transform: translateY(-1px); }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 2rem; background: transparent; color: var(--navy); border: 1.5px solid var(--border); border-radius: 3px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: var(--ease); }
.btn-secondary:hover { border-color: var(--navy); background: rgba(15,31,48,0.04); }

.footer-links { list-style: none; padding: 0; }

/* Subpage hero (used by kontakt, etc.) */
.subpage-hero {
    padding-top: calc(var(--header-h) + var(--sp-lg));
    padding-bottom: var(--sp-lg);
    background: var(--bg-sand);
    border-bottom: 1px solid var(--border);
}
.subpage-hero .hero-title {
    font-size: clamp(2rem, 4vw, 3.4rem);
}

/* Facility wrapper */
.facility-wrapper { display: grid; grid-template-columns: 4fr 5fr; gap: 2.5rem; align-items: center; }
.facility-gallery { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); height: 480px; position: relative; }
.gallery-img { position: absolute; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--ease); }
.gallery-img-1 { top: 0; left: 0; width: 60%; height: 75%; z-index: 2; }
.gallery-img-2 { bottom: 0; right: 0; width: 55%; height: 60%; z-index: 1; }
.gallery-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: filter 0.5s, transform 0.5s; }
.gallery-img:hover img { filter: saturate(1); transform: scale(1.02); }
@media (max-width: 992px) { .facility-wrapper { grid-template-columns: 1fr; } }