body{
margin:0;
font-family:'Lato',sans-serif;
background:#f4faf7;
color:#2f4a43;
line-height:1.5;
}


/* LINKS */

a{
color:#c2a2ad;
text-decoration:underline;
}

a:hover{
color:#a98c96;
}


/* HEADER */

header{
display:flex;
justify-content:center;
padding:35px 20px 10px 20px;
}

.site-header{
display:flex;
justify-content:space-between;
align-items:center;
max-width:1100px;
margin:auto;
padding:25px 20px;
}


/* LOGO */

.logo{
font-family:'Playfair Display',serif;
font-size:28px;
color:#c2a2ad;
letter-spacing:1px;
}


/* NAVIGATION */

nav a{
margin-left:20px;
text-decoration:none;
color:#2f4a43;
font-size:14px;
transition:0.2s;
}

nav a:hover{
color:#c2a2ad;
}


/* INTRO */

.intro{
position:relative;
max-width:850px;
margin:auto;
text-align:center;
padding:15px 25px 25px 25px;
}

.intro h1{
font-family:'Playfair Display',serif;
font-size:36px;
margin-bottom:10px;
color:#2f4a43;
}

.intro p{
font-size:17px;
color:#4e6a63;
max-width:620px;
margin:auto;
}


/* INTRO ILLUSTRATION */

.intro-illustration{

position:absolute;

right:-50px;

top:-30px;

width:360px;

opacity:0.22;

pointer-events:none;

z-index:0;

}

.intro h1,
.intro p{
position:relative;
z-index:2;
}


/* GRID */

.section-grid{
max-width:1000px;
margin:25px auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
padding:0 25px;
}


/* CARDS */

.card{
text-decoration:none;
color:inherit;
}

.card img{
width:100%;
height:280px;
object-fit:cover;
border-radius:12px;
transition:transform .35s ease;
}

.card:hover img{
transform:scale(1.05);
}

.card-title{
font-family:'Playfair Display',serif;
font-size:22px;
margin-top:14px;
color:#2f4a43;
}

.card-text{
font-size:14px;
color:#5f7a73;
margin-top:5px;
}

.heller{
filter:brightness(1.3);
}


/* CTA */

.cta{
text-align:center;
padding:30px 20px 25px 20px;
background:#f7f0f3;
}

.cta h2{
font-family:'Playfair Display',serif;
font-size:26px;
margin-bottom:12px;
color:#2f4a43;
}

.cta a{
text-decoration:none;
padding:12px 28px;
border-radius:30px;
background:#c2a2ad;
color:white;
font-size:14px;
transition:0.3s;
}

.cta a:hover{
background:#a98c96;
}


/* FOOTER */

footer{
text-align:center;
font-size:13px;
padding:20px 20px 30px 20px;
color:#7a928b;
margin-top:10px;
border-top:1px solid #e6ece9;
}

.footer-links{
margin-top:6px;
}

.footer-links a{
margin:0 8px;
text-decoration:none;
color:#5f7a73;
}

.footer-links a:hover{
color:#c2a2ad;
}


/* COOKIE BANNER */

.cookie-banner{

position:fixed;
bottom:0;
left:0;
right:0;

background:#2f4a43;
color:white;

display:flex;
justify-content:space-between;
align-items:center;

padding:12px 20px;

font-size:14px;

z-index:1000;

}

.cookie-banner button{

background:#c2a2ad;
border:none;
padding:8px 16px;
border-radius:20px;
color:white;
cursor:pointer;

}

.cookie-banner button:hover{

background:#a98c96;

}


/* PAGE LAYOUT */

.page{
max-width:1100px;
margin:auto;
padding:40px 20px;
}


/* ABOUT SECTION */

.about-section{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
margin-top:40px;
margin-bottom:80px;
}

.about-text h1{
font-family:'Playfair Display',serif;
font-size:36px;
margin-bottom:20px;
color:#2f4a43;
}

.about-text p{
margin-bottom:14px;
color:#4e6a63;
font-size:16px;
}

.about-image img{
width:80%;
border-radius:16px;
box-shadow:0 15px 40px rgba(0,0,0,0.08);
}


/* PHILOSOPHIE HERO */

.philo-hero{

max-width:1000px;
height:340px;

margin:40px auto;

background-image:url('../Bilder_philosophie/IMG_4215.jpg');
background-size:cover;
background-position:center;

border-radius:20px;

display:flex;
align-items:center;

box-shadow:0 10px 40px rgba(0,0,0,0.06);

filter:brightness(1.3);

}

.philo-hero-text{

max-width:500px;
margin-left:auto;
padding:40px;
color:white;

}

