/* -------------------- */
/* ROOT */
/* -------------------- */

:root{

--main-color:#a7866b;      /* Latte Braun */
--accent-color:#7a8f7a;    /* Salbei Grün */

--background-color:#f3ece2; /* Helles Beige */
--card-color:#f2ede6;

--text-color:#333;

--border-radius:12px;

--max-width:900px;

--font-heading: 'Cormorant Garamond', serif;
--font-body:'Arial', sans-serif;
}


/* -------------------- */
/* BASIC LAYOUT */
/* -------------------- */

body{

font-family: var(--font-body);
font-size:18px;
line-height:1.7;

color:var(--text-color);
background:var(--background-color);

margin:0;

}

.content{

max-width:var(--max-width);
margin:40px auto;
padding:0 20px;

}

footer{
   font-size:0.8rem;
   color:#777;
   margin-top: 80px;
   text-align: center;
   padding-bottom: 30px;
}

footer p{
   margin:4px 0;
}

/* -------------------- */
/* HEADINGS */
/* -------------------- */

h2{

font-size: 2.0rem;
margin-bottom:18px;

}

h3{

font-size:1.2rem;
margin-bottom:10px;

}

footer{
   max-width:var(--max-width);
   margin: 30px auto;
   padding: 0 20px;
   text-align: center;
}

h1, h2, h3{
font-family: var(--font-heading);
}


/* -------------------- */
/* HEADER */
/* -------------------- */

header{

background:var(--main-color);
padding:30px 20px;
text-align:center;

}

main section {
margin-bottom: 40px;
}

header h1{

margin:0;
font-size:28px;
color:white;

}

.hero-title{
text-transform: uppercase;
color:var(--accent-color);
font-size:3.6rem;
letter-spacing: 3px;
margin-bottom: 10px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(89, 109, 94 , 0.6);
}

.hero-slogan {
color:var(--main-color);
font-size:1.1rem;
letter-spacing: 1.1rem;
font-weight:400;
margin-top: 4px;
margin-bottom: 50px;
}

header img{
height:150px;
width:auto;
}


/* -------------------- */
/* NAVIGATION */
/* -------------------- */

nav{
   max-width:var(--max-width);
   margin:20px auto 0 auto;
}


nav ul{

list-style:none;
padding:0;
margin:0;
display:flex;
gap:18px;
justify-content: center;
}

nav li{
   flex:1;
}

nav a{
display: block;
text-align: center;
text-transform: uppercase;
padding:10px 26px;
text-decoration:none;
color:white;
border:1px solid rgba(255,255,255,0.7);
border-radius:12px;
font-size: 0.95rem;
letter-spacing: 0.5px;
transition: all 0.25s ease;
}

nav a:hover{

background:white;
color:var(--main-color);
border-color: white;
}


/* -------------------- */
/* HERO SECTION */
/* -------------------- */

.hero{

max-width:var(--max-width);
margin:60px auto;

}

.hero-text{

max-width:var(--max-width);
margin:0 auto 28px auto;

}

.hero img{

width:100%;
display:block;
margin:20px auto 0 auto;

border-radius:var(--border-radius);

}


/* -------------------- */
/* STORY SECTION */
/* -------------------- */

.story{

display:grid;
grid-template-columns:1.3fr 0.9fr;

gap:50px;

align-items:start;

margin-top:70px;

}

.story-image img{

width:100%;
max-width:340px;

display:block;
margin:auto;

border-radius:var(--border-radius);

}

.content .drinks img{
   width:100%;
   display:block;
   border-radius:var(--border-radius);
   margin-top:30px;
}


/* -------------------- */
/* PHILOSOPHY */
/* -------------------- */

.philosophy{

background:var(--accent-color);
color:white;
padding:56px;
margin-top:80px;
border-radius:14px;

}

.philosophy p{

max-width:760px;
margin-bottom:16px;

}


