:root{
  --bg:#fff;
  --text:#2b2b2b;
  --muted:#6a6a6a;
  --brand:#336699;
  --accent:#c9a44a;
  --panel:#fff;
  --panel-2:#d6e0eb;
  --radius:12px;
  --shadow:0 6px 18px rgba(0,0,0,.08)
}

body{
  margin:0;
  font-family:Merriweather,Georgia,serif;
  color:var(--text)
}

h1,h2,h3,h4{
  font-family:'Playfair Display',serif
}

a {
    text-decoration: none;
}

select {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #d6e0ebe6;
  background-color: #d6e0eb1a;
  font-family: inherit;
  font-weight: bold;
  font-size: 100%;
}

.site-header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid #ece8e1
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0
}

.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:900;
  text-decoration:none;
  color:var(--brand);
}

.logo{
  height:46px
}

.menu a{
  margin-left:1rem;
  color:#6c6c6c;
  text-decoration:none
}

.menu a:hover{
  color:#2b2b2b;
  text-decoration:underline
}

.btn{
  display:inline-block;
  padding:.6rem 1rem;
  border-radius:6px;
  border:1px solid #d9d2c6;
  text-decoration:none;
  cursor:pointer;
  background:#fff
}

.btn.cta{
  background:linear-gradient(180deg,var(--accent),#b8902d);
  color:#1a1200;
  border:0;
  font-weight:700;
  box-shadow:var(--shadow)
}

.btn.ghost{
  background:transparent;
  color:var(--text)
}

.hero{
  padding:3.2rem 0;
  background:linear-gradient(180deg,var(--panel),var(--panel-2))
}

.eyebrow{
  color:var(--brand);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:700;
  font-size:.8rem
}

.lead{
  color:var(--muted)
}

.portrait{
  border-radius:10px;
  overflow:hidden;
  border:1px solid #e8e0d2;
  height: 400px;
  width: 400px;
}

.portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* füllt Container, schneidet Ränder ab */
    object-position: center; /* Bild zentrieren */
}

.section{
  padding:3rem 0;
  scroll-margin-top: 20px;
}

.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid #99b3cc;
  border-radius:12px;
  padding:1.2rem;
  box-shadow:var(--shadow)
}

.card img {
    width: 100%;
    height: 100%;
    
    object-fit: cover;   /* füllt Container, schneidet Ränder ab */
    object-position: center; /* Bild zentrieren */
}

.site-footer{
  border-top:1px solid #e8e0d2;
  padding:2rem 0 4rem;
  color:#6c6c6c
}

.container{
  width:min(1080px,92vw);
  margin-inline:auto
}

.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:2rem;
  align-items:center
}

.grid{
  display:grid;
  gap:1rem
}

.cols-3{
  grid-template-columns:repeat(3,1fr)
}

.cols-2{
  grid-template-columns:repeat(2,1fr)
}

.pill{
  margin-top:1rem;
  display:inline-block;
  padding:.5rem .9rem;
  border-radius:999px;
  background:#fff7d9;
  font-size:.85rem
}

.actions{
  margin-top:1.2rem;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem
}

.sub{
  color:var(--muted);
  margin-bottom:1rem
}

.subli{
  color:var(--muted);
}


.muted{
  color:var(--muted)
}

.footer-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:2fr 1fr 1fr
}

.hero-copy h1{
  margin-top:.5rem
}

.card.demo input,
.card.demo textarea{
  width:100%;
  box-sizing:border-box;
  margin-top:.3rem;
  margin-bottom:.8rem;
  padding:.5rem .6rem;
  border-radius:6px;
  border:1px solid #d9d2c6;
  font-family:inherit;
  font-size:1rem
}

.card.demo button{
  margin-top:.5rem
}

@media(max-width:860px){
  .hero-grid{
    grid-template-columns:1fr
  }
  .cols-3,
  .cols-2{
    grid-template-columns:1fr
  }
  .portrait{
    order:-1
  }
  .footer-grid{
    grid-template-columns:1fr
  }
}

/* Meldungsboxen */
.alert-success,
.alert-error{
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.alert-success{
  border: 1px solid #83BB26;
  background: #f2f9e8;
  color: #3d5c13;
}

.alert-error{
  border: 1px solid #c0392b;
  background: #fdecea;
  color: #7b241c;
}

/* Formular-Fehlertext */
.form-error{
  display:block;
  margin-top:0.2rem;
  font-size:0.85rem;
  color:#c0392b;
}

/* Honeypot – wird für echte User per CSS versteckt */
.honeypot{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* Sterne-Bewertung */
.rating{
  display:flex;
  flex-direction:row-reverse;
  justify-content:flex-start;
}

.rating input{
  display:none;
}

.rating label{
  cursor:pointer;
  font-size:1.6rem;
  line-height:1;
  padding:0 0.1rem;
}

.rating label::before{
  content:'☆';
}

.rating input:checked ~ label::before{
  content:'★';
}

.rating label:hover::before,
.rating label:hover ~ label::before{
  content:'★';
}

/* Liste */
.item-list{
  margin-top:0;
}

.item-entry{
  margin-bottom:1rem;
  padding-bottom:0.8rem;
  border-bottom:1px solid #e8e0d2;
}


/* Gästebuch-Liste */

.guestbook-list{
  margin-top:0;
}

.guestbook-entry{
  margin-bottom:1rem;
  padding-bottom:0.8rem;
  border-bottom:1px solid #e8e0d2;
}

.guestbook-name{
  margin:0 0 .25rem 0;
}

.guestbook-rating{
  margin:0 0 .4rem 0;
  font-size:1.1rem;
}

.guestbook-message{
  white-space:pre-line;
  margin:0 0 .3rem 0;
}

.guestbook-meta{
  font-size:0.8rem;
  margin:0;
}

/* Pagination */

.pagination {
  display: flex;
  justify-content: center;
  list-style: none; /* remove list bullets */
  padding: 0px;
}

.pagination li a {
  display: block; /* let links fill the list item */
  padding: 8px 12px;
  text-decoration: none;
  border: 1px solid gray;
  color: black;
  margin: 0 4px;
  border-radius: 5px; /* add rounded borders */
}

.pagination .active a {
  background-color: var(--panel-2);
}