/* Eduard Kröll – Platten- und Fliesenverlegung
   One stylesheet, system fonts, one page background. */

/* --- tokens ---------------------------------------------------------------- */
:root {
  --oxblood: #7a2e2e;
  --oxblood-ink: #2a1818;
  --paper: #f6f1e8;
  --rule: #d7c5ac;
  --grout-dark: #3a221c;
  --mute: #6b4a3a;
  --text: #1a1210;
  --on-dark: #f6f1e8;
  --on-dark-mute: #d8b8a2;
  --on-oxblood-mute: #f0d9cc;

  --f-serif: "Charter", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --f-sans: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* scale 1.2 on a 17px (mobile) / 18px (desktop) base */
  --t-label: 0.875rem;
  --t-1: 1rem;
  --t-2: 1.2rem;
  --t-3: 1.44rem;
  --t-4: 1.728rem;
  --t-7: 2.986rem;

  /* 4px grid */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;
  --sp-80: 80px;

  --gutter: 20px;
  --section: var(--sp-48);
  --bild: 78vw;
}

@media (min-width: 600px)  { :root { --bild: 42vw; } }
@media (min-width: 768px)  { :root { --gutter: 32px; --section: var(--sp-80); } }
@media (min-width: 900px)  { :root { --bild: 30vw; } }
@media (min-width: 1120px) { :root { --gutter: 48px; } }
@media (min-width: 1280px) { :root { --bild: 24vw; } }
@media (min-width: 1440px) { :root { --gutter: 64px; } }
@media (min-width: 1920px) { :root { --gutter: 96px; --bild: 20vw; } }

/* --- base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 17px; -webkit-text-size-adjust: 100%; }
@media (min-width: 768px) { html { font-size: 18px; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--f-serif);
  font-size: var(--t-1);
  line-height: 1.6;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: var(--oxblood); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }

.shell {
  width: 100%;
  padding-inline: var(--gutter);
}

/* --- Fuge: the grout line under links, labels and captions ------------------ */
.fuge {
  background-image: linear-gradient(var(--oxblood), var(--oxblood));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding-bottom: 4px;
}

