.radobau-about { background:var(--color-light-1); color:var(--color-text-dark); }
.radobau-about h2 { margin-bottom:1.5rem; }
.radobau-about p { color:var(--color-text-dark); opacity:.85; }

h3,
.radobau-eyebrow { font-family:"Trakya Sans", "Funnel Sans", system-ui, sans-serif; font-size:.8rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--color-brand); margin-bottom:1rem; opacity:1 !important; }

.radobau-cta-link { display:inline-flex; align-items:center; gap:1rem; text-decoration:none; margin-top:1rem; }
.radobau-cta-link__icon { display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; border-radius:50%; background:var(--color-brand); flex:none; transition:background .2s ease;
	& .radobau-cta-link__chevron { display:block; width:9px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
}
.radobau-cta-link:hover .radobau-cta-link__icon { background:var(--color-text-dark); }
.radobau-cta-link__label { font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--color-text-dark); }

.radobau-about-media { position:relative;
	& .radobau-about-media__main { margin:0; }
	& .radobau-about-media__main img { width:100%; height:420px; object-fit:cover; border-radius:16px; display:block; }
	& .radobau-about-media__accent { margin:0; position:absolute; right:-1.5rem; bottom:-2rem; width:45%; max-width:260px; z-index:2; box-shadow:0 20px 40px rgba(0,0,0,.18); border-radius:16px; overflow:hidden; }
	& .radobau-about-media__accent img { width:100%; height:auto; display:block; border-radius:16px; }
}

@media (max-width:768px) {

	.radobau-about-media { margin-bottom:3rem; }
	.radobau-about-media__accent { right:0; bottom:-1.5rem; width:55%; }

}

.radobau-before-after { position:relative; width:100%; overflow:hidden; border-radius:16px; aspect-ratio:16/10; user-select:none; touch-action:pan-y;
	& .radobau-before-after__image { position:absolute; inset:0; margin:0; }
	& .radobau-before-after__image img { width:100%; height:100%; object-fit:cover; display:block; }
	& .radobau-before-after__image--before { clip-path:inset(0 calc(100% - var(--baf-position, 50%)) 0 0); }
	& .radobau-before-after__label { position:absolute; bottom:1rem; padding:.4rem .9rem; font-size:.75rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.55); border-radius:999px; pointer-events:none; }
	& .radobau-before-after__label--before { left:1rem; }
	& .radobau-before-after__label--after { right:1rem; }
	& .radobau-before-after__divider { position:absolute; top:0; bottom:0; left:var(--baf-position, 50%); width:2px; background:#fff; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 6px rgba(0,0,0,.4); }
	& .radobau-before-after__range { position:absolute; top:50%; left:0; width:100%; height:3rem; margin:0; transform:translateY(-50%); appearance:none; -webkit-appearance:none; background:transparent; cursor:ew-resize;
		&::-webkit-slider-runnable-track { appearance:none; -webkit-appearance:none; height:100%; background:transparent; }
		&::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:3rem; height:3rem; margin-top:0; border-radius:50%; background:var(--color-brand); border:3px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.3); cursor:ew-resize; }
		&::-moz-range-track { height:100%; background:transparent; border:none; }
		&::-moz-range-thumb { width:3rem; height:3rem; border-radius:50%; background:var(--color-brand); border:3px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.3); cursor:ew-resize; }
	}
}

@media (max-width:768px) {

	.radobau-before-after__label { font-size:.7rem; padding:.3rem .7rem; }
	.radobau-before-after__range { height:2.5rem; }
	.radobau-before-after__range::-webkit-slider-thumb { width:2.5rem; height:2.5rem; }
	.radobau-before-after__range::-moz-range-thumb { width:2.5rem; height:2.5rem; }

}

.radobau-youtube { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:16px; background:#000;
	& .radobau-youtube__thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
	& .radobau-youtube__iframe { position:absolute; inset:0; width:100%; height:100%; border:none; display:block; }
}

