/* ================= SCHRIFTEN (liegen im Ordner "fonts") ================= */
@font-face{font-family:"Italiana";src:url("fonts/Italiana-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Regular.ttf") format("truetype");font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/InstrumentSerif-Italic.ttf") format("truetype");font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
/* EIGENE SCHNÖRKELSCHRIFT (optional): Zeichen vor und nach diesem Block entfernen und Datei fonts/schnoerkel.ttf anlegen
@font-face{font-family:"Schnoerkel";src:url("fonts/schnoerkel.ttf") format("truetype");font-display:swap}
*/

/* ================= FARBEN & GRUNDWERTE ================= */
:root{
  --bg:#f5f1ea;            /* warmes Off-White */
  --papier:#fbf9f6;
  --ink:#2f2622;          /* Text */
  --braun:#5e4231;        /* Walnuss */
  --braun-mittel:#8b6a52;
  --braun-dunkel:#3a2a21; /* Fuß, Spruchband */
  --linie:#d8cdbf;
  --sand:#ebe3d8;
  --akzent:#8c4a3c;       /* gedecktes Rot, sparsam */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --anzeige:"Italiana","Instrument Serif",Georgia,serif;
  --schnoerkel:"Schnoerkel","Instrument Serif",Georgia,serif;
  --sans:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.8;font-size:17px;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--braun);text-underline-offset:4px;text-decoration-thickness:1px}
a:hover{color:var(--akzent)}
.wrap{width:min(1080px,88%);margin-inline:auto}
h1,h2,h3{font-family:var(--anzeige);font-weight:400;color:var(--braun);line-height:1.15;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,7vw,5.2rem)}
h2{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:.5em}
h3{font-size:1.6rem}
.kicker{display:block;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--akzent);margin-bottom:1.1rem}
.schnoerkel{font-family:var(--schnoerkel);font-style:italic;color:var(--braun-mittel);font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2}
section{padding:clamp(4rem,10vw,8rem) 0}
.mitte{text-align:center}

/* Verzierung: feine Linie mit Raute */
.zier{position:relative;height:22px;width:min(300px,70%);margin:1.8rem auto}
.zier::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--linie)}
.zier::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:22px;transform:translate(-50%,-50%);background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='22' viewBox='0 0 54 22'%3E%3Cpath d='M27 4l5 7-5 7-5-7z' fill='none' stroke='%238b6a52' stroke-width='1'/%3E%3Ccircle cx='10' cy='11' r='1.4' fill='%238b6a52'/%3E%3Ccircle cx='44' cy='11' r='1.4' fill='%238b6a52'/%3E%3C/svg%3E") center no-repeat}
.zier.links{margin-left:0}
.spruch .zier::before{background:rgba(255,255,255,.25)}
.spruch .zier::after{background-color:var(--braun-dunkel)}

/* ================= KOPF ================= */
.kopf{padding:1.6rem 0 1.1rem;border-bottom:1px solid var(--linie);background:var(--bg)}
.kopf .wrap{display:flex;flex-direction:column;align-items:center;gap:.7rem;position:relative}
.logo{font-family:var(--schnoerkel);font-style:italic;font-size:clamp(2rem,4.5vw,2.8rem);color:var(--braun);text-decoration:none;line-height:1.1}
.nav{display:flex;gap:clamp(1.2rem,3vw,2.6rem);flex-wrap:wrap;justify-content:center}
.nav a{text-decoration:none;color:var(--ink);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;padding:.35rem 0;border-bottom:1px solid transparent;transition:.25s}
.nav a:hover{color:var(--akzent);border-color:var(--akzent)}
.nav a.aktiv{border-color:var(--braun)}
.burger{display:none;position:absolute;right:0;top:.2rem;background:none;border:0;color:var(--braun);font-size:1.5rem;cursor:pointer;line-height:1}
@media(max-width:760px){
  .kopf .wrap{align-items:flex-start;padding-right:2.4rem}
  .burger{display:block}
  .nav{display:none;flex-direction:column;gap:.9rem;padding:.8rem 0 .3rem}
  .nav.offen{display:flex}
}

