/* ========== KONTAKTKREIS-GRUNDEINSTELLUNGEN ========== */

/* Übergeordneter Container: Immer unten mittig positioniert */
.spinner {
  position: fixed;             /* Fixiert am Bildschirm */
  bottom: 20px;                /* Abstand vom unteren Rand */
  left: 50%;                   /* Horizontale Mitte */
  transform: translateX(-50%); /* Exakte Zentrierung */
  width: 80px;                 /* Standardgröße */
  height: 80px;
  border-radius: 50%;
  z-index: 1000;               /* Immer über anderem Content */
}

/* Dunkler, unscharfer Kreis in der Mitte */
.spinner1 {
  position: absolute; 
  top: 50%;                    /* Exakte Mitte */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;         /* Angepasst für besseren Effekt */
  height: 60px;
  border-radius: 50%;
  background-color: rgb(36, 36, 36);
  filter: blur(8px);
  z-index: 1;
}

/* Rotierender Farbverlauf */
.spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: linear-gradient(
    rgb(186, 66, 255) 35%, 
    rgb(0, 225, 255)
  );
  animation: spinning82341 1.7s linear infinite;
  z-index: 0;
  box-shadow: 0px -3px 15px 0px rgb(186, 66, 255),
              0px  3px 15px 0px rgb(0, 225, 255);
}

/* Logo mit atmendem Effekt */
.spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 60px;
  height: 60px;
  background: url("../images/webton/WebtonIcon.png") no-repeat center center;
  background-size: contain;
  z-index: 2;
  animation: breathe 2s infinite alternate ease-in-out;
}

/* ========== RESPONSIVE ANPASSUNG ========== */
@media (max-width: 1024px) {  /* iPads & kleinere Screens */
  .spinner {
      width: 60px;
      height: 60px;
      bottom: 15px;
  }
  .spinner1 {
      width: 45px;
      height: 45px;
  }
  .spinner::after {
      width: 40px;
      height: 40px;
  }
}

@media (max-width: 768px) {  /* Smartphones */
  .spinner {
      width: 50px;
      height: 50px;
      bottom: 10px;
  }
  .spinner1 {
      width: 35px;
      height: 35px;
  }
  .spinner::after {
      width: 35px;
      height: 35px;
  }
}

/* ========== KEYFRAMES ========== */
@keyframes spinning82341 {
  to {
      transform: rotate(360deg);
  }
}

@keyframes breathe {
  0% {
      transform: translate(-50%, -50%) scale(1);
  }
  100% {
      transform: translate(-50%, -50%) scale(0.70);
  }
}


/* Start Icons */
/* Grund-Button: kein Standard-Background, kein Rahmen */
.button {
  background: none;
  border: none;
  cursor: pointer;
}

/* Container für Bloom-Effekt und Hauptelement */
.button__bloom-container {
  position: relative;
  transition: all 0.2s ease-in-out;
  border: none;
  background: none;
}

/* Das runde Hauptelement mit dem gedrehten Rahmen */
.button__container-main {
  width: 55px;              /* halbierte Breite */
  aspect-ratio: 1;          /* = Höhe wie Breite */
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: grid;
  place-content: center;
  /* einseitiger Rahmen (weißer Rand auf rechts, halbtransparenter auf links) */
  border-right: 2.5px solid white; 
  border-left: 2.5px solid rgba(128, 128, 128, 0.147);
  transform: rotate(-45deg);
  transition: all 0.5s ease-in-out;
}

/* Innerer Kreis mit Schatten */
.button__inner {
  height: 30px;             /* halbiert von 60px */
  aspect-ratio: 1;         
  border-radius: 50%;
  position: relative;
  box-shadow: rgba(100, 100, 111, 0.5) -5px 2.5px 5px 0px;
  transition: all 0.5s ease-in-out;
}

/* Im Basisset KEIN Farbverlauf, den überschreiben wir 
   gleich in den .button--VARIANTE-Klassen */
