:root{
  --max-width:1100px;
  --accent:#8B5E3C;
  --text:#111;
  --muted:#666;
  --gap:1.2rem;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body{margin:0;color:var(--text);background:#fff;line-height:1.45}
.container{max-width:var(--max-width);margin:0 auto;padding:2rem}

.site-header{border-bottom:1px solid #eee}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem}
.logo a{font-weight:600;text-decoration:none;color:inherit}
.main-nav a{margin-left:1rem;text-decoration:none;color:var(--text);font-weight:500}

/* Hero */
.hero{position: relative; padding:3rem 0;text-align:center}
.hero .lead{color:var(--muted)}
.hero img{width: 100%; height: auto; display: block}
.hero-text {position: absolute; top: clamp(15%, 22vw, 30%); left: 50%; transform: translateX(-50%); width:min(90%, 800px); color: #222; text-align: center; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(3px); padding: clamp(0.8rem, 2vw, 1.5rem) clamp(1rem, 4vw, 2rem); border-radius: 8px; line-height:1.5}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card img{width:100%;height:auto;display:block}
.card h3{margin:.5rem 0 0}

/* Gallery */
.gallery-series {
  margin-bottom: 3rem;
}

.gallery-series h2 {
  margin-bottom: 1rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  justify-items: start;
  justify-content: start;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem
}

.artwork {
  justify-self: start; 
  margin: 0;
  max-width: 360px; 
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius:8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2 ease;
}

.artwork:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.artwork img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}

.artwork h3 {
  margin: 0.5rem 0 0.25rem;
  font-size: 1rem;
}

.artwork p {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0 1rem 0.5rem;
}

.artwork .sold {
  background: #999;
  color: white;
  border: none;
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.for-sale {
  margin: 0.6rem 1rem;
  color: var(--accent);
  font-weight: 600;
}

.btn {
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 0.8rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 1rem 1rem;
}

/* artworks für startseite */
.featured-artworks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  justify-content: start;
  justify-items: start;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
}

.featured-artwork {
  max-width: 360px;
  justify-self: start;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.featured-artwork img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px 6px 0 0;
}

/* About page split */
.page-grid{display:flex;gap:2rem;align-items:flex-start}
.page-image{flex:1 1 40%; margin-top: 5rem}
.page-image img{width:100%;height:auto;display:block}
.page-content{flex:1 1 60%; line-hight: 1.7; font-size: 1rem; color: #222}
.page-content{text-align: justify; hyphens: auto; margin-bottom: 1.2rem}

/* Footer */
.site-footer{border-top:1px solid #eee;padding:1.2rem 0;text-align:center;color:var(--muted);font-size:.9rem}

/* Responsive */
@media (max-width:800px){
  .page-grid{flex-direction:column; padding-top: 0.5rem}
  .page-image{margin-top: 0}
  .site-header .container{padding:1rem}
}

@media (min-width:1200px){
  .gallery-grid {
    grid-template-columns: repeat(3, max-content);
  }
}

/* --- Fließtext-Formatierung (Blocksatz & Lesbarkeit) --- */
.page-content {
  line-height: 1.7;          /* Angenehmer Zeilenabstand */
  font-size: 1rem;           /* Einheitliche Schriftgröße */
  color: #222;               /* Dunkles, gut lesbares Grau */
}

.page-content p {
  text-align: justify;       /* Blocksatz */
  hyphens: auto;             /* Automatische Silbentrennung */
  margin-bottom: 1.2rem;     /* Abstand zwischen Absätzen */
}

/* Überschriften bleiben linksbündig */
.page-content h1,
.page-content h2,{
  text-align: left;
  margin-top: 1.5rem;
  margin-bottom: 0.8rem;
}

/* Zitate oder Listen ebenfalls etwas luftiger */
.page-content blockquote,
.page-content ul,
.page-content ol {
  margin-bottom: 1.5rem;
}

/* footer*/
.social-links a {
  margin-right: 12px;
  font-size: 1.6rem;
  color: #444;
  text-decoration: none;
}

.social-links a:hover {
  color: #000;
}

.site-footer {
  padding: 2rem 1rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

.site-footer a {
  color: #666;
  margin: 0 10px;
  text-decoration: none;
}

.site-footer a:hover {
  color: #000;
}

/* newsletter button*/
.btn-newsletter {
  padding: 0.6rem 1.2rem;
  background: black;
  color: white;
  border-radius: 4px;
  text-decoration: none;
}

/* Standard-Linkfarbe */
a {
  color: #c46b2d;   /* dunkles Orange (anpassbar) */
  text-decoration: none;
}

/* Hover (Maus drüber) */
a:hover {
  color: #9f551b;   /* etwas dunkleres Orange */
  text-decoration: underline; /* optional */
}

/* Wenn der Link schon besucht wurde */
a:visited {
  color: #7d4316;   /* noch dunkler */
}