.radobau-youtube__consent { position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; text-align:center; padding:1.5rem; border:none; cursor:pointer; color:#fff; background:rgba(0,0,0,.55); transition:background .2s ease;
	&:hover { background:rgba(0,0,0,.7); }
	& .radobau-youtube__play { display:flex; align-items:center; justify-content:center; width:4rem; height:4rem; border-radius:50%; background:var(--color-brand); flex:none;
		&::after { content:""; margin-left:.2rem; border-style:solid; border-width:.7rem 0 .7rem 1.1rem; border-color:transparent transparent transparent #fff; }
	}
	& .radobau-youtube__consent-text { font-size:.95rem; font-weight:700; max-width:420px;
		& small { display:block; margin-top:.4rem; font-size:.75rem; font-weight:400; opacity:.85; }
	}
}

.radobau-timeline { display:flex; flex-direction:column; gap:2.5rem;
	& .radobau-timeline__item { position:relative; display:flex; gap:1.5rem;
		&:not(:last-child)::before { content:""; position:absolute; top:3rem; bottom:-2.5rem; left:1.5rem; margin-left:-1px; width:2px; background:currentColor; opacity:.25; }
	}
	& .radobau-timeline__marker { position:relative; flex:none; display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; border-radius:50%; background:var(--color-brand); z-index:1; }
	& .radobau-timeline__number { font-family:"Trakya Sans", "Funnel Sans", system-ui, sans-serif; font-size:1.1rem; font-weight:900; color:#fff; }
	& .radobau-timeline__content { padding-top:.5rem; }
	& .radobau-timeline__title { margin-bottom:.5rem; font-size:1.2rem; margin-top:0;	}
	& .radobau-timeline__text { opacity:.85; line-height:1.6; margin-bottom:0; }
}

@media (max-width:768px) {

	.radobau-timeline { gap:2rem; }
	.radobau-timeline__marker { width:2.5rem; height:2.5rem; }
	.radobau-timeline__number { font-size:1rem; }
	.radobau-timeline__item:not(:last-child)::before { top:2.5rem; bottom:-2rem; left:1.25rem; }

}

.radobau-faq { display:flex; flex-direction:column;
	& .radobau-faq__item { border-bottom:1px solid color-mix(in srgb, currentColor 20%, transparent); padding:1.25rem 0;
		&[open] .radobau-faq__icon { transform:rotate(45deg); }
	}
	& .radobau-faq__question { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; cursor:pointer; list-style:none; font-family:"Trakya Sans", "Funnel Sans", system-ui, sans-serif; font-weight:900; font-size:1.05rem;
		&::-webkit-details-marker { display:none; }
	}
	& .radobau-faq__icon { position:relative; flex:none; width:1.1rem; height:1.1rem; transition:transform .2s ease;
		&::before, &::after { content:""; position:absolute; top:50%; left:50%; background:var(--color-brand); transform:translate(-50%, -50%); }
		&::before { width:100%; height:2px; }
		&::after { width:2px; height:100%; }
	}
	& .radobau-faq__answer { padding-top:1rem; opacity:.85; line-height:1.6; }
}

.radobau-referenzen__intro { margin-bottom:2rem;
	& h2 { margin-bottom:1rem; }
	& p { opacity:.85; line-height:1.6; margin-bottom:0; }
}

.radobau-referenzen__grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:2rem; }

.radobau-referenzen__item { color:var(--color-text-dark); padding:1.5rem; border-radius:16px;
	& .radobau-referenzen__item-media { margin-bottom:1rem; }
	& .radobau-referenzen__item-media img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:16px; display:block; }
	& .radobau-referenzen__item-title { margin:0 0 .25rem; font-size:1.1rem; }
	& .radobau-referenzen__item-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 .75rem; }
	& .radobau-referenzen__item-text { opacity:.85; line-height:1.6; }
}

@media (max-width:768px) {

	.radobau-referenzen__grid { grid-template-columns:1fr; }

}

.radobau-referenzen-row { display:flex; align-items:center; gap:3rem;
	& .radobau-referenzen-row__media { flex:0 0 45%; }
	& .radobau-referenzen-row__media img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:16px; display:block; }
	& .radobau-referenzen-row__content { flex:1; min-width:0; }
	& .radobau-referenzen-row__title { margin-bottom:1rem; }
	& .radobau-referenzen-row__text { opacity:.85; line-height:1.6; margin-bottom:1.5rem; }
	& .radobau-referenzen-row__tags { display:flex; flex-wrap:wrap; gap:.5rem; }
}