/* --- header band ----------------------------------------------------------- */
.bar {
  background: var(--oxblood-ink);
  color: var(--on-dark);
  border-bottom: 3px solid var(--oxblood);
}
.bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
  padding-block: var(--sp-16);
}
.bar__brand {
  display: inline-flex;
  flex-direction: column;
  color: var(--on-dark);
  line-height: 1.15;
}
.bar__name {
  font-size: var(--t-2);
  font-weight: 700;
}
.bar__sub {
  margin-top: 2px;
  font-family: var(--f-sans);
  font-size: var(--t-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.bar__where { display: none; }
@media (min-width: 480px) { .bar__where { display: inline; } }

/* --- call buttons: they never move, the colour changes at once -------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 48px;
  padding: var(--sp-8) var(--sp-16);
  border: 2px solid var(--paper);
  background: transparent;
  color: var(--on-dark);
  font-family: var(--f-sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
.pill__icon, .btn__icon { display: inline-flex; }
.pill:hover,
.pill:focus-visible {
  background: var(--paper);
  color: var(--oxblood-ink);
}
.pill__num { display: none; }
@media (min-width: 520px) {
  .pill__short { display: none; }
  .pill__num { display: inline; }
}
.pill--light {
  background: var(--paper);
  color: var(--oxblood-ink);
}
.pill--light:hover,
.pill--light:focus-visible {
  background: var(--oxblood-ink);
  border-color: var(--oxblood-ink);
  color: var(--on-dark);
}
.pill--light .pill__short { display: none; }
.pill--light .pill__num { display: inline; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-12);
  min-height: 56px;
  padding: var(--sp-12) var(--sp-24);
  background: var(--oxblood);
  color: var(--on-dark);
  font-family: var(--f-sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.btn:hover,
.btn:focus-visible {
  background: var(--oxblood-ink);
}
.btn__body { display: inline-flex; flex-direction: column; align-items: flex-start; }
.btn__label {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-oxblood-mute);
}
.btn__num { font-size: var(--t-2); }

/* --- hero ------------------------------------------------------------------ */
.hero { padding-bottom: var(--sp-24); }
.hero__row {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-16);
}
.hero__text { min-width: 0; }

.brow {
  margin-bottom: var(--sp-16);
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}

.hero__h1 {
  margin-bottom: var(--sp-16);
  font-size: clamp(var(--t-4), 1.2rem + 2.2vw, var(--t-7));
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero__name, .hero__mark { display: block; }
.hero__mark { color: var(--oxblood); }

.hero__lead {
  max-width: 40ch;
  margin-bottom: var(--sp-16);
  font-size: clamp(var(--t-1), 0.9rem + 0.5vw, var(--t-2));
  line-height: 1.5;
  text-wrap: balance;
}
.hero__cta { margin-bottom: var(--sp-12); }
.hero__meta {
  font-family: var(--f-sans);
  color: var(--mute);
}

/* On phones the photo runs as a tiled band under the header; from 900px it
   stands beside the text. Nothing is ever drawn on top of it. */
.hero__photo {
  width: calc(100% + 2 * var(--gutter));
  margin-inline: calc(-1 * var(--gutter));
}
.hero__photo img {
  width: 100%;
  aspect-ratio: 4 / 1;
  object-fit: cover;
  border-bottom: 1px solid var(--rule);
}
.hero__photo .photo-caption {
  padding-inline: var(--gutter);
  line-height: 1.5;
}
@media (min-width: 600px) {
  .hero { padding-bottom: var(--sp-32); }
  .hero__row { gap: var(--sp-24); }
  .hero__photo img { aspect-ratio: 3 / 1; }
}

@media (min-width: 900px) {
  .hero { padding-block: var(--sp-80); }
  .hero__row {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: var(--sp-48);
  }
  .hero__text { flex: 1 1 0; }
  .brow { margin-bottom: var(--sp-24); }
  .hero__h1 { margin-bottom: var(--sp-24); }
  .hero__lead { margin-bottom: var(--sp-32); }
  .hero__cta { margin-bottom: var(--sp-16); }
  .hero__photo {
    flex: 0 0 46%;
    width: 46%;
    margin-inline: 0;
  }
  .hero__photo img {
    aspect-ratio: 4 / 3;
    border: 1px solid var(--rule);
  }
  .hero__photo .photo-caption { padding-inline: 0; }
}
@media (min-width: 1440px) {
  .hero__row { gap: var(--sp-64); align-items: center; }
  .hero__photo { flex-basis: 40%; width: 40%; }
}

/* Caption under every photo; stock photos are marked „Symbolbild“. */
.photo-caption {
  padding-top: var(--sp-8);
  font-family: var(--f-sans);
  font-size: var(--t-label);
  line-height: 1.9;
  color: var(--mute);
}
.photo-caption .fuge {
  color: var(--text);
  font-weight: 700;
}

/* --- section heads --------------------------------------------------------- */
.h2 {
  position: relative;
  margin-bottom: var(--sp-16);
  padding-left: var(--sp-16);
  font-size: clamp(var(--t-3), 1.1rem + 1vw, var(--t-4));
}
.h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 6px;
  background: var(--oxblood);
}
.h3 {
  margin-bottom: var(--sp-16);
  font-size: var(--t-3);
}

/* --- Was wir machen: the photo row, laid like a row of tiles ---------------- */
.say {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.say__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-16) var(--sp-32);
  margin-bottom: var(--sp-24);
}
.say__text { flex: 1 1 24ch; min-width: 0; }
.say__body {
  max-width: 68ch;
  font-size: clamp(var(--t-1), 0.95rem + 0.4vw, var(--t-2));
  line-height: 1.55;
}

.reihe-nav { display: flex; gap: var(--sp-8); }
.reihe-nav[hidden] { display: none; }
.reihe-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--oxblood);
  border-radius: 0;
  background: transparent;
  color: var(--oxblood);
  cursor: pointer;
}
.reihe-nav__btn:hover,
.reihe-nav__btn:focus-visible {
  background: var(--oxblood);
  color: var(--on-dark);
}

.reihe {
  display: flex;
  gap: var(--sp-12);
  padding-inline: var(--gutter);
  padding-bottom: var(--sp-16);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--oxblood) var(--rule);
}
/* With the two buttons in place (reihe.js adds this class) there is no
   scrollbar: the row moves with the buttons, by swiping on a phone, or with the
   arrow keys. Without the script the browser's own scrollbar stays as fallback. */
