@charset "UTF-8";

html, body {
  margin: 0;
  min-height: 100%;
  background: #fbf0f1;
  color: #000;
font-family: "Switzer", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, video {
  display: block;
  max-width: 100%;
}
/* Links allgemein */
a{
color:inherit;
text-decoration:none;
border-bottom:1px solid rgba(0,0,0,0.2);
}

a:hover{
border-bottom:1px solid rgba(0,0,0,0.6);
}

/* besuchte Links */
a:visited{
color:inherit;
}


/* aktive Links */
a:active{
color:inherit;
}
/* ======================
   HEADER
====================== */

.site-header{
background:#fbf0f1;
border-bottom:1px solid #eee;
padding:1rem 1rem;
}

.header-inner{
max-width:1200px;
margin:0 auto;

display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:2rem;
}

.logo img{
height:40px;
width:auto;
}

.site-title{
font-size:1rem;
font-weight:600;
line-height:1.2;
margin:0;
}

.site-title span{
display:block;
font-weight:400;
font-size:0.8rem;
opacity:.7;
margin-top:.2rem;
}

.main-nav{
display:flex;
gap:1.5rem;
}

.main-nav a{
text-decoration:none;
color:#000;
font-size:.9rem;
opacity:.7;
transition:opacity .25s ease;
}

.main-nav a:hover{
opacity:1;
}

.hero{
position:relative;
height: min(70vh, 900px);
overflow:hidden;
}

.hero-video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
}

.hero-overlay{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
z-index:2;
}

.hero-overlay h1{
margin:0;
font-weight:900;
text-transform:uppercase;
line-height:0.9;
font-size: clamp(2.5rem, 8vw, 6rem);
}

.syl{
display:block;
transition:transform .3s ease, color .3s ease;
}

.hero-overlay .syl:hover{
transform:translateY(-0.15em);
color:#ddd;
}

.hero::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
rgba(0,0,0,0.2),
rgba(0,0,0,0.3)
);
z-index:1;
}


/* ======================
   GALLERY
====================== */

.gallery{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
max-width:1100px;
margin:auto;
}
.gallery img,
.gallery video{
width:100%;
height:auto;
display:block;
}
/* ======================
   DIVIDER
====================== */

.divider-text {
font-weight:900;
text-transform:uppercase;
line-height:0.8;

font-size:clamp(2.5rem,3vw,5rem);

text-align:center;
margin:1rem auto;
  padding: 0 1rem;
}

.three-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 3rem auto;
  max-width: 1100px;
  padding: 0 1rem;
  text-align: center;
}

.three-columns h3 {
	font-weight:900;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.three-columns p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .three-columns {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
/* ======================
   SECTIONS
====================== */

section {
  max-width: 1100px;
  margin: 5rem auto;
  padding: 0 1rem;
}

h2 {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

p {
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0;
}
/* ======================
   SCENARIOS
====================== */

.scenario-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:2rem;
}

.scenario{
text-align:center;
}

.scenario img{
width:100%;
height:auto;
aspect-ratio:4/3;
object-fit:cover;
border-radius:6px;
}

.scenario figcaption{
margin-top:0.6rem;
font-size:0.95rem;
opacity:0.7;
}
/* ======================
   ABOUT
====================== */

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.about-media img {
  border-radius: 6px;
  object-fit: cover;
}

.about-text p + p {
  margin-top: 1.2rem;
}

/* ======================
   TWO COLUMN TEXT
====================== */

.two-col {
  text-align: center;
}

.two-col .columns {
  display: grid;
  grid-template-columns: 1fr 1fr; /* zwei Spalten nebeneinander */
  gap: 3rem;
  text-align: left;
  align-items: start; /* sorgt dafür, dass Inhalte oben beginnen */
}
.two-col-intro {
  text-align: center;      /* zentriert unter der Überschrift */
  font-size: 1.125rem;     /* gleiche Größe wie andere Absätze */
  line-height: 1.65;
  max-width: 65ch;         /* angenehm zu lesen */
  margin: 1rem auto 3rem;  /* Abstand oben und unten */
}

/* ======================
   PRICING CARDS
====================== */

.pricing{
text-align:center;
max-width:1000px;
margin:6rem auto;
padding:0 1rem;
}

.pricing-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:2rem;
margin-top:3rem;
}

.price-card{
background:#fff;
border:1px solid #eee;
border-radius:10px;
padding:2rem;

display:flex;
flex-direction:column;
gap:.7rem;

position:relative;

transition:all .25s ease;
}
.request{
margin-top:1rem;
font-size:.9rem;
font-weight:600;
letter-spacing:.04em;
opacity:.6;
transition:all .25s ease;
}

.price-card:hover .request{
opacity:1;
transform:translateX(6px);
}
.price-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.price-card h3{
margin:0;
font-size:1.3rem;
}

.price-card p{
font-size:.95rem;
color:#555;
}

.price{
font-size:1.6rem;
font-weight:700;
margin-top:.5rem;
}

/* Highlight */

.featured{
border:2px solid #000;
transform:scale(1.03);
}

.tag{
position:absolute;
top:-10px;
left:20px;

background:#000;
color:#fff;

font-size:.7rem;
letter-spacing:.05em;

padding:4px 8px;
border-radius:4px;
}

/* Responsive */

@media (max-width:700px){

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

}

/* ======================
   BEWERTUNGEN
====================== */
.reviews {
  max-width: 1000px;
  margin: 6rem auto;
  padding: 0 1rem;
  text-align: center;
}

.reviews h2 {
  font-size: 2rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 2.5rem;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.review-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #000;
}

.review-author {
  display: block;
  margin-top: 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0.7;
}
/* ======================
   FOOTER (clean & light)
====================== */

.site-footer {
  margin-top: 8rem;
  padding: 3rem 1rem;
  border-top: 1px solid #eee;
  text-align: center;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
}

.footer-contact p {
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.footer-contact a,
.footer-legal a {
  color: #000;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity .3s ease;
}

.footer-contact a:hover,
.footer-legal a:hover {
  opacity: 1;
}

.footer-legal {
  margin-top: 2rem;
  font-size: 0.85rem;
}

.footer-legal span {
  margin: 0 0.5rem;
  opacity: 0.4;
}

.footer-copy {
  margin-top: 2rem;
  font-size: 0.75rem;
  opacity: 0.4;
  letter-spacing: 0.05em;
}

/* ======================
   RESPONSIVE
====================== */

@media (max-width: 900px) {

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

  .two-col .columns {
    grid-template-columns: 1fr;
  }

  .offer {
    flex-direction: column;
  }

  .price {
    margin-top: 0.5rem;
  }

.header-inner{
grid-template-columns:1fr;
text-align:center;
gap:1rem;
}

.logo{
display:flex;
justify-content:center;
}

.main-nav{
justify-content:center;
}

.site-title{
font-size:.9rem;
}

.site-title span{
font-size:.75rem;
}
.gallery{
grid-template-columns:repeat(2,1fr);
}
}
@media (max-width:600px){

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

}