:root{
      --accent: #047dc4;
      --accent-2: #319cc0;
      --ring: rgba(4,160,215,.28);

      --radius: 18px;
      --shadow: 0 14px 40px rgba(2, 10, 18, .10);
      --shadow-strong: 0 18px 48px rgba(2, 10, 18, .16);
      --max: 1440px;

      /* LIGHT */
      --bg: #f5f8fb;
      --bg2: #eef5fa;
      --surface: #ffffff;
      --surface-2: #f7fbff;
      --text: #0c1220;
      --muted: rgba(12,18,32,.72);
      --border: rgba(12,18,32,.10);
      --headerbg: rgba(245,248,251,.78);
      --imgOverlay: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.40));
    }

    html[data-theme="dark"]{
      --bg: #0b0b0b;
      --bg2: #101010;
      --surface: #141414;
      --surface-2: #1b1b1b;
      --text: #f3f7fb;
      --muted: rgba(243,247,251,.72);
      --border: rgba(255,255,255,.12);
      --headerbg: rgba(11,11,11,.70);
      --shadow: 0 12px 40px rgba(0,0,0,.55);
      --shadow-strong: 0 18px 56px rgba(0,0,0,.62);
      --imgOverlay: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.58));
    }

    small {
	max-width: 60ch;
}

    *{ box-sizing: border-box; }
    html,body{ height:100%; scroll-behavior: smooth; 	scroll-padding-top: 6.5rem; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
      color: var(--text);
      line-height: 1.55;
      background:
        linear-gradient(180deg, var(--bg), var(--bg2));
      font-size: clamp(1rem, 0.975rem + 0.125vw, 1.125rem);        
    }

    a{ color: inherit; text-decoration: none; }
    img{ max-width:100%; display:block; }
    .container{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

p {
	text-wrap: balance;
	padding-bottom: .75rem;
	max-width: 62ch;
}    

header {
	position: fixed;
	top: 0;
	z-index: 50;
	backdrop-filter: blur(10px);
	background: var(--headerbg);
	border-bottom: 1px solid var(--border);
	width: 100%;
}
    .nav{
      display:flex;
      align-items:center;
      justify-content: space-between;
      padding: 14px 0;
      gap: 14px;
    }
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	height: clamp(2.75rem, 2.425rem + 1.625vw, 4.375rem);
}

.brand img {
	width: auto;
	height: 100%;
	/* object-fit: contain; */
}

.darkmode {
        display: none;
    }

.lightmode {
        display: block;
    }


    html[data-theme="dark"] .brand img{
      filter: drop-shadow(0 10px 16px rgba(0,0,0,.45));
    }

    html[data-theme="dark"] .darkmode {
        display: block;
    }

    html[data-theme="dark"] .lightmode {
        display: none;
    }    

    .brand-title{ display:flex; flex-direction:column; line-height:1.1; }
  .brand-title strong {
	letter-spacing: .02em;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
}

.brand-title span {
	color: var(--muted);
	font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
}

    .navlinks{
      display:flex;
      gap: 14px;
      align-items:center;
      justify-content:flex-end;
    }
    .navlinks a{
      color: var(--muted);
      font-size: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);
      padding: 8px 10px;
      border-radius: 10px;
      transition: .2s ease;
    }
    .navlinks a:hover{ color: var(--text); background: rgba(4,160,215,.10); }

    .cta{ display:flex; gap: 10px; align-items:center; }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 8px 18px;
      border-radius: 44px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.60);
      color: var(--text);
      cursor:pointer;
      transition: .2s ease;
      white-space: nowrap;
      max-width: fit-content;
    }

    .btn.insta {
	padding: 8px 26px;
}
    html[data-theme="dark"] .btn{ background: rgba(255,255,255,.06); }
    .btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
    .btn.primary{
      background: linear-gradient(135deg, rgba(4,160,215,.95), rgba(49,156,192,.85));
      border-color: rgba(4,160,215,.35);
      color: #fff;
      box-shadow: 0 16px 30px rgba(4,160,215,.18);
    }
    .btn.primary:hover{ box-shadow: 0 22px 44px rgba(4,160,215,.24); }

    button img {
	max-width: 22px;
}

    .iconbtn{
      width: 44px;
      height: 44px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.60);
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      transition: .2s ease;
      user-select:none;
    }
    html[data-theme="dark"] .iconbtn{ background: rgba(255,255,255,.06); color: white; }
    .iconbtn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
    .burger{ display:none; }

    .iconbtn.desktop {
	display: block;
}
    @media (max-width: 920px) {
.iconbtn.desktop {
	display: none;
}
    }

    .mobilemenu{
      display:none;
      padding: 10px 0 14px;
      border-top: 1px solid var(--border);
    }
    .mobilemenu a{
      display:block;
      padding: 10px 8px;
      border-radius: 12px;
      color: var(--muted);
    }
    .mobilemenu a:hover{ background: rgba(4,160,215,.10); color: var(--text); }
    .mobilemenu.open{ display:block; }

