###############################
# developed by KUYI Marketing #
# for                         #
# Auto Service Team Gradzki   #
# 74196 Neuenstadt            #
# Industriestraße 45          #
###############################


@font-face {
  font-family: 'Poppins';
  src: url('/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenSans';
  src: url('/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-style: normal;
  font-display: swap;
}

    :root{
      --green-dark: #17392c;
      --green: #2f7d55;
      --green-hover: #266947;
      --green-light: #e7f3ec;

      --text-dark: #23302a;
      --text-muted: #647167;

      --border: #e3e9e5;

      --card-bg: #ffffff;

      --page-bg-1: #1c4633;
      --page-bg-2: #123324;
    }

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    html{
      min-height:100%;
    }

    body{
      font-family:'Open Sans', Arial, sans-serif;
      background:
        radial-gradient(
          circle at 50% 35%,
          rgba(72, 130, 92, 0.14),
          transparent 40%
        ),
        linear-gradient(
          160deg,
          var(--page-bg-1) 0%,
          var(--page-bg-2) 100%
        );

      color:var(--text-dark);

      min-height:100vh;

      display:flex;
      flex-direction:column;
    }

    /* -------------------------------------------------------
       MAIN
    ------------------------------------------------------- */

    main{
      flex:1;

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

      padding:60px 20px;
    }

    .card{
      background:var(--card-bg);

      width:100%;
      max-width:680px;

      padding:50px 54px 46px;

      border-radius:14px;

      box-shadow:
        0 24px 55px rgba(0,0,0,0.22);

      text-align:center;
    }

    /* -------------------------------------------------------
       STATUS
    ------------------------------------------------------- */

    .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;

      background:var(--green-light);
      color:var(--green);

      font-size:12px;
      font-weight:700;

      letter-spacing:0.06em;
      text-transform:uppercase;

      padding:7px 16px;

      border-radius:30px;

      margin-bottom:26px;
    }

    .badge .dot{
      width:8px;
      height:8px;

      border-radius:50%;

      background:var(--green);
    }

    .badge_closed {
      display:inline-flex;
      align-items:center;
      gap:8px;

      font-size:12px;
      font-weight:700;

      letter-spacing:0.06em;
      text-transform:uppercase;

      padding:7px 16px;

      border-radius:30px;

      margin-bottom:26px;

      background:#fff6db;
      color: #755b00;
    }
    .badge_closed .dot{
      width:8px;
      height:8px;

      border-radius:50%;

      background:#755b00;
    }
    /* -------------------------------------------------------
       LOGO
    ------------------------------------------------------- */

    .logo{
      width:300px;
      max-width:100%;

      height:102px;

      display:block;

      object-fit:contain;

      margin:0 auto 30px;
    }

    /* -------------------------------------------------------
       HEADLINE
    ------------------------------------------------------- */

    h1{
      font-family:'Poppins', Arial, sans-serif;

      font-size:28px;
      line-height:1.3;

      font-weight:600;

      color:var(--text-dark);

      margin-bottom:14px;
    }

    .divider{
      width:56px;
      height:3px;

      background:var(--green);

      border-radius:20px;

      margin:0 auto 22px;
    }

    .lead{
      max-width:510px;

      margin:0 auto;

      color:var(--text-muted);

      font-size:15.5px;
      line-height:1.7;
    }

    .lead strong{
      color:var(--green-dark);
      font-weight:600;
    }

    /* -------------------------------------------------------
       CALL TO ACTION
    ------------------------------------------------------- */

    .actions{
      display:flex;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;

      gap:12px;

      margin-top:28px;
    }

    .button{
      min-height:48px;

      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;

      padding:12px 20px;

      border-radius:8px;

      font-family:'Open Sans', Arial, sans-serif;

      font-size:14px;
      font-weight:600;

      text-decoration:none;

      transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    }

    .button:hover{
      transform:translateY(-1px);
    }

    .button-primary{
      background:var(--green);
      color:#ffffff;

      border:1px solid var(--green);
    }

    .button-primary:hover,
    .button-primary:focus-visible{
      background:var(--green-hover);
      border-color:var(--green-hover);
    }

    .button-secondary{
      background:#ffffff;
      color:var(--green-dark);

      border:1px solid var(--border);
    }

    .button-secondary:hover,
    .button-secondary:focus-visible{
      background:var(--green-light);
      border-color:#cbded2;
    }

    .button svg{
      width:18px;
      height:18px;

      fill:currentColor;

      flex-shrink:0;
    }

    /* -------------------------------------------------------
       SERVICES
    ------------------------------------------------------- */

    .services{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;

      gap:8px;

      margin-top:28px;
    }

    .service{
      background:#f6f8f6;

      color:#526159;

      border:1px solid #e5eae7;

      border-radius:30px;

      padding:7px 12px;

      font-size:12.5px;
      font-weight:600;
    }

    /* -------------------------------------------------------
       INFO
    ------------------------------------------------------- */

    .info{
      margin-top:28px;

      padding-top:24px;

      border-top:1px solid var(--border);

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

      gap:14px;
    }

    .info-item{
      background:#f8faf8;

      border:1px solid #e7ece9;

      border-radius:9px;

      padding:15px 16px;
    }

    .info-label{
      display:block;

      color:#88928c;

      font-size:11px;
      font-weight:700;

      letter-spacing:0.05em;
      text-transform:uppercase;

      margin-bottom:5px;
    }

    .info-value{
      color:var(--text-dark);

      font-size:13.5px;
      line-height:1.55;

      font-weight:600;
    }

    .info-value a{
      color:inherit;
      text-decoration:none;
    }

    .info-value a:hover{
      color:var(--green);
      text-decoration:underline;
    }

    /* -------------------------------------------------------
       SMALL NOTE
    ------------------------------------------------------- */

    .coming-soon{
      margin-top:24px;

      color:#89938d;

      font-size:12.5px;
      line-height:1.6;
    }

    /* -------------------------------------------------------
       FOOTER
    ------------------------------------------------------- */

    footer{
      width:100%;

      background:#ffffff;

      box-shadow:0 -2px 12px rgba(0,0,0,0.07);
    }

    .footer-inner{
      max-width:1000px;

      margin:0 auto;

      padding:15px 24px;

      display:flex;
      align-items:center;
      justify-content:space-between;

      gap:20px;
    }

    .legal-links{
      display:flex;
      gap:24px;

      font-size:13px;
    }

    .legal-links a{
      color:var(--text-muted);
      text-decoration:none;
    }

    .legal-links a:hover,
    .legal-links a:focus-visible{
      color:var(--green);
      text-decoration:underline;
    }

    .social-links{
      display:flex;
      align-items:center;

      gap:10px;
    }

    .social-links a{
      width:32px;
      height:32px;

      border-radius:50%;

      border:1px solid #d7ddd9;

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

      color:var(--text-muted);

      text-decoration:none;

      transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    }

    .social-links a:hover,
    .social-links a:focus-visible{
      background:var(--green);
      border-color:var(--green);

      color:#ffffff;

      transform:translateY(-1px);
    }

    .social-links svg{
      width:15px;
      height:15px;

      fill:currentColor;
    }

    a:focus-visible{
      outline:3px solid rgba(47,125,85,0.3);
      outline-offset:3px;
    }

    /* -------------------------------------------------------
       MOBILE
    ------------------------------------------------------- */

    @media (max-width:700px){

      main{
        align-items:flex-start;

        padding:28px 16px;
      }

      .card{
        padding:36px 24px 32px;

        border-radius:12px;
      }

      .logo{
        width:260px;
        height:auto;

        margin-bottom:25px;
      }

      h1{
        font-size:24px;
      }

      .actions{
        flex-direction:column;
      }

      .button{
        width:100%;
      }

      .info{
        grid-template-columns:1fr;
      }

      .footer-inner{
        flex-direction:column;

        padding:15px 20px 18px;
      }
    }

    @media (max-width:380px){

      .card{
        padding-left:18px;
        padding-right:18px;
      }

      h1{
        font-size:22px;
      }
    }