.reihe--tasten {
  padding-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reihe--tasten::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.reihe__bild {
  flex: 0 0 var(--bild);
  width: var(--bild);
  scroll-snap-align: start;
}
.reihe__bild img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.reihe__bild .zu-rechts { object-position: 82% 50%; }
.reihe__bild .zu-unten { object-position: 50% 68%; }

/* --- Musterblatt: four laying patterns, drawn ------------------------------- */
.muster {
  margin-top: var(--sp-48);
  padding-top: var(--sp-48);
  border-top: 1px solid var(--rule);
}
.muster__lead {
  max-width: 52ch;
  margin-bottom: var(--sp-32);
}
.muster__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-32) var(--sp-16);
}
@media (min-width: 768px) {
  .muster { margin-top: var(--sp-64); padding-top: var(--sp-64); }
  .muster__grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-32) var(--sp-24); }
}
@media (min-width: 1440px) {
  .muster { display: flex; align-items: flex-start; gap: var(--sp-64); }
  .muster__text { flex: 0 0 30ch; }
  .muster__grid { flex: 1 1 0; }
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  min-width: 0;
}
.swatch__field {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--grout-dark);
  overflow: hidden;
  isolation: isolate;
}
.swatch__pattern {
  position: absolute;
  inset: 4px;
  display: block;
  background-color: var(--grout-dark);
  background-repeat: repeat;
}

/* Verband: every row offset by half a tile */
.swatch--verband .swatch__pattern {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40' shape-rendering='crispEdges'><rect x='0' y='0' width='38' height='18' fill='%237a2e2e'/><rect x='42' y='0' width='38' height='18' fill='%238e3838'/><rect x='-18' y='22' width='38' height='18' fill='%235a2222'/><rect x='24' y='22' width='38' height='18' fill='%237a2e2e'/><rect x='66' y='22' width='38' height='18' fill='%238e3838'/></svg>");
  background-size: 40% auto;
}
/* Kreuzfuge: a straight grid of squares */
.swatch--kreuz .swatch__pattern {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' shape-rendering='crispEdges'><rect x='0' y='0' width='38' height='38' fill='%237a2e2e'/><rect x='42' y='0' width='38' height='38' fill='%238e3838'/><rect x='0' y='42' width='38' height='38' fill='%235a2222'/><rect x='42' y='42' width='38' height='38' fill='%237a2e2e'/></svg>");
  background-size: 33.333% auto;
}
/* Fischgrät: laid at a right angle */
.swatch--fisch .swatch__pattern {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' shape-rendering='crispEdges'><g><rect x='-10' y='0' width='40' height='18' fill='%237a2e2e' transform='rotate(45 10 9)'/><rect x='30' y='20' width='40' height='18' fill='%238e3838' transform='rotate(-45 50 29)'/><rect x='-10' y='40' width='40' height='18' fill='%235a2222' transform='rotate(45 10 49)'/><rect x='30' y='60' width='40' height='18' fill='%237a2e2e' transform='rotate(-45 50 69)'/></g></svg>");
  background-size: 48% auto;
}
/* Großformat: four large slabs */
.swatch--gross .swatch__pattern {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' shape-rendering='crispEdges'><rect x='0' y='0' width='38' height='38' fill='%237a2e2e'/><rect x='42' y='0' width='38' height='38' fill='%238e3838'/><rect x='0' y='42' width='38' height='38' fill='%235a2222'/><rect x='42' y='42' width='38' height='38' fill='%237a2e2e'/></svg>");
  background-size: 100% 100%;
}

/* The trowel stroke and the glint wait outside the drawing until it is hovered. */
.swatch__trowel {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  color: #ffe3c8;
  opacity: 0;
  pointer-events: none;
}
.swatch__trowel path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}
.swatch__field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 36%,
    rgba(255, 237, 200, 0) 48%,
    rgba(255, 237, 200, 0.55) 50%,
    rgba(255, 237, 200, 0) 52%,
    transparent 64%);
  transform: translateX(-100%);
  opacity: 0;
}

.swatch__name {
  font-size: var(--t-2);
  font-weight: 700;
  line-height: 1.5;
}
.swatch__note {
  max-width: 30ch;
  font-family: var(--f-sans);
  line-height: 1.5;
  color: var(--mute);
}