/* ================= BUTTONS ================= */
.btn{display:inline-block;padding:.95rem 2rem;background:var(--braun);color:var(--papier);text-decoration:none;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--braun);transition:.25s;cursor:pointer;font-family:var(--sans);line-height:1.2}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--papier)}
.btn.zweit{background:transparent;color:var(--braun)}
.btn.zweit:hover{background:var(--braun);color:var(--papier)}
.btnreihe{display:flex;gap:1rem;flex-wrap:wrap}
.mitte .btnreihe{justify-content:center}
.textlink{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--braun-mittel);padding-bottom:.2rem;background:none;border-top:0;border-left:0;border-right:0;color:var(--braun);cursor:pointer;font-family:var(--sans)}
.textlink:hover{color:var(--akzent);border-color:var(--akzent)}

/* ================= STARTSEITE ================= */
.hero{padding:clamp(4.5rem,11vw,9rem) 0 clamp(3rem,7vw,5rem)}
.hero .schnoerkel{margin-bottom:1rem}
.hero p.lead{max-width:34em;margin:0 auto 2.4rem;color:#5b4b41;font-size:1.08rem}
.startbild{padding:0 0 clamp(3rem,8vw,6rem)}
.startbild[hidden]{display:none}
.startbild img{width:100%;aspect-ratio:21/9;object-fit:cover}

.inhaber{background:var(--papier);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.inhaber .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,7vw,6rem);align-items:center}
.inhaber .rolle{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--braun-mittel);margin-bottom:1.4rem}
@media(max-width:800px){.inhaber .wrap{grid-template-columns:1fr}}

/* Bildrahmen mit versetzter Linie */
.rahmen{position:relative;margin:0 18px 18px 0}
.rahmen::before{content:"";position:absolute;top:18px;left:18px;right:-18px;bottom:-18px;border:1px solid var(--braun-mittel)}
.rahmen>.bildbox{position:relative}
.bildbox{aspect-ratio:4/3;background:var(--sand);overflow:hidden;display:block;border:0;padding:0;width:100%;position:relative}
.bildbox.hoch{aspect-ratio:4/5}
.bildbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.bildbox.leer img{display:none}
.bildbox .platz{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--schnoerkel);font-style:italic;color:var(--braun-mittel);font-size:1.4rem;z-index:0}

.spruch{background:var(--braun-dunkel);color:var(--papier);text-align:center;padding:clamp(4rem,9vw,7rem) 0}
.spruch p{font-family:var(--schnoerkel);font-style:italic;font-size:clamp(1.8rem,4.2vw,3rem);line-height:1.25;max-width:20em;margin:auto;color:#f1e7da}

/* ================= SEITENKOPF / TEXT ================= */
.seitenkopf{padding:clamp(3.5rem,8vw,6rem) 0 0;text-align:center}
.seitenkopf p.lead{max-width:34em;margin:0 auto;color:#5b4b41}
.text{max-width:44em}
.wrap.text{max-width:none}
.wrap.text>*{max-width:44em}
.text p+p{margin-top:1.1em}
.zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,7vw,6rem);align-items:center}
@media(max-width:800px){.zweispalt{grid-template-columns:1fr}}