.button__inner .back {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  /* optional: hier leer lassen oder z.B. neutraler BG */
}

.button__inner .front {
  position: absolute;
  inset: 2.5px; /* halbiert von 5px */
  border-radius: 50%;
  /* ebenfalls im Basisset leer */
  display: grid;
  place-content: center;
}

/* Das SVG, das im inneren Kreis angezeigt wird */
.button__inner .front .svg {
  fill: #ffffff;     /* Standard: weiß */
  opacity: 0.5;      /* halbtransparent */
  width: 15px;       /* halbiert von 30px */
  aspect-ratio: 1;
  transform: rotate(45deg);
  transition: all 0.2s ease-in;
}

/* Scheineffekt / Glas-Overlay */
.button__glass {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.888) 100%
  );
  transform: translate(0%, -50%) rotate(0deg);
  transform-origin: bottom center;
  transition: all 0.5s ease-in-out;
}

/* Blooms (= kleine Lichtpunkte) */
.bloom {
  height: 0.5px; /* halbiert von 1px */
  width: 0.5px;  /* halbiert von 1px */
  position: absolute;
  background: white;
}

.bloom1 {
  top: 5px;    /* statt 10px */
  right: 10px; /* statt 20px */
  box-shadow:
    rgb(255, 255, 255) 0px 0px 5px 5px,
    rgb(255, 255, 255) 0px 0px 10px 10px;
}

.bloom2 {
  bottom: 5px; /* statt 10px */
  left: 10px;  /* statt 20px */
  box-shadow:
    rgba(255, 255, 255, 0.5) 0px 0px 5px 5px,
    rgba(255, 255, 255, 0.5) 0px 0px 15px 10px;
}

/* Hover-Effekt: Button minimal skalieren */
.button:hover .button__bloom-container {
  transform: scale(1.1);
}
/* Beim Hover: Glas verschieben */
.button:hover .button__container-main .button__glass {
  transform: translate(0%, -40%);
}
/* Beim Hover: SVG sichtbarer machen + leichter Glowschatten */
.button:hover .button__inner .front .svg {
  opacity: 1;
  filter: drop-shadow(0 0 5px white);
}

/* Active-Effekt: Button stärker skalieren + "Pop" beim Inneren */
.button:active .button__bloom-container {
  transform: scale(0.7);
}
.button:active .button__container-main .button__inner {
  transform: scale(1.2);
}

/* ------------------------------------------------------
   DISCORD (dunkler → heller & umgekehrt)
------------------------------------------------------ */
.button--discord .button__inner .back {
  background: linear-gradient(
    60deg,
    #5865F2 0%,
    #9B9CF3 100%
  );
}
.button--discord .button__inner .front {
  background: linear-gradient(
    60deg,
    #9B9CF3 0%,
    #5865F2 100%
  );
}

/* ------------------------------------------------------
   FACEBOOK (dunkler → heller & umgekehrt)
------------------------------------------------------ */
.button--facebook .button__inner .back {
  background: linear-gradient(
    60deg,
    #1877F2 0%,
    #2D88FF 100%
  );
}
.button--facebook .button__inner .front {
  background: linear-gradient(
    60deg,
    #2D88FF 0%,
    #1877F2 100%
  );
}

/* ------------------------------------------------------
   INSTAGRAM
   (Pink → Violett & umgekehrt, wie zuvor gezeigt)
------------------------------------------------------ */
.button--instagram .button__inner .back {
  background: linear-gradient(
    60deg,
    #fd5949 0%,
    #d6249f 100%
  );
}
.button--instagram .button__inner .front {
  background: linear-gradient(
    60deg,
    #833ab4 0%,
    #fd1d1d 100%
  );
}

/* ------------------------------------------------------
   LINKEDIN (dunkler → heller & umgekehrt)
------------------------------------------------------ */
.button--linkedin .button__inner .back {
  background: linear-gradient(
    60deg,
    #0A66C2 0%,
    #0077B5 100%
  );
}
.button--linkedin .button__inner .front {
  background: linear-gradient(
    60deg,
    #0077B5 0%,
    #0A66C2 100%
  );
}

