/* =========================================================
Light on Hill Inclusive School – CSS Split
Datei: 02-sections.css
Stand: 2026-01-15
Zweck: Sections/Hero + globale Komponenten bis vor Footer (Original-Reihenfolge).
Hinweis: Inhalt stammt aus der bereinigten styles.css.
Reihenfolge ist relevant! (siehe HTML )
========================================================= */
/* Sections & hero */
.hero{
position:relative;
min-height:clamp(56vh, 68vh, 78vh);
display:grid;
align-items:center;
overflow:hidden;
}
/* HERO Media Wrapper */
.hero .media{
position:absolute;
inset:0;
z-index:-1;
overflow:hidden;
}
/* Desktop/Normal: cover wie bisher */
.hero .media img,
.hero .media video{
width:100%;
height:100%;
object-fit:cover;
object-position:50% 50%;
filter: contrast(.95) saturate(.85) brightness(1.12);
animation: mediaIn .9s ease-out .15s both;
opacity: .88;
}
/* =========================================================
HERO – Mobile: Bild als Background nutzen (statt ![]()
)
========================================================= */
@media (max-width: 720px){
/* 1) Hero bekommt das Bild als Background (passt perfekt in die Fläche) */
.hero{
background-image: url("/assets/img/hero.jpg");
background-size: cover;
background-position: 20% 35%;
background-repeat: no-repeat;
}
/* 2) Vordergrund-![]()
ausblenden (damit kein "Contain-Crop" mehr) */
.hero .media{
display: none;
}
/* 3) Lesbarkeit: leichter dunkler Verlauf unten */
.hero::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(
to top,
rgba(0,0,0,.55) 0%,
rgba(0,0,0,.18) 45%,
rgba(0,0,0,0) 78%
);
pointer-events:none;
}
/* 4) Inhalt über dem Overlay */
.hero .hero-inner,
.hero .hero-logo-watermark{
position: relative;
z-index: 2;
}
/* Optional: Hero-Höhe etwas anpassen, damit es auf Mobile nicht zu “hoch” wirkt */
.hero{
min-height: clamp(62vh, 72vh, 82vh);
}
}
.hero{ color: rgba(255,255,255,.92); }
/* HERO Textblock – bleibt linksbündig wie vorher (Index) */
.hero .hero-inner{ text-align:left; }
.hero .lead{ color: rgba(255,255,255,.85); }
@keyframes mediaIn{from{opacity:0} to{opacity:1}}
.section{padding:72px 0; border-top:1px solid var(--border)}
.section:first-of-type{border-top:0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px}
/* =========================
CARD – Rahmen/Panel Look wie Screenshot
========================= */
.card{
background: rgba(17,40,31,.62);
border:1px solid rgba(255,255,255,.10);
border-radius:18px;
padding:18px;
box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
/* =========================
TEAM (About) – gleich hohe Karten + Bilder füllen die Box (cover)
========================= */
.team-grid{
display:grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap:20px;
margin-top:28px;
align-items: stretch;
}
@media (max-width: 900px){
.team-grid{ grid-template-columns: 1fr; }
}
/* Card (kommt zusätzlich auch von .card, weil du class="card team-card" nutzt) */
.team-card{
display:flex;
flex-direction:column;
border-radius: 22px;
overflow:hidden;
padding:0;
/* Hauptfläche soll aus .card kommen -> hier transparent lassen */
background: transparent;
border: 1px solid rgba(240,231,218,.14);
box-shadow: 0 14px 40px rgba(0,0,0,.28);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.team-card:hover{
transform: translateY(-3px);
border-color: rgba(240,231,218,.22);
box-shadow: 0 18px 55px rgba(0,0,0,.34);
}
/* Foto-Bereich (2. Farbe) – immer gleiche Höhe */
.team-photo{
height: 340px; /* Desktop Höhe */
padding: 12px;
background: rgba(10,26,19,.55); /* dunkler wie "vorher" */
border-bottom: 1px solid rgba(255,255,255,.08);
display:flex;
}
/* Bild füllt die Box komplett (ggf. Crop) */
.team-photo img{
width: 100%;
height: 100%;
display:block;
object-fit: cover; /* <- wichtig: füllt, unabhängig vom Format */
object-position: center;
border-radius: 14px;
border: 1px solid rgba(240,231,218,.10);
box-shadow: 0 10px 26px rgba(0,0,0,.25);
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* Caption: sorgt dafür, dass alle Karten gleich hoch wirken */
.team-caption{
display:flex;
flex-direction: column;
justify-content: flex-end;
text-align:center;
padding: 1rem 1rem 1.1rem;
flex: 1 1 auto;
}
.team-name{
font-weight: 800;
font-size: 1.08rem;
letter-spacing: .2px;
}
.team-role{
margin-top: .55rem;
opacity: .9;
line-height: 1.5;
}
.team-verse{
margin-top: .75rem;
padding-top: .75rem;
border-top: 1px solid var(--border);
font-weight: 600;
opacity: .85;
font-size: .95rem;
}
/* Große Screens */
@media (min-width: 1200px){
.team-photo{ height: 380px; }
}
/* Mobile – kleiner, damit es nicht riesig wirkt */
@media (max-width: 600px){
.team-photo{ height: 260px; padding: 10px; }
.team-photo img{ border-radius: 12px; }
}
@media (max-width: 400px){
.team-photo{ height: 240px; }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
.team-card{
transition:none !important;
}
.team-card:hover{
transform:none !important;
}
}
/* =========================
GALLERY – Grid + Lightbox
========================= */
/* Lightbox helpers */
/* Overlay */
.lightbox{
position:fixed;
inset:0;
z-index:999;
display:flex;
align-items:center;
justify-content:center;
padding: 18px;
background: rgba(0,0,0,.58);
backdrop-filter: blur(12px);
opacity:0;
pointer-events:none;
transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
}
.lightbox.open{
opacity:1;
pointer-events:auto;
}
.lightbox__panel{
position:relative;
width:min(1100px, 96vw);
height:min(86vh, 760px);
background: rgba(15,36,27,.92);
border:1px solid rgba(255,255,255,.14);
border-radius:18px;
box-shadow:0 24px 70px rgba(0,0,0,.55);
overflow:hidden;
display:grid;
grid-template-rows: minmax(0, 1fr) auto;
clip-path: circle(0% at 50% 46%);
transform: translateY(16px) scale(.90) rotate(-1.2deg);
transition:
clip-path .95s cubic-bezier(.16, 1, .3, 1),
transform .95s cubic-bezier(.16, 1, .3, 1);
}
.lightbox.open .lightbox__panel{
clip-path: circle(165% at 50% 46%);
transform: translateY(0) scale(1) rotate(0deg);
}
.lightbox__media{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,0,0,.18);
padding: 18px 78px 18px;
min-height:0;
}
.lightbox__img{
max-width:100%;
max-height:100%;
width:auto;
height:auto;
object-fit: contain;
border-radius:14px;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 14px 40px rgba(0,0,0,.35);
opacity:0;
transform: scale(.985);
transition: opacity .35s ease, transform .35s ease;
}
.lightbox__img.is-ready{
opacity:1;
transform: scale(1);
}
.lightbox__caption{
padding: 12px 16px 14px;
text-align:center;
color: rgba(230,242,236,.92);
border-top:1px solid rgba(255,255,255,.10);
background: rgba(10,26,19,.35);
}
.lightbox__close{
position:absolute;
top:10px;
right:10px;
width:44px;
height:44px;
border-radius:12px;
border:1px solid rgba(255,255,255,.18);
background: rgba(10,26,19,.72);
color:#fff;
cursor:pointer;
display:grid;
place-items:center;
box-shadow:0 10px 26px rgba(0,0,0,.35);
transition: transform .18s ease, filter .25s ease, opacity .25s ease;
z-index:5;
}
.lightbox__close:hover{ transform: translateY(-1px); filter: brightness(1.06); }
.lightbox__close:active{ transform: translateY(0); }
.lightbox__nav{
position:absolute;
top:50%;
transform: translateY(-50%);
width:46px;
height:60px;
border-radius:14px;
border:1px solid rgba(255,255,255,.18);
background: rgba(10,26,19,.62);
color:#fff;
cursor:pointer;
display:grid;
place-items:center;
font-size: 32px;
line-height: 1;
box-shadow:0 12px 30px rgba(0,0,0,.38);
transition: transform .18s ease, filter .25s ease, opacity .25s ease;
opacity:.98;
z-index:5;
}
.lightbox__nav:hover{ transform: translateY(-50%) scale(1.03); filter: brightness(1.06); }
.lightbox__nav:active{ transform: translateY(-50%) scale(1.00); }
.lightbox__prev{ left:10px; }
.lightbox__next{ right:10px; }
@media (max-width: 520px){
.lightbox__panel{ height:min(84vh, 700px); }
.lightbox__media{ padding: 14px 60px 14px; }
.lightbox__nav{ width:42px; height:54px; font-size:28px; }
}
@media (prefers-reduced-motion: reduce){
*{ scroll-behavior:auto !important; }
.gallery-item, .lightbox, .lightbox__panel, .lightbox__img, .lightbox__close, .lightbox__nav{
transition:none !important;
animation:none !important;
}
}
/* =========================
GALLERY – Grid + Tiles
WICHTIG: .gallery & .gallery-item werden per JS erzeugt (assets/js/gallery.js).
Diese Regeln sind daher "dynamisch benutzt" und dürfen nicht entfernt werden.
========================= */
.gallery{
display:grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap:14px;
margin-top:18px;
}
.gallery-item{
appearance:none;
border:1px solid var(--border);
background: rgba(17,40,31,.62);
border-radius:18px;
padding:0;
overflow:hidden;
cursor:pointer;
box-shadow:0 10px 26px rgba(0,0,0,.22);
transition:transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.gallery-item:hover{
transform:translateY(-2px);
filter:saturate(1.05) brightness(1.02);
box-shadow:0 14px 34px rgba(0,0,0,.30);
}
.gallery-item:active{ transform:translateY(0px); }
.gallery-item:focus{
outline:none;
box-shadow:0 0 0 3px rgba(16,185,129,.18), 0 14px 34px rgba(0,0,0,.30);
border-color: rgba(16,185,129,.55);
}
.gallery-item img{
width:100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display:block;
}
/* Lightbox helper (Body lock) */
.no-scroll{ overflow:hidden; }