/* Base */
body{font-family:Arial,sans-serif;margin:0;background:#f5f0e6;color:#000}
header{background:#8b5e3c;color:#fff;padding:1rem;text-align:center}
nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:0}
nav a{color:#fff;text-decoration:none;font-weight:bold}
nav a:hover{text-decoration:underline}
main{padding:2rem;text-align:center}

/* Kategorien: mobile-first => 1 Spalte */
.kategorien{display:grid;grid-template-columns:1fr;gap:1rem;justify-items:center}
.kategorien a{display:block;width:100%;max-width:560px;text-align:center;background:#fff8f0;border-radius:12px;padding:1rem;box-shadow:0 2px 6px rgba(0,0,0,.15);transition:transform .2s,box-shadow .2s;color:#000}
.kategorien a img{width:100%;height:220px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;display:block;margin:0 auto .5rem}
.kategorien a:hover{transform:scale(1.03);box-shadow:0 4px 12px rgba(0,0,0,.25)}

.content-image{width:min(720px,95%);height:auto;border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.15);margin:1rem auto 0;display:block}
.kontakt-box{background:#fff8f0;border:2px solid #8b5e3c;border-radius:12px;padding:1.5rem;margin:2rem auto;max-width:420px;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.mail-link{font-size:1.2rem;color:#8b5e3c;font-weight:bold;text-decoration:none}
.mail-link:hover{text-decoration:underline;color:#5a3b25}
footer{background:#5a3b25;color:#fff;text-align:center;padding:1rem;margin-top:2rem}

/* Breakpoints: >=640px => 2 Spalten, >=900px => 3, >=1200px => 4 */
@media (min-width:640px){ .kategorien{grid-template-columns:repeat(2,minmax(240px,1fr))} .kategorien a{max-width:100%} }
@media (min-width:900px){ .kategorien{grid-template-columns:repeat(3,minmax(240px,1fr))} }
@media (min-width:1200px){ .kategorien{grid-template-columns:repeat(4,minmax(240px,1fr))} }

/* Touch-Optimierung (zusätzlich zur Breite): kein Hover-Zoom und bessere Tap-Ziele */
@media (hover:none) and (pointer:coarse){
  .kategorien a:hover{transform:none;box-shadow:0 2px 6px rgba(0,0,0,.15)}
  nav a{padding:.75rem 1rem}
  a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,.1)}
}