/* ------------------------------------------------------
   TIKTOK (Pink → Türkis & umgekehrt)
------------------------------------------------------ */
.button--tiktok .button__inner .back {
  background: linear-gradient(
    60deg,
    #ee1d52 0%,
    #69c9d0 100%
  );
}
.button--tiktok .button__inner .front {
  background: linear-gradient(
    60deg,
    #69c9d0 0%,
    #ee1d52 100%
  );
}

/* ------------------------------------------------------
   WHATSAPP (dunkler → heller & umgekehrt)
------------------------------------------------------ */
.button--whatsapp .button__inner .back {
  background: linear-gradient(
    60deg,
    #075E54 0%,
    #25D366 100%
  );
}
.button--whatsapp .button__inner .front {
  background: linear-gradient(
    60deg,
    #25D366 0%,
    #128C7E 100%
  );
}

.button--small .button__container-main {
  width: 35px;
}

.button--small .button__inner {
  height: 18px;
}

.button--small .button__inner .front .svg {
  width: 12px;
}

.button--small .bloom1,
.button--small .bloom2 {
  display: none;
}

.button--large .button__container-main {
  width: 85px;
}

.button--large .button__inner {
  height: 68px;
}

.button--large .button__inner .front .svg {
  width: 62px;
}

/* End Icons */

/* Start Robot */
.robot-services-container {
  position: relative; /* Damit absolute-Kind auf diesen Container bezogen wird */
  width: 100%;
  height: 100vh; /* oder größer, je nach Bedarf */
  overflow: visible; /* Wichtig, falls du in einem Vorfahren overflow: hidden hast */
}
.robot-services-container .robot {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.robot .fullscreen-robot {
  width: 100%;
  height: 100%;
  object-fit: cover; /* falls nötig */
}

/* End Robot */



/* Start Kontaktformular */

#formContainer {
  /* Damit man eine Transition auf opacity und transform machen kann */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-out {
  opacity: 0;
  transform: scale(0.95);
}




/* End Kontaktformular */



/* ────────────────────────────
   1. Bereich „Deine Idee“     */
/* 1a – H2 „Deine Idee“ (blaue Schrift) */
.ld-fancy-heading .ld-fh-element.text-92.text-blue-950{
  font-size: clamp(2rem, 9vw + .4rem, 5.75rem); /* ~32 px @ 360 px */
  line-height: 1.1;
}

/* 1b – H2 „Digitalisieren“ (Gradient) */
.ld-fancy-heading .ld-gradient-heading.text-92{
  font-size: clamp(2rem, 9vw + .4rem, 5.75rem);
  line-height: 1.1;
}

/* ────────────────────────────
   2. Bereich „Maßgeschneiderte IT-Lösungen!“ */
.ld-fancy-heading .ld-gradient-heading.text-44.lqd-highlight-classic{
  font-size: clamp(1.3rem, 7vw + .3rem, 2.75rem); /* ~24 px @ 360 px */
  line-height: 1.2;
}

/* ────────────────────────────
   3. Bereich „Software-Lösungen der Zukunft“ */
/* 3a – Rotator-Headline */
.text-rotator-activated.text-72{
  font-size: clamp(1.8rem, 8vw + .4rem, 4.5rem);  /* ~29 px @ 360 px */
  line-height: 1.15;
}

/* 3b – Intro-Absatz darunter (falls er auf Mobile auch zu groß aussieht) */
.col-xl-5 .ld-fh-element.text-20{
  font-size: clamp(1rem, 4.8vw + .2rem, 1.25rem); /* ~16 px @ 360 px */
  line-height: 1.35;
}

/* ──────────────────────────────
   Bereich „Unsere Leistungen:“  */
   .ld-fancy-heading .ld-fh-element.text-50[data-text-rotator="true"]{
    /* passt Desktop-Größe NICHT an – nur Mobile verkleinern */
    font-size: clamp(1.6rem, 7vw + .3rem, 3.25rem); /* ~25 px @ 360 px */
    line-height: 1.15;
  }
  
  /* Falls das Rotator-Script immer noch nowrap erzwingt (lange Wörter!) */
  .ld-fh-element.text-50[data-text-rotator="true"] .txt-rotate-keyword{
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;          /* saubere Silbentrennung bei lang="de" */
  }
  

  /* ─────────────  Download-Section  ───────────── */
#download .container{
  /* 1) Flex → Grid - dadurch automatische Zeilenumbrüche       */
  display: grid;
  /* 2-Spalten-Raster, aber min. 280 px – fällt sonst um       */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;                /* Abstand zwischen den Boxen        */
  padding: 0 1rem;          /* etwas Innenabstand links/rechts    */
}

