/*
      Modul: Sandra Grün Dental Card Menu
      Prefix: sgdcm
      Root-ID: #sgdcm-dental-card-menu

      Alle Styles sind absichtlich an die Root-ID gebunden,
      damit keine Konflikte mit anderen Menüs, Cards oder Buttons entstehen.
    */

    #sgdcm-dental-card-menu{
      /* Layout */
      --sgdcm-module-width:100%;
      --sgdcm-module-height:600px;
      --sgdcm-main-card-width:440px;
      --sgdcm-sub-card-width:350px;
      --sgdcm-title-height:50px;
      --sgdcm-sub-title-height:44px;
      --sgdcm-main-grid-gap:24px;
      --sgdcm-sub-grid-gap:20px;

      /* Farben */
      --sgdcm-color-title:#455805;
      --sgdcm-color-title-hover:#7D9F0D;
      --sgdcm-color-bg:transparent;
      --sgdcm-color-card:rgba(255,255,255,.64);
      --sgdcm-color-card-hover:rgba(255,255,255,.9);
      --sgdcm-color-border:rgba(255,255,255,.72);
      --sgdcm-color-green:#74863f;
      --sgdcm-color-green-soft:#cbd9a6;
      --sgdcm-color-fallback:#dfe8c4;

      /* Form */
      --sgdcm-card-radius:22px;
      --sgdcm-image-radius:18px;
      --sgdcm-card-image-inset:8px;

      /* Schatten */
      --sgdcm-card-shadow:0 7px 16px rgba(36,42,25,.16);
      --sgdcm-card-shadow-hover:0 10px 22px rgba(36,42,25,.20);
      --sgdcm-card-shadow-pressed:0 3px 7px rgba(36,42,25,.22), inset 0 3px 7px rgba(36,42,25,.18);

      /* Animation */
      --sgdcm-pop-in-duration:.72s;
      --sgdcm-pop-out-duration:.42s;
      --sgdcm-pop-delay-step:.06s;
      --sgdcm-pop-in-scale-start:.86;
      --sgdcm-pop-in-scale-overshoot:1.015;
      --sgdcm-pop-out-scale-end:.82;

      /* Druckeffekt */
      --sgdcm-press-distance:8px;
      --sgdcm-press-scale:.975;
      --sgdcm-hover-distance:-7px;
      --sgdcm-hover-scale:1.02;

      /* Bild-Effekt */
      --sgdcm-image-saturate:100%;
      --sgdcm-image-saturate-hover:125%;
      --sgdcm-image-saturate-active:150%;
      --sgdcm-image-brightness-active:150%;  

      position:relative;
      width:var(--sgdcm-module-width);
      max-width:none;
      min-min-height:var(--sgdcm-module-height);
      height:auto;
      height:auto;
      overflow:visible;
      background:var(--sgdcm-color-bg);
      border:0;
      box-shadow:none;
      isolation:isolate;
      font-family:Raleway, "Open Sans", Arial, sans-serif;
    }

    #sgdcm-dental-card-menu,
    #sgdcm-dental-card-menu *{
      box-sizing:border-box;
    }

    #sgdcm-dental-card-menu button{
      font:inherit;
    }

    #sgdcm-dental-card-menu .sgdcm-view{
      position:relative;
      display:none;
      width:100%;
      padding:0;
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      z-index:2;
    }

    #sgdcm-dental-card-menu .sgdcm-view.is-active{
      display:block;
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    #sgdcm-dental-card-menu .sgdcm-main-grid{
      min-height:var(--sgdcm-module-height);
      height:auto;
      display:grid;
      grid-template-columns:repeat(3, var(--sgdcm-main-card-width));
      gap:var(--sgdcm-main-grid-gap);
      align-content:center;
      justify-content:center;
      grid-auto-rows:auto;
      padding-left:0;
      padding-right:0;
    }

    #sgdcm-dental-card-menu .sgdcm-sub-grid{
      min-height:var(--sgdcm-module-height);
      height:auto;
      display:grid;
      grid-template-columns:repeat(4, var(--sgdcm-sub-card-width));
      gap:var(--sgdcm-sub-grid-gap);
      align-content:start;
      justify-content:center;
      grid-auto-rows:auto;
      padding:0 0 24px;
    }

    #sgdcm-dental-card-menu .sgdcm-card{
      width:var(--sgdcm-main-card-width);
      aspect-ratio:4 / 3;
      border:1px solid var(--sgdcm-color-border);
      padding:0;
      text-align:left;
      color:var(--sgdcm-color-title);
      background:var(--sgdcm-color-card);
      border-radius:var(--sgdcm-card-radius);
      box-shadow:var(--sgdcm-card-shadow);
      overflow:visible;
      cursor:pointer;
      display:grid;
      grid-template-rows:var(--sgdcm-title-height) 1fr;
      text-decoration:none;
      opacity:0;
      transform:scale(var(--sgdcm-pop-in-scale-start));
      transition:
        transform .18s cubic-bezier(.2,.85,.2,1),
        box-shadow .18s ease,
        background .18s ease;
      will-change:opacity, transform;
      -webkit-tap-highlight-color:transparent;
      user-select:none;
      touch-action:manipulation;
    }

    #sgdcm-dental-card-menu .sgdcm-card.sgdcm-sub-card{
      width:var(--sgdcm-sub-card-width);
      grid-template-rows:var(--sgdcm-sub-title-height) 1fr;
    }

    #sgdcm-dental-card-menu .sgdcm-view.is-active .sgdcm-card{
      animation:sgdcmPopIn var(--sgdcm-pop-in-duration) cubic-bezier(.2,.85,.2,1) both;
    }

    #sgdcm-dental-card-menu .sgdcm-view.is-leaving .sgdcm-card{
      animation:sgdcmPopOut var(--sgdcm-pop-out-duration) cubic-bezier(.4,0,.2,1) both;
      pointer-events:none;
    }

    #sgdcm-dental-card-menu .sgdcm-view.is-active .sgdcm-card:nth-child(1){animation-delay:.08s}
    #sgdcm-dental-card-menu .sgdcm-view.is-active .sgdcm-card:nth-child(2){animation-delay:.18s}
    #sgdcm-dental-card-menu .sgdcm-view.is-active .sgdcm-card:nth-child(3){animation-delay:.28s}
    #sgdcm-dental-card-menu .sgdcm-view.is-active .sgdcm-card:nth-child(4){animation-delay:.38s}
    #sgdcm-dental-card-menu .sgdcm-view.is-active .sgdcm-card:nth-child(5){animation-delay:.48s}
    #sgdcm-dental-card-menu .sgdcm-view.is-active .sgdcm-card:nth-child(6){animation-delay:.58s}
    #sgdcm-dental-card-menu .sgdcm-view.is-active .sgdcm-card:nth-child(7){animation-delay:.68s}
    #sgdcm-dental-card-menu .sgdcm-view.is-active .sgdcm-card:nth-child(8){animation-delay:.78s}

    @keyframes sgdcmPopIn{
      0%{
        opacity:0;
        transform:scale(var(--sgdcm-pop-in-scale-start));
      }
      65%{
        opacity:1;
        transform:scale(var(--sgdcm-pop-in-scale-overshoot));
      }
      100%{
        opacity:1;
        transform:scale(1);
      }
    }

    @keyframes sgdcmPopOut{
      0%{
        opacity:1;
        transform:scale(1);
      }
      100%{
        opacity:0;
        transform:scale(var(--sgdcm-pop-out-scale-end));
      }
    }

    #sgdcm-dental-card-menu .sgdcm-card:hover{
      background:var(--sgdcm-color-card-hover);
      box-shadow:var(--sgdcm-card-shadow-hover);
      transform:translateY(var(--sgdcm-hover-distance)) scale(var(--sgdcm-hover-scale));
      z-index:10;
    }

    #sgdcm-dental-card-menu .sgdcm-card.is-pressed,
    #sgdcm-dental-card-menu .sgdcm-card.is-pressed:hover{
      background:var(--sgdcm-color-card-hover);
      box-shadow:var(--sgdcm-card-shadow-pressed);
      transform:translateY(var(--sgdcm-press-distance)) scale(var(--sgdcm-press-scale));
    }

    #sgdcm-dental-card-menu .sgdcm-card-title{
      padding:0 12px;
      display:flex;
      align-items:center;
      justify-content:center;
      min-width:0;
      text-align:center;
      color:var(--sgdcm-color-title);
    }

    #sgdcm-dental-card-menu .sgdcm-card-title strong{
      display:block;
      width:100%;
      font-size:19px;
      line-height:1;
      font-weight:700;
      letter-spacing:-.02em;
      color:var(--sgdcm-color-title);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      text-align:center;
    }

    #sgdcm-dental-card-menu .sgdcm-sub-card .sgdcm-card-title{
      padding:0 10px;
    }

    #sgdcm-dental-card-menu .sgdcm-sub-card .sgdcm-card-title strong{
      font-size:17px;
      letter-spacing:-.015em;
    }

    #sgdcm-dental-card-menu .sgdcm-card:hover .sgdcm-card-title strong,
    #sgdcm-dental-card-menu .sgdcm-card.is-pressed .sgdcm-card-title strong{
      color:var(--sgdcm-color-title-hover);
    }

    #sgdcm-dental-card-menu .sgdcm-card-visual{
      margin:0 var(--sgdcm-card-image-inset) var(--sgdcm-card-image-inset);
      border-radius:var(--sgdcm-image-radius);
      overflow:hidden;
      background:#e8ebdb;
      min-height:0;
      height:calc(100% - var(--sgdcm-card-image-inset));
      box-shadow:inset 0 0 0 1px rgba(63,71,49,.06);
    }

    #sgdcm-dental-card-menu .sgdcm-card-visual img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      object-position:center;
      filter:saturate(var(--sgdcm-image-saturate));
      transition:
        transform .45s cubic-bezier(.2,.85,.2,1),
        filter .28s ease;
      pointer-events:none;
    }

    #sgdcm-dental-card-menu .sgdcm-card:hover .sgdcm-card-visual img{
      transform:scale(1.045);
      filter:saturate(var(--sgdcm-image-saturate-hover));
    }

