:root {
  --dark:#081b2c;
  --dark2:#102f48;
  --blue:#1b8fd3;
  --yellow:#ffca32;
  --green:#23c55e;
  --text:#0b1b2f;
  --muted:#65758b;
  --card:#ffffff;
  --soft:#f3f7fb;
  --shadow:0 24px 70px rgba(0,0,0,.18);
  --radius:28px}

* {
  box-sizing:border-box}

html {
  scroll-behavior:smooth}

body {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,#0b2033 0%,#173d55 38%,#081827 100%);
  line-height:1.55}

a {
  color:inherit;
  text-decoration:none}

img {
  max-width:100%;
  display:block}

.top-info {
  background:#071524;
  color:#dbeafe;
  padding:10px 7vw;
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:14px}

.top-info a {
  color:#ffca32;
  font-weight:800}

.site-header {
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 7vw;
  background:rgba(8,27,44,.76);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.12)}

.logo-img {
  height:150px;
  width:auto}

.main-nav {
  display:flex;
  align-items:center;
  gap:18px;
  color:#fff;
  font-weight:800}

.main-nav a {
  opacity:.9}

.main-nav a:hover {
  opacity:1;
  color:#ffca32}

.nav-cta {
  background:var(--yellow);
  color:#071524!important;
  padding:12px 18px;
  border-radius:999px}

.nav-toggle {
  display:none;
  background:transparent;
  border:0;
  gap:5px;
  flex-direction:column}

.nav-toggle span {
  display:block;
  width:28px;
  height:3px;
  background:#fff;
  border-radius:99px}

.hero {
  min-height:760px;
  padding:90px 7vw;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:56px;
  color:#fff;
  position:relative;
  overflow:hidden}

.hero:before {
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 20% 20%,rgba(255,202,50,.22),transparent 32%),radial-gradient(circle at 80% 25%,rgba(27,143,211,.28),transparent 34%);
  pointer-events:none}

.hero>* {
  position:relative}

.hero-logo {
  width:300px;
  margin-bottom:150px}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:13px;
  font-weight:900;
  color:var(--yellow);
  margin:0 0 14px}

.hero h1 {
  font-size:clamp(44px,7vw,92px);
  line-height:.96;
  margin:0 0 22px;
  letter-spacing:-.06em}

.hero-text {
  font-size:20px;
  color:#d9e7f5;
  max-width:760px}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:30px 0}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  padding:14px 22px;
  font-weight:900;
  cursor:pointer;
  transition:.2s}

.btn-primary {
  background:var(--yellow);
  color:#081827;
  box-shadow:0 14px 30px rgba(255,202,50,.2)}

.btn-primary:hover {
  transform:translateY(-2px)}

.btn-ghost,.btn-outline {
  border:2px solid rgba(255,255,255,.45);
  color:#fff;
  background:transparent}

