@font-face {
           font-family: 'BrnTG';
           src: url('./fonts/bnhrdtan.woff2') format('woff2'),
               url('./fonts/bnhrdtan.woff') format('woff'),
               url('./fonts/bnhrdtan.otf') format('opentype');
           font-weight: normal;
           font-style: normal;
       }

       /* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&display=swap'); */

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

       body {
           font-family: 'Montserrat', sans-serif;
           background-color: #ffffff;
           /* Weißer Hintergrund */
           display: flex;
           justify-content: center;
           align-items: center;
           height: 100vh;
           padding: 1rem;
           /* Abstand zur Bildschirmkante */
       }

       .vcard {
           position: relative;
           background-color: #ffffff;
           padding: 2rem;
           border-radius: 0.5rem;
           border: 2px solid #d48f23;
           /*#ebb258; /* Grüner Rand */
           text-align: center;
           max-width: 350px;
           width: 100%;
       }

       .logo {
           width: 100px;
           height: 100px;
           vertical-align: middle;
           /* margin: 0 auto 0; */
       }

       h1 {
           font-size: 1.55rem;
           font-weight: 500;
           margin-bottom: 0.5rem;
       }

       h2 {
           font-size: 1rem;
           font-weight: 300;
           color: #777;
           margin-bottom: 1.5rem;
       }

       p {
           font-size: 0.875rem;
           color: #555;
           margin-bottom: 1rem;
       }

       .vcard-header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           margin-bottom: 16px;
       }

       .company-info {
           display: flex;
           align-items: center;
       }

       .company-info a {
           text-decoration: none;
       }

       .company-logo {
           width: 40px;
           height: 40px;
           margin-right: 10px;
       }

       .company-name {
           font-family: 'BrnTG', sans-serif;
           font-weight: bolder;
           color: #ebb258;
           display: flex;
           flex-direction: column;
       }

       .company-name span.left {
           text-align: left;
       }

       .company-name span.right {
           text-align: right;
       }

       .icons {
           position: absolute;
           top: 10px;
           right: 10px;
           display: flex;
           gap: 10px;
       }

       .icon-button {
           width: 20px;
           height: 20px;
           cursor: pointer;
       }

       .company-info h1 {
           margin: 0;
           font-size: 2rem;
           white-space: nowrap;
       }

       .company-info h2 {
           margin: 0;
           font-size: 1.1rem;
           color: #666;
           text-align: center;
       }

       .company-address {
           display: flex;
           margin: 2rem 0 0 0;
       }

       .add-contact-btn {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           background-color: #d48f23;
           color: #ffffff !important;
           padding: 0.75rem 1.5rem;
           border-radius: 0.5rem;
           text-decoration: none;
           font-weight: 500;
           font-size: 0.875rem;
           transition: box-shadow 0.3s ease;
           margin-top: 1.5rem;
       }

       .add-contact-btn:hover {
           box-shadow: 0 0 10px #d48f23;
       }

       .add-contact-btn:hover .text {
           text-decoration: underline;
       }

       .add-contact-btn .icon {
           font-size: 1.25rem;
           margin-right: 0.5rem;
       }

       .add-contact-btn .text {
           display: inline;
       }

       /* Modal Styles */
       .modal {
           display: none;
           position: fixed;
           z-index: 1;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.5);
           /* Dark background */
           justify-content: center;
           align-items: center;
       }

       .modal-content {
           background-color: #fff;
           padding: 20px;
           border-radius: 12px;
           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
           max-width: 300px;
           text-align: center;
       }

       .close {
           color: #aaa;
           float: right;
           font-size: 28px;
           font-weight: bold;
           cursor: pointer;
       }

       .close:hover,
       .close:focus {
           color: #000;
           text-decoration: none;
           cursor: pointer;
       }

       .rotated-svg {
           transform: rotate(-10deg);
           width: 90%;
           height: 20px;
       }

       .button-container {
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
           flex-direction: row;
       }

       .action-button {
           margin: 1rem 0 0 0;
           /* display: flex; */
           flex-direction: column;
           width: 33%;
       }

       .action-text {
           line-height: 1.5;
           font-size: .9rem;
           color: #222222;
           margin: .3rem 0 0;
       }

       .round-button {
           position: relative;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 50px;
           height: 50px;
           background-color: #d48f23;
           border: none;
           border-radius: 50%;
           cursor: pointer;
           transition: transform 0.2s ease, box-shadow 0.2s ease;
       }

       .round-button:hover {
           transform: scale(1.1);
           box-shadow: 0 0 8px #d48f23;
       }

       .round-button svg {
           width: 24px;
           height: 24px;
           stroke: #ffffff;
           stroke-width: 2;
       }

       .badge {
           position: absolute;
           bottom: -8px;
           background-color: #d48f23;
           color: white;
           border-radius: 5px;
           height: 18px;
           padding: 0 3px 0 3px;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 12px;
           font-weight: bold;
       }

       .footer-links {
           display: flex;
           justify-content: center;
           gap: 16px;
           margin-top: 20px;
           margin-bottom: -25px;
           font-size: 14px;
       }

       .footer-links a,
       .modal-content a {
           text-decoration: none;
           color: #ebb258;
       }

       .footer-links a:hover {
           text-decoration: underline;
       }

       @media (max-width: 480px) {
           .vcard {
               padding: 1.5rem;
           }
       }