/* -------------------- */
/* FEATURES */
/* -------------------- */

.features{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:80px;
margin-bottom: 70px;

}

.feature{

padding:34px 30px;
border-radius:12px;
border:1px solid rgba(167,134,107,0.35);
background:var(--card-color);

}


/* ------------------------------ */
/* DRINKS PAGE */
/* ------------------------------ */

.menu-page{

max-width:var(--max-width);
margin:40px auto;
padding:0 20px;

}

.menu-page h2{
margin-bottom: 40px;

}

.signature-list{

list-style:none;
padding:0;
margin-top:15px;

}

.signature-list li{

margin-bottom:10px;
line-height:1.6;

}

.signature-list strong{

color:var(--main-color);

}


/* Karten */

.menu-page .drink-card{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
margin-bottom:80px;

}



/* Bild rechts / links wechseln */

.menu-page .drink-card{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
align-items:center;
margin-bottom: 50px;
}


.menu-page .drink-card.reverse .drink-image{
   order:-1;
}

/* Textbereich */

.menu-page .drink-text{

border:1px solid var(--accent-color);
padding:28px;
border-radius:var(--border-radius);
background:var(--card-color);
min-height: 320px;
}

.menu-page .drink-text h3{
margin-top:0;
font-size:1.4rem;
margin-bottom: 40px;
font-weight:600;
color:var(--main-color);
}



/* Liste */

.drink-text ul{

list-style:none;
padding:0;
margin-top:10px;

}

.drink-text li{

margin-bottom:8px;

}



/* Bilder */

.drink-image img{

width:100%;
height:370px;
object-fit:cover;
border-radius:var(--border-radius);
}

/* -------------------- */
/* BRUNCH PAGE */
/* -------------------- */

.brunch-section{

max-width:var(--max-width);
margin:40px auto;

display:grid;
grid-template-columns:1.2fr 1fr;
gap:50px;

padding:0 20px;

}

/* Textblock */

.section-title{
   max-width:var(--max-width);
   margin:60px auto 30px auto;
   padding:0 20px;
   font-size:2.2rem;
   font-weight:600;
}
.brunch-text{

border:2px solid var(--accent-color);
border-radius:var(--border-radius);
padding:40px;

background:var(--card-color);

}

.menu-subtitle{
   margin-top: 30px;
   margin-bottom: 10px;
   font-size: 1.5rem;
   text-transform: uppercase;
   color: var(--accent-color);
}


/* einzelne Gerichte */

.brunch-item{

margin-bottom:22px;

}

.brunch-item h3{

margin-bottom:6px;
color:var(--main-color);

}

.brunch-item p{

margin:0;

}


/* Bildbereich */

.brunch-images{

display:grid;
grid-template-columns:1fr 1fr;
gap:25px;

}

/* Bilder */

.brunch-images img{

width:100%;
height:420px;

object-fit:cover;

border-radius:var(--border-radius);

}

/* ------------------------------ */
/* Über uns */
/* ------------------------------ */
.ueber{
max-width:var(--max-width);
padding:0 20px;
margin-top: 40px;
display:grid;
grid-template-columns:1.2fr 1fr;
gap:40px;
align-items:start;
}

.ueber-image img{
width:100%;
height:420px;
object-fit:cover;
border-radius:var(--border-radius);
}

.ueber-text{
max-width:520px;
}

.ueber-text h2{
margin-bottom:20px;
margin-top: 0;
}

.ueber-text p{
margin-bottom:15px;
line-height:1.6;
}

.ueber aside{
grid-column:1 / -1;
background:var(--accent-color);
color:white;
border-radius:var(--border-radius);
padding:50px;
margin-top:20px;
text-align: center;
}

.ueber aside p{
   font-size: 1.1rem;
   margin:8px 0;
}
.ueber aside h3{
   margin-top:0;
   font-size:1.4rem;
   margin-bottom: 15px;
}

