/* ==========================================================
   Sebastian Erdmann · Malerarbeiten Naumburg
   Statischer Nachbau nach PDF-Masterlayout (Desktop 1440 px)
   ========================================================== */

/* ---------- Schrift (lokal, keine Verbindung zu Google) ---------- */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/roboto-300.woff") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-400.woff") format("woff"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-500.woff") format("woff"); }

:root {
  --lila: #8d1cb4;
  --grau: #727272;
  --hellgrau: #edebec;
  --text: #2e2e2e;
  --headline-grau: #7f7f7f;
  --weiss: #ffffff;
  --fliesstext: 13px;          /* Vorgabe: Fließtext Desktop 13 px */
  --zeile: 1.55;
  --inhalt: 740px;             /* Textspalte laut Layout (x 350–1090) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--weiss);
  color: var(--text);
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: var(--fliesstext);
  line-height: var(--zeile);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 0 0 auto; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 10px; }
h1, h2, h3 { font-weight: 400; margin: 0; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--lila); color: #fff; padding: 8px 14px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }

.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Kopfbereich ---------- */
.site-header {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 13px;
  background: var(--weiss);
}
.site-header img { width: 191px; height: 122px; object-fit: cover; }

/* ---------- Hero (Startseite) ---------- */
.hero {
  position: relative;
  height: 364px;
  background: #999 url("../img/maler-naumburg-titelbild.jpg") center 49% / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.hero h1 {
  position: relative;
  max-width: 700px;
  padding: 0 20px;
  margin-top: 1px;
  color: #fff;
  font-size: 50px;
  line-height: 53px;
  font-weight: 400;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

/* ---------- Seitentitel-Band (Impressum / Datenschutz) ---------- */
.page-banner {
  height: 105px;
  background: var(--lila);
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-banner h1 { color: #fff; font-size: 40px; line-height: 1; padding-bottom: 2px; }

/* ---------- Einleitung ---------- */
.intro { background: var(--hellgrau); }
.intro__inner {
  width: var(--inhalt);
  margin: 0 auto;
  padding: 54px 0 25px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.intro__text { width: 510px; }
.intro h2 {
  color: var(--lila);
  font-size: 26px;
  line-height: 27px;
  margin-bottom: 19px;
}
.intro p { margin: 0; }
.intro__sticker { width: 180px; margin: 4px 10px 0 0; }
.intro__sticker img { width: 180px; transition: transform .5s ease; }
.intro__sticker img:hover { transform: rotate(-15deg); }

/* ---------- Leistungen ---------- */
.leistungen { position: relative; background: var(--weiss); padding: 40px 0 0; }
.leistungen::before {             /* Pfeil-Trenner unter grauem Bereich */
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 64px; height: 20px;
  transform: translateX(-50%);
  background: var(--hellgrau);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.leistungen h2 {
  text-align: center;
  color: var(--lila);
  font-size: 21px;
  line-height: 24px;
  margin-bottom: 17px;
}
.leistungen ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: var(--inhalt);
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 13px;
  column-gap: 20px;
}
.leistungen li { display: flex; align-items: center; gap: 6px; padding-left: 10px; line-height: 20px; }
.leistungen li .icon { width: 20px; height: 20px; color: var(--lila); }

/* ---------- Farbe ist unsere Leidenschaft ---------- */
.claim { padding: 78px 0 45px; text-align: center; }
.claim h2 {
  display: inline-block;
  color: var(--headline-grau);
  font-size: 29px;
  line-height: 34px;
}
.highlight { position: relative; display: inline-block; z-index: 0; }
.highlight svg {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(100% + 26px);
  height: calc(100% + 28px);
  transform: translate(-50%, -50%);
  overflow: visible;
  z-index: -1;
  pointer-events: none;
}
.highlight path {
  fill: none;
  stroke: var(--lila);
  stroke-width: 9;
  stroke-opacity: .16;
  filter: blur(2px);
  stroke-dasharray: 1500;
  stroke-dashoffset: 0;
}
.js .highlight path { animation: marker 9.2s ease-in-out infinite; }
@keyframes marker {
  0%      { stroke-dashoffset: 1500; }
  13%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}

/* ---------- Referenzbilder ---------- */
.galerie { background: var(--hellgrau); padding: 46px 0 46px; }
.galerie__inner {
  width: 1142px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  min-height: 164px;
}
.galerie figure { margin: 0; }
.galerie img { width: 198px; }
.galerie figure:nth-child(1) img { margin-right: auto; }
.galerie figure:nth-child(2) img { margin: 0 auto; }
.galerie figure:nth-child(3) img { margin-left: auto; }

/* ---------- Kontakt-Boxen ---------- */
.kontakt { padding: 53px 0 0; }
.kontakt__inner {
  width: 741px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}
.box {
  position: relative;
  min-height: 158px;
  background: var(--grau);
  color: #fff;
  text-align: center;
  padding: 21px 14px 18px;
}
.box__icon {
  position: absolute;
  left: 50%; top: 0;
  width: 38px; height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--lila);
  border: 2px solid #fff;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.box__icon .icon { width: 18px; height: 18px; }
.box h3 {
  font-size: 15.5px;
  line-height: 24px;
  margin: 0 0 10px;
}
.box h3 a, .box h3 span { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.box p { margin: 0; line-height: 17px; }
.box a { color: #fff; }
.box a:hover { color: #f3d6ff; }

/* ---------- Naumburg-Link + Karte ---------- */
.stadtlink { text-align: center; padding: 58px 20px 12px; }
.stadtlink a {
  color: var(--lila);
  font-size: 24px;
  line-height: 28px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.stadtlink a:hover { color: #6b1189; }
.karte { max-width: 1264px; margin: 0 auto; padding-bottom: 99px; }
.karte a { display: block; position: relative; }
.karte img { width: 100%; }
.karte__hinweis {
  position: absolute; right: 12px; bottom: 26px;
  background: var(--lila); color: #fff; font-size: 12px; line-height: 1;
  padding: 7px 10px; border-radius: 3px; text-decoration: none;
  opacity: 0; transition: opacity .2s;
}
.karte a:hover .karte__hinweis, .karte a:focus .karte__hinweis { opacity: 1; }

/* ---------- Textseiten ---------- */
.textseite { width: var(--inhalt); margin: 0 auto; padding: 50px 0 15px; line-height: 1.45; }
.textseite h2 { color: var(--lila); font-size: 27px; line-height: 32px; margin: 0 0 10px; }
.textseite p { margin: 0 0 10px; }
.textseite ul { margin: 0 0 0; padding-left: 26px; }
.textseite ul + p { margin-top: 0; }
.textseite li { margin: 0; }
.textseite a { color: #c3205d; text-decoration: none; word-break: break-word; }
.textseite a:hover { text-decoration: underline; }
.textseite .abstand-oben { margin-top: 24px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--grau); color: #fff; font-size: 12px; }
.site-footer__inner {
  width: 754px;
  margin: 0 auto;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-footer nav { display: flex; height: 100%; margin-right: -12px; }
.site-footer nav a {
  display: flex; align-items: center;
  padding: 0 13px;
  color: #fff; text-decoration: none;
}
.site-footer nav a:hover, .site-footer nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--lila); }
.site-footer nav a:hover { text-decoration: none; color: #f3d6ff; }

.footer-band { background: var(--hellgrau); flex: 1 0 49px; min-height: 49px; }

/* ---------- Kontaktleiste (fixiert, unten mittig) ---------- */
.kontaktleiste {
  position: fixed;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; gap: 0;
  height: 45px;
  padding: 0 12px;
  background: var(--lila);
  border-radius: 8px 8px 0 0;
  font-size: 12px;
  white-space: nowrap;
}
.kontaktleiste a { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; padding: 0 8px; height: 100%; }
.kontaktleiste a:hover { text-decoration: underline; }
.kontaktleiste .icon { width: 19px; height: 19px; }

/* ---------- Einblend-Animation (nur mit JS, respektiert reduzierte Bewegung) ---------- */
.js [data-anim] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js [data-anim].sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-anim] { opacity: 1; transform: none; transition: none; }
  .js .highlight path { animation: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================
   Tablet
   ========================================================== */
@media (max-width: 1180px) {
  .galerie__inner { width: auto; padding: 0 30px; }
}
@media (max-width: 1024px) {
  .karte { padding: 0 0 70px; }
}

/* ==========================================================
   Mobil
   ========================================================== */
@media (max-width: 800px) {
  :root { --fliesstext: 14px; }
  .site-header { height: auto; padding: 12px 0; }
  .site-header img { width: 160px; height: 102px; }

  .hero { height: 300px; }
  .hero h1 { font-size: 32px; line-height: 38px; }

  .page-banner { height: 84px; }
  .page-banner h1 { font-size: 30px; }

  .intro__inner, .textseite, .leistungen ul, .kontakt__inner, .site-footer__inner { width: auto; }
  .intro__inner { flex-direction: column; align-items: center; padding: 36px 16px 30px; }
  .intro__text { width: auto; }
  .intro h2 { font-size: 22px; line-height: 27px; }
  .intro__sticker { margin: 24px auto 0; width: 160px; }
  .intro__sticker img { width: 160px; }

  .leistungen h2 { font-size: 20px; padding: 0 16px; }
  .leistungen ul { grid-template-columns: 1fr; padding: 0 16px; width: fit-content; max-width: 100%; }
  .leistungen li { padding-left: 0; }

  .claim { padding: 44px 16px 34px; }
  .claim h2 { font-size: 24px; line-height: 30px; }

  .galerie { padding: 34px 16px; }
  .galerie__inner { grid-template-columns: 1fr; gap: 20px; padding: 0; }
  .galerie img, .galerie figure:nth-child(n) img { width: 100%; max-width: 360px; margin: 0 auto; }

  .kontakt { padding: 46px 16px 0; }
  .kontakt__inner { grid-template-columns: 1fr; row-gap: 40px; max-width: 420px; }
  .box { min-height: 0; padding-bottom: 22px; }

  .stadtlink { padding: 40px 16px 14px; }
  .stadtlink a { font-size: 19px; line-height: 26px; }
  .karte { padding-bottom: 40px; }
  .karte img { height: 260px; object-fit: cover; object-position: 50% 50%; }
  .karte__hinweis { opacity: 1; bottom: 12px; }

  .textseite { padding: 34px 16px 10px; }
  .textseite h2 { font-size: 24px; }

  .site-footer__inner { height: auto; flex-direction: column; padding: 14px 16px 6px; text-align: center; gap: 6px; }
  .site-footer nav { margin: 0; height: 34px; }
}
.textseite a.plain { color: inherit; }