.philo-hero-text h1{

font-family:'Playfair Display',serif;
font-size:42px;
margin:10px 0;

}

.philo-hero-text .quote{

font-family:'Playfair Display',serif;
font-size:20px;
opacity:0.95;

}

.philo-hero-text .lead{

font-size:18px;
opacity:0.9;
margin-top:10px;

}


/* PHILOSOPHY TEXT */

.philosophy-text{
max-width:750px;
margin:auto;
}

.philosophy-text p{
font-size:17px;
line-height:1.8;
margin-bottom:22px;
}

.highlight{
color:#c2a2ad;
font-weight:600;
}


/* LEGAL PAGES */

.legal{
max-width:800px;
}

.legal-note{
margin-top:30px;
font-size:14px;
color:#7a928b;
}


/* RESPONSIVE */

@media(max-width:850px){

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

.about-section{
grid-template-columns:1fr;
gap:30px;
}

.about-image{
order:-1;
}

.philo-hero{
height:auto;
padding:50px 20px;
}

.philo-hero-text{
margin:auto;
text-align:center;
}

.intro-illustration{
width:240px;
right:10px;
top:-10px;
opacity:0.16;
}

}


/* CONTACT */

.contact{
max-width:800px;
text-align:center;
}

.contact-intro{
margin-bottom:40px;
font-size:18px;
color:#4e6a63;
}

.contact-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.contact-card{
background:#f7f0f3;
padding:25px;
border-radius:16px;
text-decoration:none;
color:#2f4a43;
transition:0.25s;
}

.contact-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.contact-card h3{
font-family:'Playfair Display',serif;
margin-bottom:6px;
}

.whatsapp{
background:#c2a2ad;
color:white;
}

.whatsapp:hover{
background:#a98c96;
color:white;
}


/* CONTACT META */

.contact-meta{
margin-top:28px;
font-size:15px;
color:#5f7a73;
}


/* BEWERTUNGEN */

.review-card{
background:#ffffff;
padding:28px;
border-radius:16px;
box-shadow:0 8px 30px rgba(0,0,0,0.05);
font-size:15px;
line-height:1.7;
}

.review-stars{
color:#e6b800;
font-size:18px;
margin-bottom:10px;
}

.review-author{
margin-top:12px;
font-weight:600;
color:#4e6a63;
}

.review-quote{
font-family:'Playfair Display',serif;
font-size:34px;
color:#c2a2ad;
line-height:0;
}

.review-text{
margin-top:10px;
font-size:15px;
line-height:1.7;
}

.review-author{
margin-top:14px;
font-weight:600;
color:#4e6a63;
}

/* ============================= */
/* PORTFOLIO HERO */
/* ============================= */

.portfolio-hero{

height:420px;

background:
linear-gradient(
rgba(0,0,0,0.35),
rgba(0,0,0,0.25)
),
url('../Bilder_portfolio/IMG_9881.JPG');

background-size:cover;
background-position:center;

display:flex;
align-items:center;
justify-content:center;

margin-bottom:80px;

}

.portfolio-hero-content{

background:rgba(255,255,255,0.85);

padding:45px 60px;

border-radius:18px;

text-align:center;

box-shadow:0 20px 60px rgba(0,0,0,0.12);

}

.portfolio-hero h1{

font-family:'Playfair Display',serif;
font-size:48px;

margin-bottom:10px;

}

.portfolio-hero p{

font-size:20px;

color:#4e6a63;

}



/* ============================= */
/* PORTFOLIO GRID */
/* ============================= */



.portfolio-wrapper{

max-width:1200px;
margin:auto;

padding:0 20px 80px;

}

.category-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:28px;

}



/* ============================= */
/* CATEGORY CARD */
/* ============================= */

.category-card{

position:relative;

overflow:hidden;

border-radius:18px;

display:block;

box-shadow:0 15px 40px rgba(0,0,0,0.08);

}



/* IMAGE */

.category-card img{

width:100%;
aspect-ratio:4/3;

object-fit:cover;

transition:transform .6s ease, filter .6s ease;

}



/* HOVER ZOOM */

.category-card:hover img{

transform:scale(1.12);

filter:brightness(.75);

}



/* OVERLAY */

.category-overlay{

position:absolute;

bottom:0;
left:0;
right:0;

padding:28px;

color:white;

transform:translateY(20px);

transition:.4s;

}



/* TEXT */

.category-overlay h3{

font-family:'Playfair Display',serif;

font-size:24px;

margin:0;

}

.category-overlay span{

font-size:14px;

opacity:.9;

}



/* HOVER TEXT MOVE */

.category-card:hover .category-overlay{

transform:translateY(0);

}



