:root {
--kgv-primary: #5F8D4E;
--kgv-primary-dark: #234236;
--kgv-primary-light: #7AA96B;
--kgv-background: #F7F3EA;
--kgv-surface: #FFFFFF;
--kgv-accent-warm: #DDB892;
--kgv-accent-soft: #E8DCC6;
--kgv-border: #E8E0D4;
--kgv-success-bg: #E8F5EA;
--kgv-text: #3E3E3E;
--kgv-text-light: #777777;
}
.kgv-gaerten-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
width: 100%;
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
.kgv-gaerten-columns-1 {
grid-template-columns: minmax(0, 1fr);
}
.kgv-gaerten-columns-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kgv-garten-card {
overflow: hidden;
border: 1px solid var(--kgv-border);
border-radius: 20px;
background: var(--kgv-surface);
color: var(--kgv-text);
box-shadow: 0 16px 36px rgba(35, 66, 54, 0.08);
}
.kgv-garten-images {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
height: 180px;
background: var(--kgv-accent-soft);
}
.kgv-garten-image {
position: relative;
display: block;
width: 100%;
height: 180px;
padding: 0;
overflow: hidden;
border: 0;
border-right: 1px solid rgba(255, 255, 255, 0.65);
background: transparent;
cursor: pointer;
}
.kgv-garten-image:last-child {
border-right: 0;
}
.kgv-garten-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 180ms ease;
}
.kgv-garten-image:hover img,
.kgv-garten-image:focus-visible img {
transform: scale(1.04);
}
.kgv-garten-image-more {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(35, 66, 54, 0.58);
color: #fff;
font-size: 16px;
font-weight: 700;
}
.kgv-garten-content {
padding: 26px;
}
.kgv-garten-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}
.kgv-garten-status {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 13px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0;
}
.kgv-garten-status-verfuegbar {
background: var(--kgv-success-bg);
color: var(--kgv-primary-dark);
}
.kgv-garten-status-reserviert {
background: var(--kgv-accent-soft);
color: #6f4c24;
}
.kgv-garten-status-vergeben {
background: #eeeeee;
color: #555555;
}
.kgv-garten-parzelle {
color: var(--kgv-text-light);
font-size: 14px;
font-weight: 700;
}
.kgv-garten-title {
margin: 0 0 12px;
color: var(--kgv-primary-dark);
font-size: 21px;
line-height: 1.22;
letter-spacing: 0;
}
.kgv-garten-area {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
color: var(--kgv-primary-dark);
font-size: 15px;
font-weight: 700;
}
.kgv-garten-description {
color: var(--kgv-text);
font-size: 15px;
line-height: 1.65;
}
.kgv-garten-description > :first-child {
margin-top: 0;
}
.kgv-garten-description > :last-child {
margin-bottom: 0;
}
.kgv-garten-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 22px;
padding: 12px 22px;
border-radius: 999px;
background: var(--kgv-primary);
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background-color 160ms ease, transform 160ms ease;
}
.kgv-garten-button:hover,
.kgv-garten-button:focus {
background: var(--kgv-primary-dark);
color: #fff;
text-decoration: none;
transform: translateY(-1px);
}
.kgv-gaerten-empty {
padding: 24px 28px;
border: 1px solid var(--kgv-border);
border-radius: 20px;
background: var(--kgv-background);
color: var(--kgv-primary-dark);
font-weight: 700;
}
.kgv-lightbox-open {
overflow: hidden;
}
.kgv-lightbox {
position: fixed;
z-index: 99999;
inset: 0;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
}
.kgv-lightbox.is-open {
display: flex;
}
.kgv-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 24, 20, 0.82);
}
.kgv-lightbox-dialog {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
max-width: 90vw;
max-height: 80vh;
}
.kgv-lightbox-image {
display: block;
max-width: 90vw;
max-height: 80vh;
border-radius: 8px;
object-fit: contain;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
.kgv-lightbox-close,
.kgv-lightbox-nav {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: var(--kgv-primary-dark);
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.kgv-lightbox-close {
top: -54px;
right: 0;
}
.kgv-lightbox-prev {
left: -58px;
}
.kgv-lightbox-next {
right: -58px;
}
.kgv-lightbox-close:hover,
.kgv-lightbox-nav:hover,
.kgv-lightbox-close:focus,
.kgv-lightbox-nav:focus {
background: var(--kgv-primary);
color: #fff;
}
.kgv-lightbox-counter {
position: absolute;
right: 0;
bottom: -42px;
padding: 5px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: var(--kgv-primary-dark);
font-size: 14px;
font-weight: 700;
}
@media (max-width: 900px) {
.kgv-gaerten-grid,
.kgv-gaerten-columns-3 {
grid-template-columns: minmax(0, 1fr);
}
.kgv-lightbox-prev {
left: 10px;
}
.kgv-lightbox-next {
right: 10px;
}
}
@media (max-width: 560px) {
.kgv-gaerten-grid {
gap: 22px;
}
.kgv-garten-images,
.kgv-garten-image {
height: 150px;
}
.kgv-garten-content {
padding: 22px;
}
.kgv-garten-meta-row {
align-items: flex-start;
flex-direction: column;
gap: 10px;
}
.kgv-lightbox {
padding: 16px;
}
.kgv-lightbox-close {
top: 10px;
right: 10px;
}
}