/* --- Kontakt --------------------------------------------------------------- */
.reach {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.reach .h2 { margin-bottom: var(--sp-32); }
.reach__flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-48) var(--sp-64);
}
.reach__block {
  flex: 1 1 24ch;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding-top: var(--sp-16);
  border-top: 4px solid var(--oxblood);
}
.reach__label {
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.reach__label--sep { margin-top: var(--sp-24); }
.reach__value {
  font-size: var(--t-2);
  font-weight: 700;
  line-height: 1.4;
}
.reach__value .link { color: var(--text); }
.reach__value--hours {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--sp-4) var(--sp-12);
  font-family: var(--f-sans);
  font-size: var(--t-1);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.reach__dim { color: var(--mute); }
.reach__note {
  margin-top: var(--sp-8);
  font-family: var(--f-sans);
}
.link:hover,
.link:focus-visible { color: var(--oxblood); }

/* --- call strip ------------------------------------------------------------ */
.callstrip {
  background: var(--oxblood);
  color: var(--on-dark);
  border-top: 3px solid var(--oxblood-ink);
}
.callstrip__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-16);
  padding-block: var(--sp-32);
}
@media (min-width: 640px) {
  .callstrip__row { flex-direction: row; justify-content: space-between; align-items: center; }
}
.callstrip__text {
  max-width: 34ch;
  font-size: var(--t-2);
  font-weight: 700;
  line-height: 1.4;
}

/* --- footer ---------------------------------------------------------------- */
.foot {
  background: var(--oxblood-ink);
  color: var(--on-dark);
  padding-block: var(--sp-48) var(--sp-32);
}
.foot__flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-32) var(--sp-64);
}
.foot__col--brand { flex: 2 1 22ch; }
.foot__col--side { flex: 1 1 16ch; }
.foot__name {
  margin-bottom: var(--sp-8);
  font-size: var(--t-2);
  font-weight: 700;
}
.foot__label {
  margin-bottom: var(--sp-8);
  font-family: var(--f-sans);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.foot__body {
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.foot__link {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--on-dark-mute);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.foot__link:hover,
.foot__link:focus-visible {
  color: #ffffff;
  text-decoration-color: #ffffff;
  text-decoration-thickness: 2px;
}
.foot__legal {
  margin-top: var(--sp-32);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--grout-dark);
  font-family: var(--f-sans);
  font-size: var(--t-label);
  color: var(--on-dark-mute);
}

/* --- focus ----------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
}
.bar :focus-visible,
.callstrip :focus-visible,
.foot :focus-visible { outline-color: var(--on-dark); }
.reihe:focus-visible { outline-offset: -2px; }

/* The Fuge thickens under a link or a photo that is hovered or focused. */
a:focus-visible .fuge,
.reihe:focus-visible .fuge { background-size: 100% 4px; }
@media (hover: hover) {
  a:hover .fuge,
  .reihe__bild:hover .fuge { background-size: 100% 4px; }
}

/* --- motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html, .reihe { scroll-behavior: smooth; }

  .fuge { transition: background-size 300ms ease-out; }
  .link,
  .foot__link,
  .reihe-nav__btn { transition: color 150ms ease-out, background-color 150ms ease-out; }

  /* Load sequence, once: the Fuge draws under the address, then the headline
     and the sentence settle like a tile pressed into its bed. The call button
     and the photo stay where they are. */
  .fuge--zieht { animation: fuge-zieht 700ms cubic-bezier(0.65, 0.05, 0.3, 1) 150ms both; }
  .hero__h1,
  .hero__lead { animation: setzen 600ms cubic-bezier(0.2, 0.65, 0.3, 1) both; }
  .hero__h1 { animation-delay: 350ms; }
  .hero__lead { animation-delay: 470ms; }

  @keyframes fuge-zieht {
    from { background-size: 0 2px; }
    to { background-size: 100% 2px; }
  }
  @keyframes setzen {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
}

/* Musterblatt on hover: the joint opens, a trowel stroke runs through, a glint
   passes. Only where a pointer hovers and motion is welcome. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .swatch__field { transition: box-shadow 300ms ease-out, transform 300ms ease-out; }
  .swatch__pattern { transition: inset 400ms ease-out; }
  .swatch__trowel { transition: opacity 300ms ease-out; }
  .swatch__trowel path { transition: stroke-dashoffset 600ms ease-out 100ms; }
  .swatch__field::after { transition: transform 700ms ease-out, opacity 300ms ease-out; }

  .swatch:hover .swatch__field,
  .swatch:focus-within .swatch__field {
    box-shadow: 0 0 0 2px var(--oxblood);
    transform: scale(1.02);
  }
  .swatch:hover .swatch__pattern,
  .swatch:focus-within .swatch__pattern { inset: 8px; }
  .swatch:hover .swatch__trowel,
  .swatch:focus-within .swatch__trowel { opacity: 0.85; }
  .swatch:hover .swatch__trowel path,
  .swatch:focus-within .swatch__trowel path { stroke-dashoffset: 0; }
  .swatch:hover .swatch__field::after,
  .swatch:focus-within .swatch__field::after {
    transform: translateX(100%);
    opacity: 1;
  }
}