main {
	padding-top: 6.5rem;
}  

li {
	max-width: 62ch;
}

.page-hero.subpage {
	padding-bottom: 0;
}

    .hero{ padding: 56px 0 26px; }
    .hero-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(1.375rem, 1.1rem + 1.375vw, 2.75rem); row-gap: clamp(2.75rem, 2.2rem + 2.75vw, 5.5rem);
      align-items: stretch;
      min-height: 60svh;
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    html[data-theme="dark"] .card{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    }

.hero-left {
	padding: 26px;
	position: relative;
	order: 1;
  align-content: center;
}
    .hero-left:before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(560px 220px at 16% 0%, rgba(4,160,215,.18), transparent 60%),
        radial-gradient(520px 240px at 105% 0%, rgba(49,156,192,.12), transparent 55%);
      pointer-events:none;
    }
    .hero-left > *{ position: relative; z-index: 1; }

    .eyebrow{
      display:inline-flex;
      gap: 10px;
      align-items:center;
      font-size: .95rem;
      padding: 6px 14px;
      border-radius: 999px;
      border: 1px solid rgba(4,160,215,.35);
      background: rgba(4,160,215,.10);
      width: fit-content;
      color: rgba(12,18,32,.86);
    }
    html[data-theme="dark"] .eyebrow{ color: rgba(243,247,251,.88); }
    .dot{
      width: 10px; height: 10px;
      border-radius: 99px;
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(4,160,215,.15);
    }

    h1{
      margin: 14px 0 10px;
      font-size: clamp(1.625rem, 1.475rem + 0.75vw, 2.375rem);
      line-height: 1.12;
      letter-spacing: .2px;
      margin-bottom: 24px;
    }
    .lead{
      margin: 0 0 44px;
      color: var(--muted);
      font-size: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);
      max-width: 62ch;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      align-items:center;
      margin-top: 12px;
    }
    .badges{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      margin-top: 16px;
    }
    .badge{
      display:inline-flex;
      gap: 8px;
      align-items:center;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: rgba(4,160,215,.07);
      color: rgba(12,18,32,.82);
      font-size: .92rem;
    }
    html[data-theme="dark"] .badge{
      background: rgba(255,255,255,.05);
      color: rgba(243,247,251,.88);
    }
    .badge b{ font-weight: 750; }

    /* Slideshow */
    .slideshow{ height: 100%; min-height: 360px; position: relative; display:flex; flex-direction: column; }
    .slides{ position: relative; flex: 1; overflow:hidden; border-radius: var(--radius); }
    .slide{ position:absolute; inset:0; opacity:0; transform: scale(1.02); transition: opacity .45s ease, transform .65s ease; margin: 0; }
    .slide.active{ opacity:1; transform: scale(1.00); }
    .slide img{ width:100%; height:100%; object-fit: cover; }
    .slide:after{ content:""; position:absolute; inset:0; background: var(--imgOverlay); pointer-events:none; }

.caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	color: #fff;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background-color: hsl(0 0% 0% /.7);
	padding: 1rem;
	border-radius: 4px;
	padding-bottom: 40px;
}
    .caption strong{ font-size: 1.05rem; letter-spacing: .2px; text-shadow: 0 10px 24px rgba(0,0,0,.45); }
    .caption span{ font-size: .95rem; opacity: .92; text-shadow: 0 10px 24px rgba(0,0,0,.45); max-width: 60ch; }

    .controls{
      position:absolute; inset: 0; display:flex; align-items:center; justify-content: space-between;
      pointer-events:none; z-index: 3; padding: 0 10px;
    }
    .arrow{
      pointer-events:auto; width: 44px; height: 44px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.45);
      background: rgba(0,0,0,.25); color: #fff;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition: .2s ease; user-select:none; backdrop-filter: blur(6px);
    }
    .arrow:hover{ transform: translateY(-1px); background: rgba(0,0,0,.35); }

    .dots{ position:absolute; left: 16px; bottom: 14px; display:flex; gap: 8px; z-index: 4; }
    .dotbtn{
      width: 10px; height: 10px; border-radius: 999px;
      border: 1px solid rgba(255,255,255,.55);
      background: rgba(255,255,255,.30);
      cursor:pointer; transition: .2s ease; padding:0;
    }
    .dotbtn.active{
      background: rgba(4,160,215,.95);
      border-color: rgba(4,160,215,.95);
      box-shadow: 0 0 0 6px rgba(4,160,215,.18);
    }

