/*
 * Schneiderkunst — app.css
 * Galerie-Auftritt für kirstenschneider.info — gleiche Naturpalette wie schneiderpuschen.de.
 */

/* ══════════════════════════════════════════════════════════════════════════════
   LOKALE FONTS
   ══════════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Liberation Serif";
  src: url("/assets/fonts/LiberationSerif-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Liberation Serif";
  src: url("/assets/fonts/LiberationSerif-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Liberation Serif";
  src: url("/assets/fonts/LiberationSerif-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Liberation Sans";
  src: url("/assets/fonts/LiberationSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Liberation Sans";
  src: url("/assets/fonts/LiberationSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   DESIGN-TOKENS
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --color-cream:       #f5f0e8;
  --color-cream-dark:  #ede5d4;
  --color-terra:       #b85c38;
  --color-terra-dark:  #8e4229;
  --color-sage:        #6b8f71;
  --color-sage-dark:   #4f6b54;
  --color-brown:       #2e1f14;
  --color-brown-mid:   #5a3e2b;
  --color-brown-light: #8b6b52;
  --color-white:       #ffffff;

  --font-serif: "Liberation Serif", Georgia, "Times New Roman", serif;
  --font-sans:  "Liberation Sans", Helvetica, Arial, sans-serif;

  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-xxl: 5rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;

  --shadow-sm: 0 1px 3px rgba(46,31,20,.12);
  --shadow-md: 0 4px 16px rgba(46,31,20,.14);
}

/* ══════════════════════════════════════════════════════════════════════════════
   BASIS
   ══════════════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-cream);
  color: var(--color-brown);
}

h1, h2, h3 { font-family: var(--font-serif); margin: 0 0 var(--space-md); }

a { color: var(--color-terra); }
a:hover { color: var(--color-terra-dark); }

.site-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-lg) var(--space-xxl);
}

/* ══════════════════════════════════════════════════════════════════════════════
   HEADER / NAV / FOOTER
   ══════════════════════════════════════════════════════════════════════════════ */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  max-width: 1100px;
  margin: 0 auto;
}

.brand {
  text-decoration: none;
  color: var(--color-brown);
  font-family: var(--font-serif);
  font-size: 1.3rem;
}
.brand__accent { color: var(--color-terra); }

.site-nav { display: flex; gap: var(--space-lg); }
.site-nav a {
  text-decoration: none;
  color: var(--color-brown-mid);
  font-weight: 600;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--color-terra); }

.site-footer {
  text-align: center;
  padding: var(--space-lg);
  font-size: .85rem;
  color: var(--color-brown-mid);
}
.site-footer__links { display: flex; gap: var(--space-md); justify-content: center; margin-bottom: var(--space-sm); }
.site-footer__links a { text-decoration: none; color: var(--color-brown-mid); }
.site-footer__links a:hover { color: var(--color-terra); }

/* ══════════════════════════════════════════════════════════════════════════════
   FLASH-MELDUNGEN
   ══════════════════════════════════════════════════════════════════════════════ */

.flash {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}
.flash--success { background: var(--color-sage); color: var(--color-white); }
.flash--error   { background: var(--color-terra-dark); color: var(--color-white); }

/* ══════════════════════════════════════════════════════════════════════════════
   HERO / SECTIONS
   ══════════════════════════════════════════════════════════════════════════════ */

.home-hero {
  text-align: center;
  padding: var(--space-xxl) var(--space-lg);
}
.home-hero__eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  color: var(--color-terra);
  margin-bottom: var(--space-sm);
}
.home-hero__title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  margin-bottom: var(--space-md);
}
.home-hero__subtitle {
  max-width: 560px;
  margin: 0 auto;
  color: var(--color-brown-mid);
  line-height: 1.6;
}

.home-section { padding: var(--space-xl) 0; }
.home-section__inner { max-width: 1100px; margin: 0 auto; }
.home-section__header { text-align: center; margin-bottom: var(--space-xl); }
.home-section__eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  color: var(--color-terra);
  margin-bottom: var(--space-sm);
}
.home-section__title { font-size: clamp(1.4rem, 3vw, 2rem); }

.stitch-divider {
  display: flex;
  justify-content: center;
  margin: var(--space-md) 0;
}
.stitch-divider__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-terra);
}

/* ══════════════════════════════════════════════════════════════════════════════
   GALERIE
   ══════════════════════════════════════════════════════════════════════════════ */

.kunst-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
}
.kunst-galerie__item {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--color-white);
  transition: box-shadow .2s, transform .2s;
}
.kunst-galerie__item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.kunst-galerie__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══════════════════════════════════════════════════════════════════════════════
   KONTAKTFORMULAR
   ══════════════════════════════════════════════════════════════════════════════ */

.kontakt-page { padding: var(--space-xl) 0; }
.page-lead { color: var(--color-brown-mid); max-width: 600px; }

.kontakt-grid { max-width: 560px; }

.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.kontakt-form label { font-weight: 600; margin-top: var(--space-sm); }
.kontakt-form input,
.kontakt-form textarea {
  font: inherit;
  padding: var(--space-sm);
  border: 1px solid var(--color-cream-dark);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.pflicht { color: var(--color-terra); }
.kontakt-form__pflicht-hinweis { font-size: .8rem; color: var(--color-brown-mid); }

.kontakt-cta {
  display: inline-block;
  align-self: flex-start;
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-terra);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s;
}
.kontakt-cta:hover { background: var(--color-terra-dark); color: var(--color-white); }

.btn-more {
  display: inline-block;
  text-decoration: none;
  color: var(--color-terra);
  font-weight: 600;
}
.btn-more:hover { color: var(--color-terra-dark); }

/* ══════════════════════════════════════════════════════════════════════════════
   RECHTSTEXTE / FEHLERSEITEN
   ══════════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════
   VITA
   ══════════════════════════════════════════════════════════════════════════════ */

.vita-page { padding: var(--space-xl) 0; max-width: 720px; }
.vita-page h2 { margin-top: var(--space-xl); font-size: 1.15rem; }

.vita-lauf { margin-bottom: var(--space-xl); }

.vita-timeline {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  border-left: 2px solid var(--color-terra);
}
.vita-timeline li {
  position: relative;
  padding: var(--space-xs) 0 var(--space-md) var(--space-lg);
}
.vita-timeline li::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-terra);
}
.vita-timeline__year {
  display: inline-block;
  min-width: 3rem;
  font-weight: 700;
  color: var(--color-terra);
  margin-right: var(--space-sm);
}

.vita-body p { line-height: 1.7; margin-bottom: var(--space-md); }

.legal-page { padding: var(--space-xl) 0; max-width: 720px; }
.legal-page h2 { margin-top: var(--space-xl); font-size: 1.15rem; }

.error-page { text-align: center; padding: var(--space-xxl) 0; }