/* pages/start/start.css
   Hinweis: Vollständige Datei */

:root{
  --s-border: rgba(255,255,255,.10);
  --s-muted: var(--text-muted, rgba(255,255,255,.72));
}

.start-page{width:100%}
.muted{color:var(--s-muted)}
.small{font-size:.92rem}
.tiny{font-size:.85rem}
.strong{font-weight:700}

.card{
  border-radius:18px;
  border:1px solid var(--s-border);
  background:rgba(255,255,255,.04);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  overflow:hidden;
  backdrop-filter:saturate(120%) blur(8px);
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.10)}
.card-head h2{margin:0;font-size:1.08rem;display:flex;gap:.55rem;align-items:center}
.card-body{padding:1rem 1.1rem 1.1rem}
.card-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.85rem}

.kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;padding:.25rem .6rem;border-radius:999px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.12)}
.pill{
  font-size:.85rem;padding:.28rem .6rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text,#fff);
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.06);
}
.p-blue{border-color:rgba(0,140,255,.28);background:linear-gradient(135deg, rgba(0,140,255,.14), rgba(255,255,255,.04))}
.p-teal{border-color:rgba(0,220,190,.28);background:linear-gradient(135deg, rgba(0,220,190,.14), rgba(255,255,255,.04))}
.p-violet{border-color:rgba(170,80,255,.28);background:linear-gradient(135deg, rgba(170,80,255,.14), rgba(255,255,255,.04))}
.p-amber{border-color:rgba(255,170,0,.28);background:linear-gradient(135deg, rgba(255,170,0,.14), rgba(255,255,255,.04))}

.grad-blue{background:linear-gradient(135deg, rgba(0,140,255,.10), rgba(255,255,255,.04))}
.grad-teal{background:linear-gradient(135deg, rgba(0,220,190,.10), rgba(255,255,255,.04))}
.grad-violet{background:linear-gradient(135deg, rgba(170,80,255,.10), rgba(255,255,255,.04))}
.grad-amber{background:linear-gradient(135deg, rgba(255,170,0,.10), rgba(255,255,255,.04))}
.grad-rainbow{background:linear-gradient(135deg, rgba(0,140,255,.10), rgba(170,80,255,.08), rgba(0,220,190,.07), rgba(255,170,0,.07), rgba(255,70,170,.06))}

.start-carousel{
  position:relative;
  height:350px;
  overflow:hidden;
  background:rgba(0,0,0,.14);
}
.start-carousel-track{position:absolute;inset:0}
.start-slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.02);
  transition:opacity 1.2s ease, transform 3.8s ease;
}
.start-slide.is-active{opacity:1;transform:scale(1.08)}
.start-carousel-overlay{
  position:absolute;inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:1.15rem;
  background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.55));
}
.start-welcome{
  max-width:780px;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:1rem 1.05rem;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.start-welcome h1{margin:.55rem 0 .45rem;font-size:1.55rem;line-height:1.2}
.start-welcome p{margin:0;line-height:1.6}
.start-cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.85rem}

.start-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.30);
  color:var(--text,#fff);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  backdrop-filter:saturate(120%) blur(8px);
}
.start-nav:hover{background:rgba(255,255,255,.10);border-color:rgba(0,140,255,.22)}
.start-nav.prev{left:12px}
.start-nav.next{right:12px}

.start-dots{
  position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
  display:flex;gap:.45rem;align-items:center;
  padding:.35rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
}
.dot{width:10px;height:10px;border-radius:999px;border:1px solid rgba(255,255,255,.20);background:rgba(255,255,255,.08);cursor:pointer}
.dot.is-active{background:rgba(0,140,255,.70);border-color:rgba(0,140,255,.55)}

.start-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.25rem;
  margin-top:1.25rem;
}

/* Galerie-Card nutzt volle Breite */
.start-gallery{grid-column:1 / -1;}

.bullets{margin:.2rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.55rem}
.inline-link{margin-left:.35rem;text-decoration:none;color:inherit;opacity:.92}
.inline-link:hover{opacity:1}
.tag{display:inline-flex;padding:.12rem .45rem;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:.85rem}
.tag-intern{background:rgba(0,220,190,.10);border-color:rgba(0,220,190,.22)}
.tag-extern{background:rgba(255,170,0,.10);border-color:rgba(255,170,0,.22)}