/* Boxen sollen IMMER volle Spaltenbreite bekommen               */
#download .w-50percent{
  width: 100% !important;   /* überschreibt .w-50percent          */
}

/* Icon-Leiste in jeder Box: bricht bei Bedarf um                */
#download .iconbox > .flex{
  flex-wrap: wrap;          /* Icons umbrechen                    */
  justify-content: center;  /* zentrieren                         */
  gap: 1rem;                /* gleichmäßiger Abstand              */
}

/* Überschrift & Texte etwas verkleinern, damit nichts überlappt */
#download h3,
#download .h6{
  font-size: clamp(1rem, 4.5vw + .2rem, 1.25rem);
  line-height: 1.3;
}

#download p{
  font-size: clamp(.9rem, 3.8vw + .2rem, 1.1rem);
  line-height: 1.35;
}


/* ---------- Layout-Grid für beliebig viele Cards ---------- */
.pricing-wrapper{
  display:grid;
  gap:1.75rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

/* ---------- Grund-Card ---------- */
/* =======================================================================
   Pricing Cards – Webton (LIGHT version)
   ======================================================================= */

/* ---------- Basis-Card ---------- */
.pricing-card{
  background:#fff;
  border-radius:0.75rem;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease;
}
.pricing-card:hover{ transform:scale(1.05); }

/* farbiger Akzent oben */
.pricing-card .accent{
  display:block;
  height:4px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent2,var(--accent)) 100%);
  border-radius:0;                          /* bündig links/rechts */
}