/* ============================= */
/* MOBILE */
/* ============================= */

@media(max-width:700px){

.category-grid{

grid-template-columns:repeat(2,1fr);

gap:8px;

}

.portfolio-hero{

height:240px;

}

.portfolio-hero h1{

font-size:32px;

}

.portfolio-hero-content{

padding:30px;

}

}

/* ============================= */
/* PARTNER */
/* ============================= */

.partner-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:40px;
}

.partner-card{
background:#ffffff;
padding:28px;
border-radius:18px;
text-decoration:none;
color:#2f4a43;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
transition:0.3s;
display:block;
}

.partner-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.partner-card h3{
font-family:'Playfair Display',serif;
margin-bottom:10px;
}

.partner-card p{
font-size:15px;
color:#5f7a73;
}

.partner-card span{
display:block;
margin-top:15px;
font-size:14px;
color:#c2a2ad;
}

.review-cta-card{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
background:#f7f0f3;
}

.review-cta-card a{
margin-top:12px;
padding:10px 20px;
border-radius:25px;
background:#c2a2ad;
color:white;
text-decoration:none;
font-size:14px;
transition:0.3s;
}

.review-cta-card a:hover{
background:#a98c96;
}

}

/* ============================= */
/* SUB HERO (feiner & eleganter) */
/* ============================= */

.sub-hero{
text-align:center;
padding:100px 20px 50px;
}

.sub-hero h1{
font-family:'Playfair Display',serif;
font-size:48px;
letter-spacing:1px;
margin-bottom:12px;
}

.sub-hero p{
color:#6b7d78;
font-size:15px;
letter-spacing:0.5px;
}


/* ============================= */
/* GALLERY – MASONRY HIGH END */
/* ============================= */

.gallery{
  max-width:1200px;
  margin:auto;
  padding:0 25px 100px;

  column-count:3;
  column-gap:20px;
}


/* Bilder */
.gallery img{
  width:100%;
  height:auto;

  margin-bottom:20px;

  border-radius:16px;

  display:block;

  transition:all .4s ease;
  filter:brightness(0.95) contrast(1.05);
}


/* Hover */
.gallery img:hover{
  transform:scale(1.03);
  filter:brightness(1) contrast(1.08);
}

@media (max-width:900px){
  .gallery{
    column-count:2;
  }
}

@media (max-width:500px){
  .gallery{
    column-count:1;
  }
}


/* ============================= */
/* HERO MIT BILD */
/* ============================= */

.sub-hero{

height:420px;

background:
linear-gradient(
rgba(0,0,0,0.35),
rgba(0,0,0,0.25)
),
url('../../Bilder_portfolio/781A9745.jpg');

background-size:cover;
background-position:center;

display:flex;
align-items:center;
justify-content:center;

margin-bottom:60px;

}


/* TEXT BOX */

.sub-hero-content{

background:rgba(255,255,255,0.85);

padding:35px 50px;

border-radius:18px;

text-align:center;

box-shadow:0 20px 60px rgba(0,0,0,0.12);

}


.sub-hero h1{
font-family:'Playfair Display',serif;
font-size:42px;
margin-bottom:10px;
}

.sub-hero p{
font-size:16px;
color:#4e6a63;
}

.next-category{
margin:80px 0 40px;
padding:0 20px;
}

.next-box{
display:block;
max-width:800px;
margin:auto;

padding:40px 30px;

background:#f7f0f3;
border-radius:18px;

text-align:center;
text-decoration:none;
color:#2f4a43;

transition:.3s;
}

.next-box span{
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
color:#7a928b;
}

.next-box h2{
font-family:'Playfair Display',serif;
font-size:28px;
margin-top:10px;
}

.next-box:hover{
transform:translateY(-4px);
box-shadow:0 15px 40px rgba(0,0,0,0.08);
}

@media (max-width: 768px) {

  .section-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* Philosophie nach unten + groß */
  .section-grid .card:nth-child(2) {
    order: 3;
    grid-column: span 2;
  }

  /* Über mich nach oben rechts */
  .section-grid .card:nth-child(3) {
    order: 2;
  }

  /* Portfolio bleibt links */
  .section-grid .card:nth-child(1) {
    order: 1;
  }

  /* Bildgrößen */
  .card img {
    height: 140px;
  }

  /* große Karte unten */
  .section-grid .card:nth-child(2) img {
    height: 180px;
  }

}

@media (max-width: 768px) {

  /* Header kompakter */
  .site-header {
    padding: 10px 12px;
    flex-direction: column;
    gap: 6px;
  }

  /* Logo kleiner */
  .logo {
    font-size: 18px;
  }

  /* Navigation kleiner + sauber zentriert */
  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  nav a {
    font-size: 12px;
    margin: 0;
    padding: 4px 6px;
  }

}