.event-list{display:flex;flex-direction:column;gap:.55rem}
.event-row{
  width:100%;
  display:grid;
  grid-template-columns:100px 1fr 18px;
  gap:.75rem;
  align-items:center;
  text-align:left;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
  border-radius:16px;
  padding:.7rem .75rem;
  cursor:pointer;
  transition:transform .2s ease-in-out, border-color .18s ease, background .18s ease;
  will-change:transform;
}
.event-row:focus{outline:none}
.event-row:focus-visible{outline:2px solid rgba(0,140,255,.6)}
.event-row:hover{border-color:rgba(0,140,255,.20);background:rgba(255,255,255,.06)}
.event-date{font-weight:800;  color:#fff;}
.event-title{font-weight:700; color:#fff;}
.event-more{opacity:.85}
.event-details{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.10);
  border-radius:12px;
  padding:.7rem .8rem;
  margin:.5rem 0 .2rem 0; /* full width under row */
  transition:opacity .28s ease-in-out, clip-path .28s ease-in-out;
  will-change:opacity, clip-path;
  overflow:hidden;
  clip-path: inset(0 0 0 0);
  opacity:1;
}
.event-details.is-hidden{
  opacity:0;
  clip-path: inset(0 0 100% 0);
  pointer-events:none;
}

.sparten-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}
.sparte{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(0,0,0,.12);
  padding:.75rem;
}
.sparte-img{
  height:140px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.22);
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(0,0,0,.14));
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.65rem;
  color:rgba(255,255,255,.55);
  font-weight:700;
  /* Bild vollständig sichtbar machen */
  background-size: contain;
  background-position:center;
  background-repeat: no-repeat;
  overflow:hidden;
}
/* Hover-Zoom entfernt, um das ganze Bild sichtbar zu lassen */
.sparte-img > span{display:none}

/* Vordefinierte Bilder nur im Sparten-Bereich der Startseite */
.start-sparten .sparte:nth-child(1) .sparte-img{background-image:url('/media/sparten/schiffe.jpg')}
.start-sparten .sparte:nth-child(2) .sparte-img{background-image:url('/media/sparten/crawler.jpg')}
.start-sparten .sparte:nth-child(3) .sparte-img{background-image:url('/media/sparten/technik.jpg')}
.start-sparten .sparte:nth-child(4) .sparte-img{background-image:url('/media/sparten/werkstatt.jpg')}
.sparte-title{font-weight:800;margin-bottom:.25rem}

.gallery-cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:1rem;
}
.gallery-card{
  text-decoration:none;color:inherit;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.12);
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.gallery-card:hover{transform:translateY(-2px);border-color:rgba(170,80,255,.22);background:rgba(255,255,255,.06)}
.gallery-thumb{position:relative;aspect-ratio:16/10}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .35s ease}
.gallery-card:hover .gallery-thumb img{transform:scale(1.06)}
.gallery-badge{position:absolute;left:.65rem;bottom:.65rem}
.gallery-meta{padding:.7rem .8rem}

/* Modal */
.start-modal{position:fixed;inset:0;display:none;z-index:9999}
.start-modal[aria-hidden="false"]{display:block}
.start-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66)}
.start-modal-panel{
  position:relative;
  max-width:min(820px, calc(100vw - 24px));
  margin:12px auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(15,18,26,.94);
  overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.start-modal-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem .9rem;border-bottom:1px solid rgba(255,255,255,.10);
}
.start-modal-title{display:flex;align-items:center;gap:.55rem;font-weight:750}
.start-modal-body{padding:.95rem .95rem 0;line-height:1.6}
.start-modal-body h3{margin:.25rem 0 .6rem}
.start-modal-body p{margin:0 0 .85rem}
.start-modal-bottom{padding:.85rem .95rem;border-top:1px solid rgba(255,255,255,.10);display:flex;gap:.75rem;justify-content:flex-end;flex-wrap:wrap}

@media (max-width:980px){
  .start-grid{grid-template-columns:1fr}
  .start-carousel{height:320px}
  .gallery-cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:640px){
  .start-carousel{height:290px}
  .start-welcome{padding:.85rem}
  .start-welcome h1{font-size:1.25rem}
  .event-row{grid-template-columns:90px 1fr 18px}
  .sparten-grid{grid-template-columns:1fr}
  .gallery-cards{grid-template-columns:1fr}
  .start-nav{display:none}
}

.treffpunkte-flex {
  display: flex;
  gap: 1rem;
}

.treffpunkt {
  flex: 1 1 50%;
}

.treffpunkt img {
  width: 100%;
  object-fit: cover;
  border-radius: 0.5rem;
}

.treffpunkt-text {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.4;
  font-size:0.7rem;
}

@media (max-width: 700px) {
  .treffpunkte-flex {
    flex-direction: column;
  }
}