#sgdcm-dental-card-menu .sgdcm-card.is-pressed .sgdcm-card-visual img{
  transform:scale(1.015);
  filter:saturate(var(--sgdcm-image-saturate-active)) brightness(var(--sgdcm-image-brightness-active));
}

    #sgdcm-dental-card-menu .sgdcm-card-visual.is-missing{
      display:grid;
      place-items:center;
      background:
        radial-gradient(circle at 80% 18%, rgba(203,217,166,.72), transparent 34%),
        linear-gradient(135deg, #f8faf2, var(--sgdcm-color-fallback));
    }

    #sgdcm-dental-card-menu .sgdcm-card-visual.is-missing::after{
      content:attr(data-fallback);
      padding:18px;
      color:var(--sgdcm-color-green);
      font-size:14px;
      font-weight:700;
      text-align:center;
    }

    #sgdcm-dental-card-menu .sgdcm-back-card{
      color:var(--sgdcm-color-green);
      background:rgba(255,255,255,.72);
    }

    #sgdcm-dental-card-menu .sgdcm-back-card .sgdcm-card-title strong{
      color:var(--sgdcm-color-green);
    }

    @media (max-width:1120px){
      #sgdcm-dental-card-menu{
        --sgdcm-main-card-width:292px;
        --sgdcm-sub-card-width:254px;
        --sgdcm-main-grid-gap:18px;
        --sgdcm-sub-grid-gap:18px;
      }

      #sgdcm-dental-card-menu .sgdcm-card-title strong{
        font-size:18px;
      }

      #sgdcm-dental-card-menu .sgdcm-sub-card .sgdcm-card-title strong{
        font-size:16px;
      }
    }

    @media (max-width:980px){
      #sgdcm-dental-card-menu .sgdcm-main-grid{
        grid-template-columns:repeat(2, var(--sgdcm-main-card-width));
      }

      #sgdcm-dental-card-menu .sgdcm-sub-grid{
        grid-template-columns:repeat(3, var(--sgdcm-sub-card-width));
      }
    }

    /*
      Mobile-Regeln:
      - Cards bleiben immer 4:3.
      - Keine festen Höhen.
      - Keine internen Scrollbalken.
      - Große Handys: 2 Spalten.
      - Kleine Handys: 1 Spalte.
    */

    @media (max-width:900px){
      #sgdcm-dental-card-menu{
        --sgdcm-module-width:100%;
        --sgdcm-module-height:auto;

        --sgdcm-main-card-width:210px;
        --sgdcm-sub-card-width:195px;

        --sgdcm-title-height:34px;
        --sgdcm-sub-title-height:32px;
        --sgdcm-main-grid-gap:14px;
        --sgdcm-sub-grid-gap:14px;

        --sgdcm-card-radius:16px;
        --sgdcm-image-radius:12px;
        --sgdcm-card-image-inset:5px;

        --sgdcm-hover-distance:-3px;
        --sgdcm-hover-scale:1.012;
        --sgdcm-press-distance:4px;
        --sgdcm-press-scale:.982;

        --sgdcm-card-shadow:0 4px 10px rgba(36,42,25,.14);
        --sgdcm-card-shadow-hover:0 6px 14px rgba(36,42,25,.17);
        --sgdcm-card-shadow-pressed:0 2px 5px rgba(36,42,25,.20), inset 0 2px 5px rgba(36,42,25,.15);

        min-height:0;
        height:auto;
        overflow:visible;
      }

      #sgdcm-dental-card-menu .sgdcm-main-grid{
        min-height:0;
        height:auto;
        grid-template-columns:repeat(2, var(--sgdcm-main-card-width));
        grid-auto-rows:auto;
        gap:var(--sgdcm-main-grid-gap);
        align-content:start;
        justify-content:center;
        overflow:visible;
        padding:0 10px 22px;
      }

      #sgdcm-dental-card-menu .sgdcm-sub-grid{
        min-height:0;
        height:auto;
        grid-template-columns:repeat(2, var(--sgdcm-sub-card-width));
        grid-auto-rows:auto;
        gap:var(--sgdcm-sub-grid-gap);
        align-content:start;
        justify-content:center;
        overflow:visible;
        padding:0 10px 22px;
      }

      #sgdcm-dental-card-menu .sgdcm-card,
      #sgdcm-dental-card-menu .sgdcm-card.sgdcm-sub-card{
        width:100%;
        min-width:0;
        height:auto;
        aspect-ratio:4 / 3;
      }

      #sgdcm-dental-card-menu .sgdcm-card-title strong{
        font-size:14px;
        letter-spacing:-.01em;
      }

      #sgdcm-dental-card-menu .sgdcm-sub-card .sgdcm-card-title strong{
        font-size:13px;
      }
    }

    @media (max-width:680px){
      #sgdcm-dental-card-menu{
        --sgdcm-main-card-width:calc((100vw - 34px) / 2);
        --sgdcm-sub-card-width:calc((100vw - 34px) / 2);

        --sgdcm-title-height:31px;
        --sgdcm-sub-title-height:30px;
        --sgdcm-main-grid-gap:10px;
        --sgdcm-sub-grid-gap:10px;

        --sgdcm-card-radius:14px;
        --sgdcm-image-radius:10px;
        --sgdcm-card-image-inset:4px;
      }

      #sgdcm-dental-card-menu .sgdcm-main-grid,
      #sgdcm-dental-card-menu .sgdcm-sub-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        padding:0 12px 20px;
      }

      #sgdcm-dental-card-menu .sgdcm-card-title{
        padding:0 5px;
      }

      #sgdcm-dental-card-menu .sgdcm-card-title strong{
        font-size:12.5px;
      }

      #sgdcm-dental-card-menu .sgdcm-sub-card .sgdcm-card-title strong{
        font-size:11.5px;
      }
    }

    @media (max-width:430px){
      #sgdcm-dental-card-menu{
        --sgdcm-main-card-width:min(238px, calc(100vw - 28px));
        --sgdcm-sub-card-width:min(238px, calc(100vw - 28px));

        --sgdcm-title-height:32px;
        --sgdcm-sub-title-height:31px;
        --sgdcm-main-grid-gap:12px;
        --sgdcm-sub-grid-gap:12px;

        --sgdcm-card-radius:14px;
        --sgdcm-image-radius:10px;
        --sgdcm-card-image-inset:4px;
      }

      #sgdcm-dental-card-menu .sgdcm-main-grid{
        grid-template-columns:var(--sgdcm-main-card-width);
        justify-content:center;
        align-content:start;
        padding:0 0 22px;
      }

      #sgdcm-dental-card-menu .sgdcm-sub-grid{
        grid-template-columns:var(--sgdcm-sub-card-width);
        justify-content:center;
        align-content:start;
        padding:0 0 22px;
      }

      #sgdcm-dental-card-menu .sgdcm-card-title strong{
        font-size:13px;
      }

      #sgdcm-dental-card-menu .sgdcm-sub-card .sgdcm-card-title strong{
        font-size:12px;
      }
    }

    @media (max-width:350px){
      #sgdcm-dental-card-menu{
        --sgdcm-main-card-width:min(215px, calc(100vw - 24px));
        --sgdcm-sub-card-width:min(215px, calc(100vw - 24px));
        --sgdcm-main-grid-gap:10px;
        --sgdcm-sub-grid-gap:10px;
      }

      #sgdcm-dental-card-menu .sgdcm-card-title strong{
        font-size:12px;
      }

      #sgdcm-dental-card-menu .sgdcm-sub-card .sgdcm-card-title strong{
        font-size:11px;
      }
    }

    @media (orientation:landscape) and (max-height:520px){
      #sgdcm-dental-card-menu{
        --sgdcm-main-card-width:min(28vw, 190px);
        --sgdcm-sub-card-width:min(22vw, 170px);

        --sgdcm-title-height:28px;
        --sgdcm-sub-title-height:27px;
        --sgdcm-main-grid-gap:9px;
        --sgdcm-sub-grid-gap:9px;
      }

      #sgdcm-dental-card-menu .sgdcm-main-grid{
        grid-template-columns:repeat(3, var(--sgdcm-main-card-width));
        grid-auto-rows:auto;
        padding:0 8px 14px;
      }

      #sgdcm-dental-card-menu .sgdcm-sub-grid{
        grid-template-columns:repeat(4, var(--sgdcm-sub-card-width));
        grid-auto-rows:auto;
        padding:0 8px 14px;
      }

      #sgdcm-dental-card-menu .sgdcm-card-title strong{
        font-size:11px;
      }

      #sgdcm-dental-card-menu .sgdcm-sub-card .sgdcm-card-title strong{
        font-size:10.5px;
      }
    }

    /* no internal mobile scroller guard */
    @media (max-width:900px){
      #sgdcm-dental-card-menu,
      #sgdcm-dental-card-menu .sgdcm-view,
      #sgdcm-dental-card-menu .sgdcm-main-grid,
      #sgdcm-dental-card-menu .sgdcm-sub-grid{
        height:auto;
        min-height:0;
        overflow:visible;
      }

      #sgdcm-dental-card-menu .sgdcm-card,
      #sgdcm-dental-card-menu .sgdcm-sub-card{
        aspect-ratio:4 / 3;
      }
    }

    @media (prefers-reduced-motion:reduce){
      #sgdcm-dental-card-menu .sgdcm-card,
      #sgdcm-dental-card-menu .sgdcm-view.is-active .sgdcm-card,
      #sgdcm-dental-card-menu .sgdcm-view.is-leaving .sgdcm-card{
        animation:none!important;
        transition:none!important;
        opacity:1;
        transform:none;
      }
    }


/* sgdcm static-html hardening */
#sgdcm-dental-card-menu{
  width:100%;
  height:auto;
  overflow:visible;
}

#sgdcm-dental-card-menu .sgdcm-main-grid,
#sgdcm-dental-card-menu .sgdcm-sub-grid{
  height:auto;
  overflow:visible;
}

#sgdcm-dental-card-menu .sgdcm-card,
#sgdcm-dental-card-menu .sgdcm-card.sgdcm-sub-card{
  aspect-ratio:4 / 3;
}