<style> body { background-image: url(/public/assets/kontakt_hintergrundbild.png); background-size: 150rem; } visitenkarte { transform: rotate(-1deg); } .vc { display: flex; margin: 5rem; } .vc .vc-card { border-radius: 0; width: 20rem; height: 13rem; font-size: 10pt; margin: 2rem; background: white !important; color: dimgrey; box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.35); font-family: system-ui, Helvetica, Arial; line-height: 1.5; --frame: 1.5rem; border-width: var(--frame) !important; border-style: solid !important; border-color: rgb(134, 160, 170) !important; position: relative; display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; } .vc .vc-card::before, .vc .vc-card::after { position: absolute; left: calc(-1 * var(--frame)); right: calc(-1 * var(--frame)); height: var(--frame); display: flex; align-items: center; justify-content: center; font-size: 9pt; font-weight: 600; letter-spacing: .02em; color: #fff; } /* oberer Rand-Text */ .vc .vc-card::before { top: calc(-1 * var(--frame)); content: attr(data-top); } /* unterer Rand-Text */ .vc .vc-card::after { bottom: calc(-1 * var(--frame)); content: attr(data-bottom); } /* Logo oben über beide Spalten */ .vc .vc-logo { grid-column: 1 / -1; justify-self: center; height: 4rem; margin: .4rem 0 0; } /* Divider unter dem Logo über beide Spalten */ .vc .vc-card > .vc-divider { grid-column: 1 / -1; } /* Linke Spalte (Text) */ .vc .vc-left { padding: 0.6rem 0.8rem; display: grid; } /* Rechte Spalte (Bild füllt Rest) */ .vc .vc-photo { padding-top: 0.5rem; width: 100%; height: 90%; object-fit: cover; } .vc a { color: inherit; text-decoration: none; font-size: inherit; } .vc a:hover { border-bottom: .2mm solid black; } .vc .vc-divider { border: 0; height: 0.5pt; background: dimgrey; margin: 0; } @media (max-width: 1000px) { .vc .vc-photo { height: 60%; } } @media print { nav, section > article, footer { display: none !important; } .vc { margin: 0; position: absolute; right: 0; top: 0; transform: scale(0.5); } .vc .vc-card { margin: 0; } } </style>