/* Card-Body */
.pricing-card .card-body{ padding:1.5rem; flex:1; }
.pricing-card h3       { margin:0 0 .5rem; font:700 1.5rem/1.3 "Inter",sans-serif; color:#1f2937; }
.pricing-card .subtitle{ margin:0 0 1.5rem; font:400 .9rem/1.4 "Inter",sans-serif; color:#6b7280; }
.pricing-card .price   { margin:0 0 1.5rem; font:700 2rem/1.2 "Inter",sans-serif; color:#1f2937; }

/* ---------- Feature-Liste ---------- */
.features{
  list-style:none;
  margin: 3rem 0 1.5rem;
  padding:0;
  font:400 .95rem/1.45 "Inter",sans-serif;
}
.features li{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  margin-bottom:1.1rem;
}

/* Check-Ring */
.features .check{
  position:relative;
  flex:0 0 1.4rem;
  width:1.4rem;
  height:1.4rem;
  border-radius:50%;
  border:2px solid var(--accent);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
.features .check svg{
  width:0.7rem;
  height:0.7rem;
  display:block;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}
.features .check svg path{
  stroke:var(--accent);
  stroke-width:3;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Titel + Subline (sichtbar auf Weiß) */
.feat-title{ font-weight:600; color:#1f2937; }
.feat-desc { display:block; font-size:.8rem; color:#6b7280; margin-top:.1rem; }

/* ---------- Footer + Button ---------- */
.pricing-card .card-footer{ padding:1rem; }
.pricing-card .btn{
  display:block; width:100%;
  padding:.75rem 1rem;
  font:600 1rem/1 "Inter",sans-serif;
  color:#fff;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent2,var(--accent)) 100%);
  border:0; border-radius:9999px; cursor:pointer;
  transition:filter .18s ease;
  box-shadow:0 0 8px var(--accent2);
}
.pricing-card .btn:hover{ filter:brightness(1.1); }

/* ---------- Farb-Tiers ---------- */
.pricing-card.tier-1{ --accent:#38bdf8; --accent2:#0ea5e9; }
.pricing-card.tier-2{ --accent:#c084fc; --accent2:#a855f7; }
.pricing-card.tier-3{ --accent:#fbbf24; --accent2:#f59e0b; }

/* ---------- Schlagschatten farbig pro Tier ---------- */
.pricing-card{
  border:1px solid #e5e7eb;
}
.pricing-card.tier-1{ box-shadow:0 6px 20px rgba( 56,189,248,.35); }
.pricing-card.tier-2{ box-shadow:0 6px 20px rgba(192,132,252,.35); }
.pricing-card.tier-3{ box-shadow:0 6px 20px rgba(251,191, 36,.35); }

.pricing-card:hover{
  transform:translateY(-4px) scale(1.04);
}

/* =======================================================================
   Layout-Struktur (Titel links | Cards rechts)
   ======================================================================= */
.pricing-block{ margin-bottom:5rem; }

.pricing-grid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:2rem;
  align-items:start;
}
@media (max-width:768px){
  .pricing-grid{ grid-template-columns:1fr; }
}

.pricing-grid-alt{
  display:grid;
  grid-template-columns:0.5fr 0.5fr 0.5fr;
  gap:2rem;
  align-items:start;
}
@media (max-width:768px){
  .pricing-grid-alt{ grid-template-columns:1fr; }
}

/* ---------- Titel-Block ---------- */
.pricing-head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
  position:sticky;
  top:6rem;
}
.pricing-head h3{
  font:700 1.6rem/1.2 "Inter",sans-serif;
  color:#1f2937;
  margin:0;
}
.pricing-head .head-icon{
  width:48px; height:48px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent2) 100%);
  display:flex; align-items:center; justify-content:center;
}
.pricing-head .head-icon svg{
  width:24px; height:24px;
  stroke:#2ad2c9; stroke-width:2; fill:none;
}

/* ───── Preis in Akzentfarben (Gradient) ───── */
.pricing-card .price{
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent2,var(--accent)) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;   /* macht den Text selbst transparent */
  color:transparent;                     /* Fallback für andere Browser */
}

/* ─── endgültiger Compact-Fix – nur Buttons im Card-Footer ─── */
.pricing-card .card-footer{
  padding:.75rem 1rem 1.25rem;        /* schlankerer Footer */
  text-align:center;
}


/* ─── Compact-Button NUR im Card-Footer ─────────────────────── */
.pricing-card .card-footer{
  padding:.75rem 1rem 1.25rem;   /* schlankerer Footer */
  text-align:center;
}

.pricing-card .card-footer .btn,
.pricing-card .card-footer .btn:visited{
  display:inline-flex;           /* KEIN Block mehr        */
  justify-content:center;
  align-items:center;

  width:fit-content;             /* so breit wie nötig      */
  padding:.55rem 1.4rem;         /* kompakter               */
  font-size:.9rem;
  line-height:1;
  text-decoration:none;
}

/* kleine Feedback-Effekte (optional) */
.pricing-card .card-footer .btn:hover  { filter:brightness(1.1); }
.pricing-card .card-footer .btn:active { transform:scale(.97); }


/* ─────────────────────────────────────────────────────────────────────── */

/* From Uiverse.io: Custom Learn More Button */ 
.custom-learn-more-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0.75rem 2.5rem;
  border: 2px solid #2ad2c9;
  background: transparent;
  color: #2ad2c9;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition:
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
}

.custom-learn-more-btn .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  background: #2ad2c9;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease-in-out;
  z-index: -1;
}

.custom-learn-more-btn .button-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-learn-more-btn .arrow {
  width: 14px;
  height: 2px;
  background: #2ad2c9;
  position: relative;
  transition:
    transform 0.3s ease-in-out,
    background 0.3s ease-in-out;
}

.custom-learn-more-btn .arrow::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-right: 2px solid #2ad2c9;
  border-top: 2px solid #2ad2c9;
  transform: rotate(45deg);
  right: -2px;
  top: -2px;
  transition: border-color 0.3s ease-in-out;
}

.custom-learn-more-btn:hover {
  color: #fff;
  border-color: transparent;
}

.custom-learn-more-btn:hover .circle {
  transform: translate(-50%, -50%) scale(4);
}

.custom-learn-more-btn:hover .arrow {
  background: #fff;
  transform: translateX(5px);
}

.custom-learn-more-btn:hover .arrow::after {
  border-color: #fff;
}

.custom-learn-more-btn:active {
  transform: scale(0.98);
}


/* ────────────────────────────────────────────────────────────────────── */



/* ──────────────────────────────────────────────
   TAB-BOX  –  RESPONSIVE QUICK-FIX (≤ 768 px)
   ──────────────────────────────────────────── */
   @media (max-width: 768px) {

    /* 1) Beide Info-Spalten vollbreit stapeln */
    .tab-box .w-25percent,
    .tab-box .w-50percent,
    .tab-box [class*="col-"]          { width:100% !important; }
  
    .tab-box .w-25percent:not(:first-child){
      margin-top:2rem;               /* angenehmer Abstand */
    }
  
    /* 2) Überschriften & Zähler etwas kleiner   */
    .tab-box .lqd-counter-element.h1 { font-size:clamp(2rem,7vw,2.8rem); }
    .tab-box h1,                      /* falls du H-Tags nutzt */
    .tab-box h2                       { font-size:clamp(1.5rem,6vw,2.2rem); }
  
    /* 3) Tabs selbst horizontal scroll-bar      */
    .tab-box .lqd-tabs-nav            {
      flex-direction:row;
      overflow-x:auto;
      scrollbar-width:none;          /* Firefox */
    }
    .tab-box .lqd-tabs-nav::-webkit-scrollbar{ display:none; }  /* Chrome */
  
    .tab-box .lqd-tabs-nav li         { white-space:nowrap; }
    .tab-box .lqd-tabs-nav-txt        { font-size:.85rem; }
  
    /* 4) Technologie-Icons in ein flexibles Grid */
    .tab-box .module-clients          {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(64px,1fr));
      gap:.75rem;
      padding-top:1.5rem;
    }
    .tab-box .module-clients svg      {
      width:48px;height:48px;         /* nicht riesig …        */
    }
  }
  
  /* ───────── winzige Smartphones (< 430 px) ─────── */
  @media (max-width: 430px){
    .tab-box .lqd-counter-element.h1 { font-size:2rem; }
    .tab-box h2                      { font-size:1.4rem; }
  }
  
/* Responsive background image styles */
  .section--technologien {
    position: relative;
    width: 100%;
    /* background-image: url('/assets/images/webton/d.jpg'); */
    background-size: cover; /* ensures the image always covers the area */
    background-position: center; /* centers the image */
    background-repeat: no-repeat; /* prevents tiling */
  }

  /* Optional: Add some padding top/bottom if you need more spacing */
  .section--technologien {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  /* Make sure the inner content is positioned relative so it sits above the background image */
  .section--technologien > .container-custom {
    position: relative;
    z-index: 1;
  }

  /* Optional: If you want a subtle overlay over the background image for better text readability */
  .section--technologien::before {
    content: "";
    position: absolute;
    inset: 0;
     background: radial-gradient(
      at 70% 30%,
      #ff9cf4 0%,          /* dezenter Pink‑Akzent */
      #686b7b 20%,         /* helleres Grau */
      #4b5563 40%,         /* Slate Gray */
      #374151 65%,         /* Dark Slate */
      #1f2937 100%         /* nahezu Schwarz */
    );
    z-index: 0;
  }