section {
	padding: 34px 0;
}

/* Alle Sections als "Layer" vorbereiten */
main > section {
	position: relative;
	padding-bottom: 88px;
}

/* Inhalte über dem Overlay */
main > section > .container{
  position: relative;
  z-index: 1;
}

/* Overlay nur auf jeder zweiten Section */
main > section:nth-of-type(even) {

  /* weicher, größer, weniger harte Zahlen */
  background:
    radial-gradient(
      clamp(520px, 45vw, 900px) clamp(320px, 28vw, 560px) at 12% 10%,
      rgba(4,160,215,.16),
      transparent 70%
    ),
    radial-gradient(
      clamp(520px, 45vw, 900px) clamp(320px, 28vw, 560px) at 92% 20%,
      rgba(49,156,192,.12),
      transparent 72%
    );

  /* Übergänge oben/unten weich ausblenden */
  opacity: 1;
  filter: blur(0px);
}

main > section:nth-of-type(2n).contact, main > section:nth-of-type(2n).contact::after {
	background: var(--accent);
}

.contact .section-head, .contact .section-head p {
	color: white;
}

/* Fade oben/unten, damit kein harter Schnitt entsteht */
main > section:nth-of-type(even)::after{
  content:"";
  position:absolute;
  inset: 0;
  z-index: 0;
  pointer-events:none;

  /* „Vignette“: oben/unten zurück zur Grundfläche */
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    rgba(0,0,0,0) 18%,
    rgba(0,0,0,0) 82%,
    var(--bg2) 100%
  );

  /* sorgt dafür, dass es in beiden Themes stimmig bleibt */
  mix-blend-mode: normal;
}


    .section-head{ display:flex; align-items:flex-end; justify-content: space-between; gap: 18px; margin-bottom: 44px; }
    .section-head h2{ margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.85rem); letter-spacing: .2px; }
    .section-head p{ margin: 0; color: var(--muted); max-width: 70ch; }

    .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.375rem, 1.1rem + 1.375vw, 2.75rem); row-gap: clamp(2.75rem, 2.2rem + 2.75vw, 5.5rem); }
    .service{ grid-column: span 6; display:flex; flex-direction: column; min-height: 100%; }

.primary.service .card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: clamp(2.75rem, 2.2rem + 2.75vw, 5.5rem);
}    

.card.panel.kontakt {
	padding: 0;
}

.card.panel.kontakt .content {
	padding: 18px;
}

@media (max-width: 920px) {
.primary.service .card {
	grid-template-columns: 1fr;
}  
}

    .service .imgwrap {
	position: relative;
	/* height: 220px; */
	overflow: hidden;
	background: var(--surface-2);
	aspect-ratio: 16/9;    
}

.card.panel.kontakt img {
	width: 220px;
	padding: 18px;
}

    .service .imgwrap img { width:100%; height:100%; object-fit: cover; transform: scale(1.02); filter: saturate(1.05) contrast(1.02); }
    .service .imgwrap:after { content:""; position:absolute; inset:0; background: var(--imgOverlay); }

    .service .content{ padding: 16px 16px 18px; display:flex; flex-direction: column; gap: 10px; }
    .kicker{ display:flex; gap: 10px; align-items:center; margin: 0; font-size: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem); letter-spacing: .2px; font-weight: 800; }
    .pill{
      font-size: .82rem; font-weight: 800; letter-spacing: .35px;
      color: var(--text);
      background: rgba(4,160,215,.12);
      border: 1px solid rgba(4,160,215,.35);
      padding: 4px 9px; border-radius: 999px;
    }
    html[data-theme="dark"] .pill{ color:#fff; }
    .service p{ margin: 0; color: var(--muted); }
    .service ul{ margin: 6px 0 0; padding-left: 18px; color: rgba(12,18,32,.80); }
    html[data-theme="dark"] .service ul{ color: rgba(243,247,251,.80); }
    .service li{ margin: 4px 0; }

.contact {
	background: linear-gradient(180deg, rgba(4,160,215,.06), rgba(49,156,192,.04));
	border-top: 1px solid var(--border);
	border-bottom: 0px solid var(--border);
	padding-bottom: 66px;
}
    .contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.375rem, 1.1rem + 1.375vw, 2.75rem); row-gap: clamp(2.75rem, 2.2rem + 2.75vw, 5.5rem); /* align-items: start; */ }
    .panel{ padding: 18px; }

    form{ display:grid; gap: 10px; margin-top: 10px; }
    input, textarea{
      width:100%; padding: 12px 12px;
      border-radius: 12px; border: 1px solid var(--border);
      background: rgba(255,255,255,.80); color: var(--text);
      outline: none;
    }
    html[data-theme="dark"] input, html[data-theme="dark"] textarea{ background: rgba(0,0,0,.28); }
    input:focus, textarea:focus{ border-color: rgba(4,160,215,.55); box-shadow: 0 0 0 5px var(--ring); }

    textarea {
	min-height: 120px;
	resize: vertical;
	margin-bottom: 22px;
}