.ueber-gallery{
grid-column: 1/ -1;
margin-top: 20px;
}

.ueber-gallery img{
   width:100%;
   height: 380px;
   object-fit: cover;
   border-radius:var(--border-radius);
}

.cafe-note {
   grid-column:1/-1;
   border:1px solid var(--main-color);
   border-radius: var(--border-radius);
   padding:30px;
   margin: 25px 0 15px 0;
   background:var(--background-color);
   text-align:center;
   line-height: 1.6;
}

.cafe-note p{
   max-width: 620px;
   margin: 0 auto 10px auto;
}




.kontakt{
max-width:var(--max-width);
margin:60px auto;
padding:0 20px;

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;

align-items:start;
}

.kontakt p{
margin-bottom: 15px;
line-height: 1.6;
max-width: 450px;
}

.kontakt-info h2{
margin-bottom:20px;
}

.kontakt-info p{
margin-bottom:15px;
line-height:1.6;
max-width:450px;
}

.kontakt img{
width:100%;
height:420px;

object-fit:cover;
border-radius:var(--border-radius);
}

.kontakt .button{
display:block;
font-size: 0.95rem;
letter-spacing: 0.03em;
margin: 0 auto;
padding:1px 28px;
width: fit-content;
max-width: 280px;
border:2px solid var(--accent-color);
color:var(--accent-color);

text-decoration:none;
font-weight:600;

border-radius:var(--border-radius);
transition:all 0.3s ease;
}

.kontakt .button:hover{
background:var(--accent-color);
color:white;
}