.radobau-referenzen-tag { display:inline-block; padding:.4rem .9rem; border-radius:999px; background:#d32f2f; color:#fff !important; font-size:.75rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; transition:background .2s ease; }

a.radobau-referenzen-tag:hover { background:var(--color-text-dark); }

@media (max-width:768px) {

	.radobau-referenzen-row { flex-direction:column; gap:1.5rem; }
	.radobau-referenzen-row__media { flex:1 1 auto; width:100%; }

}

.radobau-referenzen-section { color:var(--color-text-dark); }
.radobau-referenzen-section--a { background:var(--color-light-1); }
.radobau-referenzen-section--b { background:var(--color-light-2); }

.radobau-mitarbeiter { display:flex; flex-direction:row; align-items:flex-start; gap:1.5rem;
	& .radobau-mitarbeiter__photo { flex:0 0 30%; width:30%; margin:0; position:relative; border-radius:16px; overflow:hidden; aspect-ratio:1/1; }
	& .radobau-mitarbeiter__photo-link { display:block; position:relative; width:100%; height:100%; }
	& .radobau-mitarbeiter__photo-link img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
	& .radobau-mitarbeiter__zoom { position:absolute; top:50%; left:50%; width:3rem; height:3rem; border-radius:50%; background:rgba(0,0,0,.55); transform:translate(-50%, -50%) scale(.6); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
		&::before, &::after { content:""; position:absolute; top:50%; left:50%; background:#fff; transform:translate(-50%, -50%); }
		&::before { width:1.1rem; height:2px; }
		&::after { width:2px; height:1.1rem; }
	}
	& .radobau-mitarbeiter__photo-link:hover img { transform:scale(1.05); }
	& .radobau-mitarbeiter__photo-link:hover .radobau-mitarbeiter__zoom,
	& .radobau-mitarbeiter__photo-link:focus-visible .radobau-mitarbeiter__zoom { opacity:1; transform:translate(-50%, -50%) scale(1); }
	& .radobau-mitarbeiter__info { flex:1 1 auto; min-width:0; }
	& .radobau-mitarbeiter__name { margin-bottom:.35rem; margin-top:0; }
	& .radobau-mitarbeiter__position { font-size:.85rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; opacity:.8; margin-bottom:.5rem; }
	& .radobau-mitarbeiter__taetigkeit { opacity:.85; line-height:1.6; margin-bottom:0; }
	& .radobau-mitarbeiter__text { opacity:.85; line-height:1.6; margin-top:.75rem; }
}

@media (max-width:600px) {

	.radobau-mitarbeiter { flex-direction:column; }
	.radobau-mitarbeiter__photo { width:130px; }

}

.radobau-lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
	&.is-open { display:flex; }
	& .radobau-lightbox__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.9); }
	& .radobau-lightbox__stage { position:relative; z-index:1; max-width:min(90vw, 900px); max-height:85vh; display:flex; flex-direction:column; align-items:center; gap:1rem; }
	& .radobau-lightbox__image { max-width:100%; max-height:75vh; width:auto; height:auto; display:block; border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
	& .radobau-lightbox__caption { width:100%; color:#fff; font-weight:700; text-align:center; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
	& .radobau-lightbox__close,
	& .radobau-lightbox__prev,
	& .radobau-lightbox__next { position:absolute; display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; border-radius:50%; border:none; background:var(--color-brand); color:#fff; cursor:pointer; z-index:2; transition:background .2s ease, color .2s ease;
		&:hover { background:#fff; color:var(--color-brand); }
	}
	& .radobau-lightbox__close { top:1.5rem; right:1.5rem; font-size:1.5rem; line-height:1; }
	& .radobau-lightbox__prev { left:1.5rem; top:50%; transform:translateY(-50%); font-size:1.8rem; line-height:1; }
	& .radobau-lightbox__next { right:1.5rem; top:50%; transform:translateY(-50%); font-size:1.8rem; line-height:1; }
}

body.radobau-lightbox-open { overflow:hidden; }

@media (max-width:768px) {

	.radobau-lightbox__close { top:1rem; right:1rem; width:2.5rem; height:2.5rem; }
	.radobau-lightbox__prev { left:.5rem; width:2.5rem; height:2.5rem; }
	.radobau-lightbox__next { right:.5rem; width:2.5rem; height:2.5rem; }

}

button.radobau-cta-link { border:none; background:none; padding:0; font:inherit; cursor:pointer; }

.radobau-layer { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:1.5rem;
	&.is-open { display:flex; }
	& .radobau-layer__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.75); }
	& .radobau-layer__panel { position:relative; z-index:1; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; background:var(--color-light-1); color:var(--color-text-dark); border-radius:16px; padding:2.5rem; }
	& .radobau-layer__close { position:absolute; top:1rem; right:1rem; display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border-radius:50%; border:none; background:transparent; color:var(--color-text-dark); font-size:1.5rem; line-height:1; cursor:pointer; transition:background .2s ease;
		&:hover { background:var(--color-light-2); }
	}
}

body.radobau-layer-open { overflow:hidden; }

@media (max-width:768px) {

	.radobau-layer__panel { padding:2rem 1.5rem; }

}

.radobau-kontaktformular__title { margin-bottom:1rem; }
.radobau-kontaktformular__text { opacity:.85; line-height:1.6; margin-bottom:1.5rem; }

.radobau-kontaktformular__hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.radobau-kontaktformular__field { margin-bottom:1.25rem;
	& label { display:block; font-size:.85rem; font-weight:700; letter-spacing:.02em; margin-bottom:.4rem; }
	& input, & textarea { width:100%; padding:.75rem 1rem; border:1px solid color-mix(in srgb, currentColor 25%, transparent); border-radius:8px; background:#fff; color:var(--color-text-dark); font-family:inherit; font-size:1rem;
		&:focus { outline:none; border-color:var(--color-brand); }
	}
	& textarea { resize:vertical; min-height:6rem; }
}

.radobau-kontaktformular__feedback { min-height:1.2rem; margin-bottom:1rem; font-size:.9rem; font-weight:700;
	&[data-state="error"] { color:#b91c1c; }
	&[data-state="success"] { color:#15803d; }
}

.radobau-kontaktformular__submit { display:inline-flex; align-items:center; justify-content:center; width:100%; padding:.9rem 1.5rem; border:none; border-radius:999px; background:var(--color-brand); color:#fff; font-weight:700; letter-spacing:.02em; cursor:pointer; transition:background .2s ease, opacity .2s ease;
	&:hover { background:var(--color-text-dark); }
	&:disabled { opacity:.6; cursor:not-allowed; }
}