/* ================= MÄRKTE ================= */
.maerkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(2rem,4vw,3.4rem)}
.markt{background:var(--papier);border:1px solid var(--linie);display:flex;flex-direction:column}
.markt-bild{aspect-ratio:3/2;background:var(--sand);overflow:hidden;position:relative}
.markt-bild.leer{display:none}
.markt-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.markt-inhalt{padding:clamp(1.5rem,3vw,2.2rem);display:grid;gap:.9rem;align-content:start;flex:1}
.markt .datum{font-family:var(--schnoerkel);font-style:italic;font-size:1.5rem;color:var(--akzent);line-height:1.2}
.markt dl{display:grid;gap:.35rem;font-size:.95rem}
.markt dl div{display:grid;grid-template-columns:3.2rem 1fr;gap:.6rem}
.markt dt{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--braun-mittel);padding-top:.3rem}
.markt .aktionen{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:.4rem;align-items:center}
.markt iframe,.karte-map iframe{width:100%;height:280px;border:0;margin-top:.6rem;filter:sepia(.25)}
.hinweis{font-size:.85rem;color:#7a6657}

/* ================= BLOG / GALERIE ================= */
.beitraege{display:grid;gap:clamp(4rem,9vw,7rem)}
.beitrag{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.beitrag.umgekehrt{grid-template-columns:.85fr 1.15fr}
.beitrag.umgekehrt .beitrag-bilder{order:2}
.beitrag-bilder{display:grid;gap:.8rem}
.beitrag .bildbox{cursor:zoom-in}
.beitrag .bildbox img{transition:transform .6s}
.beitrag .bildbox:hover img{transform:scale(1.03)}
.miniaturen{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.7rem}
.miniaturen .bildbox{aspect-ratio:1}
.beitrag .datum{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--akzent);margin-bottom:.7rem;display:block}
.beitrag h2{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.beitrag p{color:#4b3d34}
.beitrag p+p{margin-top:1em}
@media(max-width:800px){.beitrag,.beitrag.umgekehrt{grid-template-columns:1fr}.beitrag.umgekehrt .beitrag-bilder{order:0}}
.lightbox{position:fixed;inset:0;background:rgba(36,26,20,.95);display:none;place-items:center;z-index:100;padding:1rem}
.lightbox.an{display:grid}
.lightbox figure{max-width:960px;color:#f1e7da;text-align:center}
.lightbox img{max-height:78vh;margin:auto}
.lightbox figcaption{margin-top:1rem;font-family:var(--schnoerkel);font-style:italic;font-size:1.4rem}
.lightbox button{position:absolute;top:1.2rem;right:1.4rem;background:none;color:#f1e7da;border:1px solid rgba(255,255,255,.4);width:42px;height:42px;font-size:1.4rem;cursor:pointer}

/* ================= FORMULAR ================= */
.anfrage-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2.5rem,7vw,6rem);align-items:start}
@media(max-width:800px){.anfrage-wrap{grid-template-columns:1fr}}
form.anfrage{display:grid;gap:1.8rem}
label{display:block;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--braun-mittel);margin-bottom:.2rem}
input,select,textarea{width:100%;padding:.7rem 0;border:0;border-bottom:1px solid var(--braun-mittel);background:transparent;font:inherit;color:var(--ink);border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--akzent)}
textarea{min-height:150px;resize:vertical;border:1px solid var(--linie);padding:.8rem;margin-top:.4rem}
.seitenleiste{border-left:1px solid var(--linie);padding-left:clamp(1.5rem,4vw,3rem)}
.seitenleiste h3{margin-bottom:.6rem}
@media(max-width:800px){.seitenleiste{border-left:0;padding-left:0}}

/* ================= FUSS & ICONS ================= */
.fuss{background:var(--braun-dunkel);color:#d9cbbb;padding:clamp(3.5rem,7vw,5rem) 0 1.6rem}
.fuss .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.4rem}
.fuss h3{font-family:var(--sans);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:#a98f78;margin-bottom:1rem}
.fuss .fuss-logo{font-family:var(--schnoerkel);font-style:italic;font-size:2.3rem;color:#f1e7da;line-height:1.1;margin-bottom:.5rem}
.fuss a{color:#f1e7da;text-decoration-color:rgba(241,231,218,.35)}
.fuss a:hover{color:#e0b5a5}
.social{display:flex;gap:1.2rem}
.social a{display:grid;place-items:center;width:30px;height:30px;color:#f1e7da;transition:.25s}
.social a:hover{color:#e0b5a5;transform:translateY(-2px)}
.social svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:1.3rem;font-size:.8rem;letter-spacing:.06em;color:#a98f78}
.copy a{color:#d9cbbb}

/* ================= ERGÄNZUNGEN ================= */
/* Fehlende Bilder verschwinden einfach */
.leer{display:none!important}
.beitrag.ohne{grid-template-columns:1fr!important;max-width:44em;margin-inline:auto}
.beitrag.ohne .beitrag-bilder{display:none}
.rahmen[hidden]{display:none}
.inhaber .wrap:not(:has(.rahmen:not([hidden]))){grid-template-columns:1fr;max-width:44em}

/* Diashow */
.diashow{padding:0 0 clamp(3rem,8vw,6rem)}
.diashow[hidden]{display:none}
.dia-rahmen{position:relative;aspect-ratio:16/9;max-height:72vh;width:100%;background:var(--sand);overflow:hidden}
.dia-bahn{position:absolute;inset:0}
.dia{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s}
.dia.an{opacity:1}
.dia img{width:100%;height:100%;object-fit:cover}
.dia figcaption{position:absolute;left:0;right:0;bottom:0;padding:3rem 1.6rem 3rem;background:linear-gradient(transparent,rgba(36,26,20,.75));color:#f1e7da;font-family:var(--schnoerkel);font-style:italic;font-size:clamp(1.2rem,2.6vw,1.7rem);line-height:1.2}
.dia-pfeil{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:1px solid rgba(255,255,255,.55);background:rgba(36,26,20,.35);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;z-index:2;transition:.25s}
.dia-pfeil:hover,.dia-pfeil:focus-visible{background:rgba(36,26,20,.75)}
.dia-zurueck{left:1rem}.dia-vor{right:1rem}
.dia-punkte{position:absolute;bottom:1.1rem;left:0;right:0;display:flex;justify-content:center;gap:.7rem;z-index:2}
.dia-punkte button{width:11px;height:11px;border-radius:50%;border:1px solid #fff;background:transparent;padding:0;cursor:pointer}
.dia-punkte button.an{background:#fff}
.diashow.einzel .dia-pfeil,.diashow.einzel .dia-punkte{display:none}
@media(max-width:600px){.dia-rahmen{aspect-ratio:4/3}.dia-pfeil{width:38px;height:38px}}

/* Stand-Galerie auf der Märkte-Seite */
.stand{background:var(--papier);border-top:1px solid var(--linie)}
.stand[hidden]{display:none}
.stand-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:1rem;margin-top:2.4rem}
.stand-bild{position:relative;aspect-ratio:4/3;overflow:hidden;border:0;padding:0;background:var(--sand);cursor:zoom-in}
.stand-bild:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.stand-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.stand-bild:hover img{transform:scale(1.04)}
.stand-bild span{position:absolute;left:0;right:0;bottom:0;padding:2rem 1rem .8rem;background:linear-gradient(transparent,rgba(36,26,20,.78));color:#f1e7da;font-size:.85rem;line-height:1.4;text-align:left;opacity:0;transition:opacity .3s}
.stand-bild:hover span,.stand-bild:focus-visible span{opacity:1}
@media(max-width:600px){.stand-bild:first-child{grid-column:auto;grid-row:auto;aspect-ratio:4/3}.stand-bild span{opacity:1}}

/* Impressum */
.imp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
@media(max-width:800px){.imp-grid{grid-template-columns:1fr}}
.imp-karte{background:var(--papier);border:1px solid var(--linie);padding:clamp(1.6rem,4vw,2.8rem)}
.imp-karte h2{font-size:1.9rem;margin-bottom:1rem}
.imp-karte h3{font-family:var(--sans);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--braun-mittel);margin:1.8rem 0 .4rem}
.imp-name{font-family:var(--anzeige);font-size:1.5rem;color:var(--braun)}
.karte-map{margin:1rem 0 1.4rem}
.karte-map:empty{min-height:260px;display:grid;place-items:center;background:var(--sand);border:1px dashed var(--braun-mittel)}
.karte-map:empty::before{content:"Karte wird erst nach Klick geladen";font-family:var(--schnoerkel);font-style:italic;color:var(--braun-mittel);font-size:1.3rem}
.karte-map iframe{height:320px;margin-top:0}

/* Datenschutz */
.recht{max-width:46em}
.recht h2{font-size:1.6rem;margin:2.4rem 0 .6rem}
.recht h2:first-child{margin-top:0}
.recht p+p{margin-top:.8em}
.recht .fehlt{background:#f3e0d8;padding:0 .3em}

/* Seitenbilder: Banner + Bilderleiste */
.banner{display:block;margin-top:clamp(2rem,5vw,3.5rem)}
.banner img{width:100%;aspect-ratio:21/9;max-height:60vh;object-fit:cover}
.banner figcaption{margin-top:.7rem;font-family:var(--schnoerkel);font-style:italic;color:var(--braun-mittel);font-size:1.2rem;text-align:center}
.leiste{padding:clamp(2.5rem,6vw,4rem) 0 clamp(3rem,8vw,6rem)}
.leiste-raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem}
.leiste-bild{border:0;padding:0;background:var(--sand);aspect-ratio:4/3;overflow:hidden;cursor:zoom-in}
.leiste-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.leiste-bild:hover img{transform:scale(1.04)}