@media (max-width: 768px) {

  .portfolio-hero {
    height: 150px;
    margin-bottom: 20px;
  }

  .portfolio-hero-content {
    padding: 15px 18px;
    border-radius: 10px;
  }

  .portfolio-hero h1 {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .portfolio-hero p {
    font-size: 12px;
  }

}

@media (max-width: 768px) {

  .sub-hero {
    height: 150px;
    margin-bottom: 20px;
  }

  .sub-hero-content {
    padding: 12px 16px;
    border-radius: 10px;
  }

  .sub-hero h1 {
    font-size: 20px;
    margin-bottom: 4px;
  }

  .sub-hero p {
    font-size: 12px;
  }

}

@media (max-width: 768px) {

  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 0 8px 40px;
  }

  .gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0;
    border-radius: 8px;
  }

}

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox img {
  max-width: 90%;
  max-height: 85%;
  border-radius: 10px;
}

/* ============================= */
/* BEWERTUNGEN MOBILE GRID */
/* ============================= */

@media (max-width: 768px) {

  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .contact-card {
    padding: 14px;
    font-size: 13px;
    border-radius: 12px;
  }

  .contact-card p {
    margin: 0;
  }

  .contact-card strong {
    display: block;
    margin-top: 8px;
    font-size: 12px;
  }

  /* CTA Karte über volle Breite */
  .review-cta-card {
    grid-column: span 2;
  }

}

/* ============================= */
/* CONTACT INSTAGRAM STYLE MOBILE */
/* ============================= */

@media (max-width: 768px) {

  .contact-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .contact-card {
    padding: 12px 6px;
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
  }

  .contact-card h3 {
    font-size: 12px;
    margin-bottom: 4px;
  }

  .contact-card p {
    font-size: 11px;
    word-break: break-word;
  }

}

@media (max-width: 768px) {

  .about-section {
    display: block;
  }

  .about-image {
    margin: 20px 0 25px;
    text-align: center;
  }

  .about-image img {
    width: 100%;
    max-width: 320px;
    border-radius: 14px;
  }

}

@media (max-width: 768px) {

  header{
    padding: 0;
  }

  .site-header{
    padding: 8px 10px; /* deutlich kompakter */
  }

  .page{
    padding: 18px 14px; /* weniger Luft oben */
  }

  .contact h1{
    margin-top: 0;
  }

}

@media (max-width: 768px) {

  .philo-hero {
    height: 180px;         /* feste Höhe -> clean */
    padding: 0;            /* wichtig! */
    margin: 10px 12px 20px;
    border-radius: 14px;
  }

  .philo-hero-text {
    padding: 12px;
    text-align: center;
  }

  .philo-hero-text .quote {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .philo-hero-text h1 {
    font-size: 20px;
    margin: 2px 0;
  }

  .philo-hero-text .lead {
    font-size: 11px;
  }

}

@media (max-width: 768px) {

  .cta {
    padding: 18px 14px;
  }

  .cta h2 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .cta a {
    padding: 8px 18px;
    font-size: 12px;
    border-radius: 20px;
  }

}

@media (max-width: 768px) {

  .next-category {
    margin: 40px 0 20px;
  }

  .next-box {
    padding: 18px 16px;
    border-radius: 14px;
  }

  .next-box span {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .next-box h2 {
    font-size: 18px;
    margin-top: 6px;
  }

}

@media (max-width: 768px) {

  .category-overlay {
    padding: 10px; /* weniger Platzverbrauch */
  }

}

@media (max-width: 768px) {

  .category-overlay h3 {
    font-size: 18px;
    line-height: 1.25;
  }

}

@media (max-width: 768px) {

  .category-overlay h3 {
    word-break: break-word;
  }

}

@media (max-width: 768px) {

  .category-overlay {
    justify-content: center; /* statt unten */
    text-align: center;
  }

}

@media (max-width: 768px) {

  nav {
    display: flex;
    flex-wrap: nowrap;        /* ❗ verhindert Umbruch */
    justify-content: center;
    gap: 10px;
    overflow-x: auto;         /* falls es ganz eng wird → scroll statt Umbruch */
    -webkit-overflow-scrolling: touch;
  }

  nav a {
    font-size: 11px;          /* bisschen kleiner, damit alles reinpasst */
    white-space: nowrap;      /* ❗ verhindert Textumbruch */
    padding: 4px 2px;
  }

}

nav::-webkit-scrollbar {
  display: none;
}