.btn-outline {
  color:var(--text);
  border-color:#d7e3ee}

.btn-whatsapp {
  background:#22c55e;
  color:#06140b}

.proof-strip {
  display:flex;
  flex-wrap:wrap;
  gap:10px}

.proof-strip span {
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:10px 14px;
  border-radius:999px;
  color:#e8f2fb}

.hero-showcase {
  position:relative;
  min-height:520px}

.camera-card {
  background:linear-gradient(145deg,#eaf2f7,#fff);
  border-radius:42px;
  min-height:420px;
  padding:30px;
  box-shadow:var(--shadow);
  position:relative;
  color:var(--text);
  transform:rotate(2deg)}

.camera-card:before {
  content:"";
  position:absolute;
  inset:18px;
  border:4px solid #0b1b2f;
  border-radius:32px}

.flash {
  width:86px;
  height:54px;
  background:var(--yellow);
  border-radius:16px;
  position:absolute;
  right:42px;
  top:42px}

.camera-preview {
  position:absolute;
  left:54px;
  right:54px;
  top:120px;
  height:170px;
  border-radius:28px;
  background:linear-gradient(135deg,#082033,#1b8fd3);
  display:grid;
  place-items:center;
  color:#fff}

.camera-logo {
  width:300px}

.camera-preview span {
  font-weight:900}

.print-slot {
  position:absolute;
  left:72px;
  right:72px;
  bottom:52px;
  background:#061522;
  color:#fff;
  border-radius:22px;
  padding:18px}

.print-slot strong {
  display:block;
  font-size:22px}

.floating-card {
  position:absolute;
  background:#fff;
  color:var(--text);
  border-radius:20px;
  padding:18px 22px;
  box-shadow:var(--shadow)}

.floating-card strong {
  display:block}

.floating-card span {
  color:var(--muted)}

.floating-card.left {
  left:-20px;
  bottom:90px}

.floating-card.right {
  right:-10px;
  top:90px}

.section {
  padding:86px 7vw;
  background:#fff}

.stats-section {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  background:#f5f9fc}

.stat {
  background:#fff;
  border-radius:24px;
  padding:28px;
  text-align:center;
  box-shadow:0 10px 35px rgba(10,30,50,.08)}

.stat strong {
  display:block;
  font-size:40px;
  color:var(--blue)}

.section-heading {
  max-width:850px;
  margin-bottom:34px}

.section-heading.center {
  text-align:center;
  margin-left:auto;
  margin-right:auto}

.section-heading h2 {
  font-size:clamp(32px,5vw,58px);
  line-height:1.04;
  margin:0 0 16px;
  letter-spacing:-.04em}

.section-heading p {
  color:var(--muted);
  font-size:18px}

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

.feature-card {
  background:var(--soft);
  border:1px solid #dfeaf2;
  border-radius:28px;
  padding:28px}

.feature-card span {
  font-size:38px}

.feature-card h3 {
  font-size:24px;
  margin:14px 0 8px}

.feature-card p {
  color:var(--muted)}

.greenscreen-section {
  background:#ecfff3}

.greenscreen-card {
  background:#fff;
  border-radius:var(--radius);
  padding:44px;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:34px;
  box-shadow:0 18px 60px rgba(0,0,0,.08)}

.greenscreen-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:24px 0}

.greenscreen-list span {
  background:#ecfff3;
  padding:12px 14px;
  border-radius:16px;
  font-weight:800}

.green-panel {
  background:linear-gradient(135deg,#17b35b,#9cffba);
  border-radius:28px;
  min-height:330px;
  padding:30px;
  color:#062414;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center}

.green-logo {
  width:300px}

.green-panel span {
  text-transform:uppercase;
  font-weight:900}

.green-panel strong {
  font-size:44px;
  line-height:1}

.preview-panels {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:14px}

.preview-panels div {
  background:#082033;
  color:#fff;
  border-radius:18px;
  padding:18px;
  font-weight:900;
  text-align:center}

.dark-section {
  background:#071827;
  color:#fff}

.dark-section .section-heading p {
  color:#bcd0df}

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

.price-card {
  background:#fff;
  color:var(--text);
  border-radius:28px;
  padding:32px;
  position:relative}

.price-card.featured {
  transform:scale(1.04);
  border:4px solid var(--yellow)}

.badge {
  position:absolute;
  right:24px;
  top:24px;
  background:var(--yellow);
  padding:6px 12px;
  border-radius:999px;
  font-weight:900}

.price {
  font-size:38px;
  font-weight:900;
  color:var(--blue);
  margin:10px 0}

.price-card ul {
  padding-left:20px;
  color:var(--muted)}

.comparison {
  margin-top:40px;
  background:rgba(255,255,255,.08);
  border-radius:24px;
  padding:24px}

.comparison-table .row {
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:10px;
  padding:13px;
  border-bottom:1px solid rgba(255,255,255,.15)}

.comparison-table .head {
  font-weight:900;
  color:var(--yellow)}

.gallery-section {
  background:#f5f9fc}

.gallery-grid,.event-gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px}

.gallery-item,.event-photo-card {
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 35px rgba(10,30,50,.1)}

.gallery-item img,.event-photo-card img {
  width:100%;
  height:230px;
  object-fit:cover}

.event-photo-card div {
  padding:14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between}

.event-photo-card span {
  font-size:13px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap}

.gallery-loading {
  grid-column:1/-1;
  text-align:center;
  color:var(--muted);
  padding:30px}

.event-download-section {
  background:#fff}

.download-cta-card,.download-box {
  border-radius:var(--radius);
  background:linear-gradient(135deg,#f4f9fc,#fff);
  padding:38px;
  box-shadow:0 14px 45px rgba(8,24,39,.1);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px}

.download-box {
  display:block;
  max-width:980px;
  margin:0 auto}

.download-box code {
  display:block;
  background:#0c1528;
  color:#fff;
  padding:16px;
  border-radius:14px;
  overflow:auto}

.event-login-form {
  display:grid;
  gap:18px}

.event-login-form label,.contact-form label {
  display:grid;
  gap:8px;
  font-weight:900}

.event-login-form input,.event-login-form select,.contact-form input,.contact-form select,.contact-form textarea {
  width:100%;
  border:1px solid #d7e3ee;
  border-radius:16px;
  padding:14px;
  font:inherit}

.error-message {
  background:#ffe8e8;
  color:#b91c1c;
  padding:12px 14px;
  border-radius:14px;
  font-weight:800}

.form-note {
  color:var(--muted);
  font-size:14px}

.timeline {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px}

.timeline article {
  background:var(--soft);
  border-radius:24px;
  padding:26px}

.timeline span {
  color:var(--blue);
  font-size:38px;
  font-weight:900}

.image-band {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:18px;
  background:#f5f9fc}

.image-tile {
  min-height:230px;
  border-radius:28px;
  background:linear-gradient(135deg,#0b2033,#1b8fd3);
  display:flex;
  align-items:end;
  padding:24px;
  color:#fff;
  font-size:30px;
  font-weight:900}

.image-tile.large {
  min-height:330px}

.region-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center}

.faq-list {
  display:grid;
  gap:12px}

.faq-list details {
  background:var(--soft);
  border-radius:20px;
  padding:20px}

.faq-list summary {
  font-weight:900;
  cursor:pointer}

.contact-section {
  background:#071827;
  color:#fff}

.contact-shell {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px}

.contact-logo {
  width:150px}

.contact-copy p {
  color:#cfe0ee}

.contact-buttons {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0}

.contact-form {
  background:#fff;
  color:var(--text);
  border-radius:28px;
  padding:28px;
  display:grid;
  gap:16px}

.sticky-whatsapp {
  position:fixed;
  right:22px;
  bottom:22px;
  background:#22c55e;
  color:#fff;
  font-weight:900;
  padding:14px 18px;
  border-radius:999px;
  box-shadow:var(--shadow);
  z-index:20}

.site-footer {
  background:#061522;
  color:#cfe0ee;
  padding:38px 7vw;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:24px}

.footer-logo {
  width:120px}

.site-footer nav {
  display:grid;
  gap:10px}

.lightbox {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.86);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50}

.lightbox.open {
  display:flex}

.lightbox img {
  max-width:88vw;
  max-height:84vh;
  border-radius:18px}

.lightbox button {
  position:absolute;
  background:#fff;
  border:0;
  border-radius:999px;
  font-size:40px;
  cursor:pointer}

.lightbox-close {
  right:28px;
  top:28px;
  width:54px;
  height:54px}

.lightbox-nav {
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:70px}

.lightbox-prev {
  left:28px}

.lightbox-next {
  right:28px}

.animated-logo {
  animation:floaty 4s ease-in-out infinite}

.hero-logo-float {
  animation:floaty 5s ease-in-out infinite}

@keyframes floaty {
  0%,100% {
  transform:translateY(0)}

50% {
  transform:translateY(-7px)}

}

@media(max-width:980px) {
  .main-nav {
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:#071827;
  padding:20px 7vw;
  flex-direction:column;
  align-items:flex-start}

.main-nav.active {
  display:flex}

.nav-toggle {
  display:flex}

.hero,.greenscreen-card,.contact-shell,.region-section {
  grid-template-columns:1fr}

.stats-section,.pricing-grid,.feature-grid,.timeline {
  grid-template-columns:1fr 1fr}

.site-footer {
  grid-template-columns:1fr}

.download-cta-card {
  display:block}

.hero {
  min-height:auto}

.hero-showcase {
  display:none}

}

@media(max-width:640px) {
  .top-info {
  display:block;
  text-align:center}

.stats-section,.pricing-grid,.feature-grid,.timeline,.greenscreen-list,.image-band {
  grid-template-columns:1fr}

.section {
  padding:62px 5vw}

.hero {
  padding:70px 5vw}

.hero h1 {
  font-size:48px}

.site-header {
  padding:14px 5vw}

.logo-img {
  height:54px}

.comparison-table .row {
  font-size:13px}

.event-photo-card div {
  display:block}

.event-photo-card .btn {
  margin-top:10px;
  width:100%}

}




/* =========================================================
   FIX: STARTSEITEN-GALERIE FULL WIDTH
   Desktop: 6 Bilder über die gesamte Browserbreite
   Tablet: 4 Bilder
   Handy: 2 Bilder
   Hinweistext wurde in index.php entfernt.
========================================================= */
.gallery-section  {
  background: #f5f9fc;
  overflow: hidden;
}



.gallery-section .section-heading  {
  margin-bottom: 0;
}



#galleryGrid.gallery-grid  {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 52px;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
}



#galleryGrid .gallery-item  {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: block;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(10, 30, 50, 0.14);
}



#galleryGrid .gallery-item img  {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.28s ease, filter 0.28s ease;
}



#galleryGrid .gallery-item:hover img  {
  transform: scale(1.055);
  filter: brightness(1.04);
}



@media (max-width: 1200px)  {
  #galleryGrid.gallery-grid  {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }


}



@media (max-width: 768px)  {
  #galleryGrid.gallery-grid  {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 5vw;
  }


}



/* Paket Hover Animation */
.price-card  {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}



.price-card:hover  {
  transform: translateY(-10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}



.price-card.featured:hover  {
  transform: translateY(-22px) scale(1.015);
}



/* Schöne Häkchen-Liste */
.price-card ul  {
  list-style: none;
  padding: 0;
  margin: 20px 0 28px;
}



.price-card li  {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 500;
}



.price-card li::before  {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #f7c948;
  font-weight: 900;
}



.price-card li strong  {
  font-weight: 700;
  color: #11131c;
}



.price-card.featured li strong  {
  color: #11131c;
}



/* Vergleichstabelle mit klaren Häkchen */
.comparison-table .row span:not(:first-child)  {
  text-align: center;
  font-weight: 800;
}



.comparison-table .row span:not(:first-child)  {
  color: rgba(255, 255, 255, 0.82);
}



.comparison-table .row span:not(:first-child):has(> .check),
.comparison-table .row span.check  {
  color: #f7c948;
}



.check  {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #f7c948;
  color: #11131c;
  font-weight: 900;
}



.cross  {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 900;
}