@media (max-width: 768px) {

  /* ======================
     GLOBAL
  ====================== */
  body {
    font-size: 16px;
  }

  .content {
    margin: 20px auto;
    padding: 0 16px;
  }

  /* ======================
     HEADER / NAV (LIGHTER)
  ====================== */
  header {
    padding: 20px 10px;
  }

  header img {
    height: 90px;
  }

  nav ul {
    flex-wrap: wrap;
    gap: 10px;
  }

  nav li {
    flex: 1 1 auto;
  }

  nav a {
    font-size: 11px;
    padding: 8px 10px;
  }

  /* ======================
     HERO
  ====================== */
  .hero {
    margin: 30px auto;
  }

  .hero-title {
    font-size: 2.2rem;
    letter-spacing: 2px;
    text-align: center;
  }

  .hero-slogan {
    font-size: 0.9rem;
    letter-spacing: 0.4rem;
    text-align: center;
    margin-bottom: 30px;
  }

  .hero img {
    margin-top: 15px;
  }

  /* ======================
     STORY (STACK FIX)
  ====================== */
  .story {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .story-image img {
    max-width: 100%;
  }

  /* ======================
     PHILOSOPHY
  ====================== */
  .philosophy {
    padding: 30px 20px;
  }

  /* ======================
     FEATURES → STACK
  ====================== */
  .features {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }

  /* ======================
     DRINK CARDS
  ====================== */
  .menu-page .drink-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
  }

  .menu-page .drink-card.reverse {
    flex-direction: column;
  }

  .drink-image img {
    height: auto;
  }

  .menu-page .drink-text {
    min-height: auto;
    padding: 20px;
  }

  /* ======================
     BRUNCH (SNACKS)
  ====================== */
  .brunch-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .brunch-images {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .brunch-images img {
    height: auto;
  }

  .brunch-text {
    padding: 25px;
  }

  /* ======================
     ÜBER UNS
  ====================== */
  .ueber {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .ueber-image img {
    height: auto;
  }

  .ueber aside {
    padding: 30px 20px;
  }

  .ueber-gallery img {
    height: auto;
  }
.button{
  max-width: 80%;

}
  /* ======================
     CAFE NOTE
  ====================== */
  .cafe-note {
    padding: 20px;
  }

  /* ======================
     KONTAKT
  ====================== */
  .kontakt {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .kontakt img {
    height: auto;
  }

  .kontakt p {
    max-width: 100%;
  }

  .kontakt .button {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* ======================
     SPACING CLEANUP
  ====================== */
  section {
    margin-bottom: 40px;
  }

  h2.section-title {
    font-size: 1.6rem;
    text-align: center;
  }

/* ======================
     GLOBAL
  ====================== */
  body {
    font-size: 16px;
  }

  .content {
    margin: 20px auto;
    padding: 0 16px;
  }

/* ======================
   NAV CLEAN MOBILE
====================== */

nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

nav li {
  flex: unset;
}

nav a {
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 20px;
}

  /* ======================
     HERO
  ====================== */
  .hero {
    margin: 30px auto;
  }

  .hero-title {
    font-size: 2.2rem;
    letter-spacing: 2px;
    text-align: center;
  }

  .hero-slogan {
    font-size: 0.9rem;
    letter-spacing: 0.4rem;
    text-align: center;
    margin-bottom: 30px;
  }



  /* ======================
     STORY (STACK FIX)
  ====================== */
  .story {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  /* ======================
     PHILOSOPHY
  ====================== */
  .philosophy {
    padding: 30px 20px;
  }

  /* ======================
     FEATURES → STACK
  ====================== */
  .features {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 40px;
  }

  /* ======================
     DRINK CARDS
  ====================== */
  .menu-page .drink-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
  }

  .menu-page .drink-card.reverse {
    flex-direction: column;
  }

  .drink-image img {
    height: auto;
  }

  .menu-page .drink-text {
    min-height: auto;
    padding: 20px;
  }

  /* ======================
     BRUNCH (SNACKS)
  ====================== */
  .brunch-section {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .brunch-images {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .brunch-images img {
    height: auto;
  }

  .brunch-text {
    padding: 25px;
  }

  /* ======================
     ÜBER UNS
  ====================== */
  .ueber {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .ueber-image img {
    height: auto;
  }

  .ueber aside {
    padding: 30px 20px;
  }

  .ueber-gallery img {
    height: auto;
  }

  /* ======================
     CAFE NOTE
  ====================== */
  .cafe-note {
    padding: 20px;
  }

  /* ======================
     KONTAKT
  ====================== */
  .kontakt {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .kontakt p {
    max-width: 100%;
  }

  .kontakt .button {
    width: 100%;
    text-align: center;
    padding: 14px;
  }

  /* ======================
     SPACING CLEANUP
  ====================== */
  section {
    margin-bottom: 40px;
  }

  h2.section-title {
    font-size: 1.6rem;
    text-align: center;
  }

/* ======================
   DRINKS CLEAN MOBILE (FINAL)
====================== */

.menu-page .drink-card {
  display: block;
  margin-bottom: 35px;
}

/* Bild oben, klein */
.drink-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 12px;
}

/* Text clean */
.menu-page .drink-text {
  padding: 0;
  border: none;
  background: none;
  min-height: auto;
}

.menu-page .drink-text h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
  text-decoration: underline;
  color: var(--main-color);
}

.drink-text li {
  font-size: 0.95rem;
  margin-bottom: 6px;
  opacity: 0.8;
}

/* Reverse komplett ignorieren */
.menu-page .drink-card.reverse .drink-image,
.menu-page .drink-card.reverse .drink-text {
  order: unset;
}


/* ======================
   BRUNCH IMAGES MOBILE
====================== */

  .brunch-images {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .brunch-images img {
    height: 180px; /* vorher 420 → riesig */
    object-fit: cover;
    border-radius: 8px;
  }

  .content {
    gap: 30px; /* aktuell etwas zu groß */
  }
/* ======================
   IMAGE SIZE FIX
====================== */

.story img,
.barista img,
.kontakt img {
  max-width: 420px;
  width: 80%;
  margin: 20px auto 0 auto;
  display: block;
}



}