select{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.80);
  color: var(--text);
  outline: none;
}
html[data-theme="dark"] select{ background: rgba(0,0,0,.28); }
select:focus{
  border-color: rgba(4,160,215,.55);
  box-shadow: 0 0 0 5px var(--ring);
}    

    footer{ padding: 22px 0; color: var(--muted); font-size: .92rem; }
    footer .row{ display:flex; flex-wrap:wrap; gap: 10px; align-items:center; justify-content: space-between; }
    footer a{ color: var(--muted); }
    footer a:hover{ color: var(--text); }

    @media (max-width: 920px){
      .hero {
        padding: 0px 0 26px;
      }
      .hero-grid{ grid-template-columns: 1fr; }
      .contact-grid{ grid-template-columns: 1fr; }
      .service{ grid-column: span 12; }
      .navlinks{ display:none; }
      .burger{ display:inline-flex; }
      .cta .btn{ display:none; }
      .cta .btn.primary{ display:inline-flex; }
      .slideshow {
        min-height: 65svh;
      }
    }

/* =========================
   Referenzen / Galerie
   ========================= */
.gallery-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 14px 0 18px;
}

.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.60);
  color: var(--text);
  cursor:pointer;
  transition: .2s ease;
  font-size: .95rem;
  user-select:none;
}
html[data-theme="dark"] .chip{ background: rgba(255,255,255,.06); color: var(--text); }
.chip:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.chip.active{
  border-color: rgba(4,160,215,.35);
  background: rgba(4,160,215,.12);
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

.gallery-item{
  grid-column: span 4;
  position: relative;
  overflow:hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: var(--surface);
  cursor: zoom-in;
  margin: 0;
}

.gallery-item .media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background: var(--surface-2);
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.gallery-item:hover img{
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.02);
}
.gallery-item .media::after{
  content:"";
  position:absolute;
  inset:0;
  background: var(--imgOverlay);
  opacity: .65;
  pointer-events:none;
  transition: opacity .25s ease;
}
.gallery-item:hover .media::after{ opacity: .50; }

.gallery-caption{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  color:#fff;
  z-index: 2;
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.gallery-caption strong{
  font-size: 1.00rem;
  letter-spacing: .2px;
  text-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.gallery-caption span{
  font-size: .90rem;
  opacity: .92;
  text-shadow: 0 10px 24px rgba(0,0,0,.45);
}

.gallery-item.hidden{ display:none; }

/* Lightbox */
.lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 200;
  padding: 18px;
}
.lightbox.open{ display:flex; }

.lightbox-inner{
  width: min(1100px, 96vw);
  max-height: 88vh;
  position: relative;
}

.lightbox-img{
  width:100%;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 56px rgba(0,0,0,.55);
  background: rgba(0,0,0,1);
}

.lightbox-top{
  position:absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  pointer-events:none;
}
.lightbox-title{
  pointer-events:none;
  color:#fff;
  font-size: .95rem;
  opacity: .92;
  text-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.lb-btn{
  pointer-events:auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color: #fff;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(6px);
  transition: .2s ease;
  user-select:none;
}
.lb-btn:hover{ transform: translateY(-1px); background: rgba(0,0,0,.45); }

.lb-nav{
  position:absolute;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events:none;
}
.lb-nav .lb-btn{ pointer-events:auto; }

@media (max-width: 980px){
  .gallery-item{ grid-column: span 6; }
}
@media (max-width: 620px){
  .gallery-item{ grid-column: span 12; }
}