/* KCC Uniformierte v1.0.0: Original-CSS aus dem bisherigen Snippet.
   Variablen sind auf .kcc-uniformierte-wrap begrenzt, damit andere Seiten nicht betroffen sind. */

.kcc-uniformierte-wrap{
        --kcc-brand:#081C4E;

        --kcc-dark:#020712;
        --kcc-dark-soft:#050b16;

        --kcc-gold:#d6a84f;
        --kcc-gold-light:#efd48d;

        --kcc-line:rgba(8,28,78,.14);

        --kcc-shadow:
          0 14px 40px rgba(2,8,23,.08);

        --kcc-shadow2:
          0 26px 80px rgba(2,8,23,.14);
      }


      /* ======================================================
         WRAPPER
         ====================================================== */

      .kcc-uniformierte-wrap{
        max-width:1200px;

        margin:0 auto;

        padding:
          34px
          20px
          20px;
      }


      /* ======================================================
         HEADER
         NUR DIESER BEREICH WIRD DUNKEL
         ====================================================== */

      .kcc-uniformierte-head{
        position:relative;

        overflow:hidden;

        margin-bottom:24px;

        padding:
          34px
          30px;

        border:
          1px solid
          rgba(214,168,79,.18);

        border-radius:24px;

        background:
          var(--kcc-dark-soft);

        box-shadow:
          0 20px 55px
          rgba(2,7,18,.18);

        text-align:center;
      }


      /* dezenter Goldschein */

      .kcc-uniformierte-head::before{
        content:"";

        position:absolute;

        top:-240px;
        left:-220px;

        width:520px;
        height:520px;

        border-radius:50%;

        background:
          radial-gradient(
            circle,
            rgba(214,168,79,.09),
            transparent 68%
          );

        pointer-events:none;
      }


      /* Goldlinie */

      .kcc-uniformierte-head::after{
        content:"";

        position:relative;

        display:block;

        width:46px;
        height:2px;

        margin:
          20px
          auto
          0;

        background:
          linear-gradient(
            90deg,
            transparent,
            var(--kcc-gold),
            transparent
          );
      }


      .kcc-uniformierte-head h1{
        position:relative;
        z-index:2;

        margin:0;

        color:#ffffff !important;

        font-family:
          Georgia,
          "Times New Roman",
          serif;

        font-size:
          clamp(
            1.9rem,
            1.4rem + 1.2vw,
            2.7rem
          );

        font-weight:600;

        letter-spacing:.01em;

        line-height:1.15;
      }


      .kcc-uniformierte-head p{
        position:relative;
        z-index:2;

        max-width:70ch;

        margin:
          15px
          auto
          0;

        color:
          rgba(255,255,255,.67);

        font-family:
          Arial,
          Helvetica,
          sans-serif;

        font-size:1.08rem;

        line-height:1.65;
      }


      /* ======================================================
         GRID
         ====================================================== */

      .kcc-uniformierte-grid{
        display:grid;

        grid-template-columns:
          repeat(
            3,
            minmax(0,1fr)
          );

        gap:18px;
      }


      /* ======================================================
         CARD
         BLEIBT WEISS
         ====================================================== */

      .kcc-u-card{
        overflow:hidden;

        border:
          1px solid
          var(--kcc-line);

        border-radius:22px;

        background:#ffffff;

        box-shadow:
          var(--kcc-shadow);

        text-align:center;

        transition:
          transform .2s ease,
          box-shadow .2s ease;
      }


      .kcc-u-card:hover{
        transform:
          translateY(-5px);

        box-shadow:
          var(--kcc-shadow2);
      }


      /* ======================================================
         BILDBEREICH
         ====================================================== */

      .kcc-u-media{
        display:flex;

        align-items:center;
        justify-content:center;

        height:420px;

        padding:18px;

        background:
          radial-gradient(
            520px 260px
            at 50% 0%,
            rgba(8,28,78,.08),
            transparent 60%
          ),
          linear-gradient(
            180deg,
            #f8fafc,
            #f3f6fb
          );
      }


      .kcc-u-frame{
        display:flex;

        align-items:center;
        justify-content:center;

        width:100%;
        height:100%;

        padding:12px;

        border:
          1px solid
          rgba(8,28,78,.18);

        border-radius:18px;

        background:#ffffff;

        box-shadow:
          inset
          0 0 0 8px
          rgba(8,28,78,.03),

          0 10px 24px
          rgba(2,8,23,.08);
      }


      .kcc-u-frame img{
        display:block;

        width:100%;
        height:100%;

        border-radius:14px;

        background:#ffffff;

        object-fit:cover;
      }


      /* ======================================================
         TEXT
         ====================================================== */

      .kcc-u-body{
        display:flex;

        flex-direction:column;

        gap:6px;

        padding:
          14px
          14px
          18px;
      }


      .kcc-u-name{
        margin:0;

        color:
          var(--kcc-brand);

        font-size:1.35rem;

        font-weight:900;

        letter-spacing:.01em;

        line-height:1.2;
      }


      /* optionaler Font */

      .kcc-u-name.use-special{
        font-family:'special_test';

        font-size:1.4rem;

        font-weight:700;

        letter-spacing:1.1px;
      }


      /* ======================================================
         TABLET
         ====================================================== */

      @media (max-width:900px){

        .kcc-uniformierte-grid{
          grid-template-columns:
            repeat(
              2,
              minmax(0,1fr)
            );
        }

      }


      /* ======================================================
         MOBILE
         ====================================================== */

      @media (max-width:700px){

        .kcc-uniformierte-wrap{
          padding:
            22px
            14px
            10px;
        }


        .kcc-uniformierte-grid{
          grid-template-columns:1fr;

          gap:14px;
        }


        .kcc-uniformierte-head{
          padding:
            27px
            20px;

          border-radius:20px;

          margin-bottom:20px;
        }


        .kcc-uniformierte-head h1{
          font-size:
            1.7rem !important;

          line-height:1.15;
        }


        .kcc-uniformierte-head p{
          margin-top:12px;

          font-size:.95rem;

          line-height:1.55;
        }


        .kcc-uniformierte-head::after{
          margin-top:17px;
        }


        .kcc-u-media{
          height:420px;

          padding:14px;
        }


        .kcc-u-frame{
          padding:10px;

          border-radius:16px;
        }

      }


      /* ======================================================
         REDUCED MOTION
         ====================================================== */

      @media (prefers-reduced-motion:reduce){

        .kcc-u-card{
          transition:none;
        }


        .kcc-u-card:hover{
          transform:none;
        }

      }