/* Keramika · Die Musterwand — shared stylesheet (DE+EN) */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-0-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-1-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-2-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/fraunces-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/plexmono-0-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/plexmono-1-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexmono-2-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/plexmono-3-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexmono-4-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/plexmono-5-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/caveat-0-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/caveat-1-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
  /* ───────────────────────────────────────────────────────────
     KERAMIKA · DIE MUSTERWAND
     The website is a wall of physical tiles.
     Each section = one tile. Each tile = its own material.
     ─────────────────────────────────────────────────────────── */

  :root {
    --void:       #080706;
    --grout:      #1a1715;          /* dark grout between tiles */
    --grout-deep: #0d0b0a;
    --bone:       #f1e9d4;
    --paper:      #ede4cb;
    --terra:      #c84a26;
    --terra-deep: #8a2e10;
    --rust:       #6e2611;
    --brass:      #d8a458;
    --brass-deep: #9c7032;
    --teal:       #1d4756;
    --teal-deep:  #0d2935;
    --moss:       #4f5d48;
    --slate:      #2f3a40;
    --ochre:      #b6804a;
    --ink:        #0a0907;

    --serif: "Fraunces", "PT Serif", Georgia, serif;
    --mono:  "IBM Plex Mono", ui-monospace, monospace;
    --hand:  "Caveat", cursive;

    --max:        1400px;
    --grout-w:    3px;             /* width of the grout seam */

    /* scroll-driven light position (set by JS) */
    --light-x:    50%;
    --light-y:    20%;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    scroll-behavior: smooth;
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  body {
    background: var(--void);
    color: var(--bone);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    overflow-x: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(216,164,88,0.25);
    position: relative;
  }

  /* the raking light over the whole wall — moves with scroll */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    background:
      radial-gradient(ellipse 80% 50% at var(--light-x) var(--light-y),
        rgba(216,164,88,0.10) 0%,
        rgba(216,164,88,0.04) 30%,
        transparent 60%),
      linear-gradient(to bottom, rgba(8,7,6,0.4) 0%, transparent 30%, transparent 70%, rgba(8,7,6,0.5) 100%);
    mix-blend-mode: screen;
  }

  ::selection { background: var(--terra); color: var(--bone); }
  a { color: inherit; text-decoration: none; }
  a:focus { outline: none; }
  a:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 4px;
  }

  :target { scroll-margin-top: 48px; }

  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  .skip-link {
    position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
  }
  .skip-link:focus {
    position: static; width: auto; height: auto;
    padding: 12px 18px; background: var(--brass); color: var(--ink);
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
    z-index: 200;
  }

  /* ─── Crown band ─── */
  .crown {
    position: relative;
    z-index: 10;
    background: var(--grout-deep);
    padding: 14px 0;
    border-bottom: 1px solid rgba(216,164,88,0.18);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
  }
  .crown-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  .crown-mark { display: inline-flex; align-items: center; gap: 12px; color: var(--brass); text-decoration: none; transition: color 0.2s; }
  .crown-mark:hover { color: var(--bone); }
  .crown-logo { width: 24px; height: 24px; display: block; flex-shrink: 0; }
  .crown ul { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .crown a { color: rgba(241,233,212,0.75); transition: color 0.2s; display: inline-flex; align-items: center; padding: 8px 7px; min-height: 24px; }
  .crown a:hover { color: var(--brass); }
  .crown a.tel { color: var(--brass); font-weight: 500; }
  .crown a.tel:hover { color: var(--bone); }
  .crown a.lang-switch {
    border: 1px solid rgba(216,164,88,0.4);
    padding: 6px 12px;
    color: var(--brass);
  }
  .crown a.lang-switch:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }

  /* ──────────────────────────────────────────
     DIE MUSTERWAND — main grid system
     ────────────────────────────────────────── */
  .musterwand {
    background: var(--grout);
    padding: var(--grout-w);
    position: relative;
  }
  .wand-inner {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(120px, auto);
    gap: var(--grout-w);
    background: var(--grout);
    max-width: 1600px;
    margin: 0 auto;
  }

  /* every fliese (tile) */
  .fliese {
    position: relative;
    overflow: hidden;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    isolation: isolate;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .fliese > * { position: relative; z-index: 2; }

  /* the slight 3D edge that makes it feel like a real tile */
  .fliese::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    z-index: 3;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.08),
      inset 0 -1px 0 rgba(0,0,0,0.25),
      inset 1px 0 0 rgba(255,255,255,0.04),
      inset -1px 0 0 rgba(0,0,0,0.15);
  }

  /* hover lift — like lifting a tile slightly off the wall */
  .fliese.lift:hover { transform: translateY(-2px); z-index: 4; }
  .fliese.lift:hover::after {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -1px 0 rgba(0,0,0,0.35),
      0 4px 12px rgba(0,0,0,0.3);
  }

  /* fine grain overlay */
  .fliese::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch' seed='4'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    mix-blend-mode: overlay;
    opacity: 0.7;
  }

  /* ──────────────────────────────────────────
     MATERIALS — each tile a real stone/clay
     ────────────────────────────────────────── */
  .m-terra {
    background:
      radial-gradient(ellipse 60% 60% at 30% 25%, rgba(255,180,140,0.18), transparent 70%),
      radial-gradient(ellipse 40% 30% at 80% 80%, rgba(70,15,5,0.4), transparent 70%),
      linear-gradient(145deg, var(--terra) 0%, var(--terra-deep) 100%);
    color: var(--bone);
  }
  .m-rust {
    background:
      radial-gradient(ellipse 50% 50% at 70% 30%, rgba(200,80,40,0.3), transparent 70%),
      linear-gradient(160deg, var(--rust) 0%, #4a1808 100%);
    color: var(--bone);
  }
  .m-iznik {
    background:
      radial-gradient(ellipse 50% 30% at 30% 20%, rgba(120,180,210,0.18), transparent 65%),
      radial-gradient(ellipse 40% 30% at 80% 80%, rgba(0,0,0,0.4), transparent 70%),
      linear-gradient(150deg, var(--teal) 0%, var(--teal-deep) 100%);
    color: var(--bone);
  }
  .m-marmor {
    background:
      radial-gradient(ellipse 45% 25% at 30% 40%, rgba(80,60,40,0.12), transparent 70%),
      radial-gradient(ellipse 35% 18% at 70% 70%, rgba(60,40,30,0.10), transparent 70%),
      radial-gradient(ellipse 60% 90% at 50% 50%, rgba(0,0,0,0.04), transparent 70%),
      linear-gradient(135deg, #f0eadb 0%, #e3dac4 50%, #ede5cf 100%);
    color: var(--ink);
  }
  /* veining for marble */
  .m-marmor::before {
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='240' viewBox='0 0 400 240'><g fill='none' stroke='rgba(80,60,40,0.18)' stroke-width='1'><path d='M-20 80 Q 50 40, 120 90 T 280 60 T 420 100' /><path d='M-20 180 Q 60 140, 140 175 T 320 165 T 420 200' stroke-width='0.5'/><path d='M50 -10 Q 80 100, 30 200 T 60 260' stroke-width='0.5'/></g></svg>");
    background-size: 400px 240px;
    opacity: 0.85;
    mix-blend-mode: multiply;
  }
  .m-travertin {
    background:
      repeating-linear-gradient(0deg,
        transparent 0px, transparent 7px,
        rgba(110,70,30,0.06) 8px, rgba(110,70,30,0.06) 9px),
      repeating-linear-gradient(0deg,
        transparent 0px, transparent 22px,
        rgba(70,40,20,0.05) 23px, rgba(70,40,20,0.05) 24px),
      linear-gradient(160deg, #d8b97a 0%, #c2a160 100%);
    color: var(--ink);
  }
  .m-schiefer {
    background:
      repeating-linear-gradient(40deg,
        rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px,
        transparent 1px, transparent 4px),
      repeating-linear-gradient(-40deg,
        rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 1px,
        transparent 1px, transparent 7px),
      linear-gradient(135deg, var(--slate) 0%, #1a2026 100%);
    color: var(--bone);
  }
  .m-moos {
    background:
      radial-gradient(ellipse 60% 40% at 70% 30%, rgba(180,200,160,0.10), transparent 70%),
      linear-gradient(160deg, var(--moss) 0%, #2c3727 100%);
    color: var(--bone);
  }
  .m-ochre {
    background:
      radial-gradient(ellipse 50% 50% at 30% 30%, rgba(255,220,180,0.15), transparent 70%),
      linear-gradient(160deg, var(--ochre) 0%, #6f4f2c 100%);
    color: var(--bone);
  }
  .m-messing {
    background:
      linear-gradient(135deg,
        #e6b864 0%, #b8843a 25%, #d8a458 50%, #a87830 75%, #c8954a 100%);
    color: var(--ink);
  }
  .m-messing::before {
    background-image:
      repeating-linear-gradient(90deg,
        transparent 0px, transparent 1px,
        rgba(255,220,150,0.05) 1px, rgba(255,220,150,0.05) 2px,
        transparent 2px, transparent 3px);
    mix-blend-mode: overlay;
    opacity: 1;
  }
  .m-beton {
    background:
      radial-gradient(ellipse 50% 50% at 30% 25%, rgba(0,0,0,0.06), transparent 70%),
      radial-gradient(ellipse 60% 30% at 80% 80%, rgba(0,0,0,0.08), transparent 70%),
      linear-gradient(145deg, #c5bfae 0%, #a89d87 100%);
    color: var(--ink);
  }
  .m-zellige {
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='115' viewBox='0 0 100 115'><polygon points='25,3 50,3 62,28 50,52 25,52 12,28' fill='none' stroke='rgba(216,164,88,0.4)' stroke-width='1'/><polygon points='75,3 100,3 112,28 100,52 75,52 62,28' fill='none' stroke='rgba(216,164,88,0.4)' stroke-width='1'/><polygon points='50,52 75,52 87,77 75,102 50,102 37,77' fill='none' stroke='rgba(216,164,88,0.4)' stroke-width='1'/></svg>"),
      linear-gradient(145deg, #143240 0%, #061821 100%);
    background-size: 100px 115px, cover;
    color: var(--bone);
  }
  .m-ink {
    background: linear-gradient(160deg, var(--grout-deep) 0%, var(--ink) 100%);
    color: var(--bone);
  }
  .m-bone {
    background: linear-gradient(160deg, #f6f0de 0%, #e8dfc8 100%);
    color: var(--ink);
  }
  .m-paper {
    background: var(--paper);
    color: var(--ink);
  }

  /* ──────────────────────────────────────────
     SPECIFIC TILE TYPES
     ────────────────────────────────────────── */

  /* hero tiles */
  .t-brand {
    grid-column: span 8;
    grid-row: span 5;
    padding: clamp(40px, 5vw, 72px);
    justify-content: space-between;
  }
  .t-brand .label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--brass);
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .t-brand .label::before { content:""; width: 32px; height: 1px; background: var(--brass); }
  .t-brand h1 {
    font-family: var(--serif);
    font-weight: 900;
    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
    font-size: clamp(44px, 8.4vw, 132px);
    line-height: 0.86;
    letter-spacing: -0.04em;
    color: var(--bone);
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .t-brand h1 .it {
    display: block;
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    color: var(--bone);
    margin-top: -0.02em;
    font-size: 0.86em;
    letter-spacing: -0.035em;
  }
  .t-brand h1 .it::after {
    content: ".";
    color: var(--brass);
    font-style: normal;
  }
  .t-brand .hero-sub {
    font-family: var(--serif);
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.5;
    color: var(--bone);
    max-width: 38ch;
    margin-top: 18px;
  }
  .t-brand .hero-sub strong { color: var(--brass); font-weight: 600; }
  .t-brand .hero-paths {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
  }
  .t-brand .hero-paths a {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bone);
    border: 1px solid rgba(216,164,88,0.55);
    padding: 11px 16px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .t-brand .hero-paths a:hover {
    background: var(--brass);
    color: var(--ink);
    border-color: var(--brass);
  }
  .t-brand .hero-paths a:first-child {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
  }
  .t-brand .hero-paths a:first-child:hover {
    background: var(--terra-deep);
    border-color: var(--terra-deep);
  }
  .t-brand .corner-stamp {
    position: absolute;
    top: 32px; right: 32px;
    width: 88px; height: 88px;
    border: 1px solid rgba(241,233,212,0.4);
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(241,233,212,0.7);
    line-height: 1.5;
    transform: rotate(-6deg);
    z-index: 2;
  }

  /* signature plaque (brass tile) */
  .t-sig {
    grid-column: span 4;
    grid-row: span 2;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 28px;
  }
  .t-sig .hand {
    font-family: var(--hand);
    font-weight: 700;
    font-size: clamp(40px, 5vw, 68px);
    line-height: 0.85;
    color: var(--ink);
    transform: rotate(-3deg);
    transform-origin: left center;
  }
  .t-sig .role {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(10,9,7,0.7);
    margin-top: 12px;
  }
  .t-sig .scratch {
    position: absolute;
    bottom: 18px; left: 32px; right: 32px;
    height: 1px;
    background: rgba(10,9,7,0.4);
    transform: rotate(-1deg);
  }

  /* tagline tile */
  .t-tag {
    grid-column: span 4;
    grid-row: span 3;
    padding: 32px 28px;
    justify-content: space-between;
  }
  .t-tag .quote-mark {
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-size: 80px;
    line-height: 0.5;
    color: var(--brass);
  }
  .t-tag p {
    font-family: var(--serif);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.45;
    color: var(--bone);
    text-wrap: pretty;
  }
  .t-tag p strong { color: var(--brass); font-weight: 700; }
  .t-tag .meta {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(241,233,212,0.85);
  }

  /* CTA — phone — engraved into terracotta */
  .t-call {
    grid-column: span 8;
    grid-row: span 1;
    padding: 28px 32px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    transition: filter 0.3s;
  }
  .t-call .label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--bone);
    flex-shrink: 0;
  }
  .t-call .number {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 38px);
    letter-spacing: -0.015em;
    color: var(--bone);
    text-shadow: 0 1px 0 rgba(0,0,0,0.25), 0 -1px 0 rgba(255,255,255,0.08);
    white-space: nowrap;
  }
  .t-call:hover { filter: brightness(1.08); }
  .t-call:focus-visible { outline: 2px solid var(--brass); outline-offset: -6px; }

  /* Bewerten — Google review button */
  .t-bewerten {
    grid-column: span 4;
    grid-row: span 1;
    padding: 24px;
    justify-content: center;
  }
  .t-bewerten .label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(241,233,212,0.6);
  }
  .t-bewerten .stars {
    color: var(--brass);
    font-size: 18px;
    letter-spacing: 4px;
    margin: 6px 0 4px;
  }
  .t-bewerten .text {
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-size: 17px;
    color: var(--brass);
  }

  /* numbers */
  .t-num {
    grid-column: span 2;
    grid-row: span 2;
    padding: 24px;
    align-items: flex-start;
    justify-content: space-between;
  }
  .t-num .num {
    font-family: var(--serif);
    font-weight: 800;
    font-variation-settings: "opsz" 144, "SOFT" 0;
    font-size: clamp(54px, 6vw, 88px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
  }
  .t-num .num em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  }
  .t-num.m-bone .num em { color: var(--terra); }
  .t-num.m-terra .num em { color: var(--bone); }
  .t-num.m-iznik .num em { color: var(--brass); }
  .t-num .lbl {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    opacity: 0.85;
    line-height: 1.4;
  }

  /* manifesto tile */
  .t-manifest {
    grid-column: span 8;
    grid-row: span 4;
    padding: clamp(40px, 5vw, 72px);
    justify-content: space-between;
  }
  .t-manifest .label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--brass);
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .t-manifest .label::before { content:""; width: 32px; height: 1px; background: var(--brass); }
  .t-manifest .statement {
    font-family: var(--serif);
    font-weight: 800;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: clamp(36px, 6vw, 88px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--bone);
    text-wrap: balance;
  }
  .t-manifest .statement em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    color: var(--brass);
  }
  .t-manifest .statement .br { color: var(--brass); font-style: normal; }
  .t-manifest .steps {
    list-style: none;
    counter-reset: step;
    display: grid;
    gap: 22px;
    margin-top: 32px;
  }
  .t-manifest .steps li {
    counter-increment: step;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 18px;
    align-items: start;
  }
  .t-manifest .steps li::before {
    content: counter(step);
    font-family: var(--serif);
    font-style: italic;
    font-weight: 900;
    font-size: 40px;
    line-height: 1;
    color: var(--brass);
  }
  .t-manifest .steps strong {
    display: block;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(18px, 1.9vw, 24px);
    color: var(--bone);
    margin-bottom: 4px;
  }
  .t-manifest .steps p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--bone);
    opacity: 0.92;
  }

  /* portrait tile (Meister) */
  .t-portrait {
    grid-column: span 4;
    grid-row: span 4;
    padding: 0;
    background: linear-gradient(160deg, var(--slate) 0%, var(--ink) 100%);
    position: relative;
  }
  .t-portrait::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M0 0L40 40M40 0L0 40' stroke='rgba(216,164,88,0.05)' stroke-width='0.5'/></svg>");
    background-size: 40px 40px;
    mix-blend-mode: normal;
    opacity: 1;
  }
  .t-portrait .ornament {
    position: absolute; inset: 18px;
    border: 1px solid rgba(216,164,88,0.18);
    pointer-events: none;
    z-index: 2;
  }
  .t-portrait .silhouette {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 70%;
    background: radial-gradient(ellipse 50% 50% at 50% 65%, rgba(216,164,88,0.18) 0%, transparent 65%);
    z-index: 1;
  }
  .t-portrait .seal {
    position: absolute;
    top: 32px; right: 32px;
    width: 92px; height: 92px;
    border: 1px solid var(--brass);
    border-radius: 50%;
    display: grid; place-items: center;
    text-align: center;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    line-height: 1.4;
    transform: rotate(-6deg);
    z-index: 3;
  }
  .t-portrait .seal::before {
    content: "";
    position: absolute; inset: 6px;
    border: 1px dashed rgba(216,164,88,0.4);
    border-radius: 50%;
  }
  .t-portrait .nameplate {
    position: absolute; bottom: 32px; left: 32px; right: 32px;
    z-index: 3;
  }
  .t-portrait .nameplate .role {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 8px;
  }
  .t-portrait .nameplate .name {
    font-family: var(--serif);
    font-weight: 700;
    font-size: 22px;
    color: var(--bone);
    letter-spacing: -0.01em;
  }

  /* services tiles */
  .t-werk {
    padding: 32px 28px;
    justify-content: space-between;
  }
  .t-werk .roman {
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-size: 22px;
    opacity: 0.55;
  }
  .t-werk h3 {
    font-family: var(--serif);
    font-weight: 700;
    font-variation-settings: "opsz" 96, "SOFT" 0;
    font-size: clamp(22px, 2vw, 30px);
    letter-spacing: -0.018em;
    line-height: 1;
    margin-bottom: 12px;
  }
  .t-werk p {
    font-size: 14px;
    line-height: 1.55;
    opacity: 0.85;
    max-width: 36ch;
  }

  .t-werk-feature {
    grid-column: span 6;
    grid-row: span 3;
    padding: clamp(40px, 5vw, 64px);
  }
  .t-werk-feature h3 {
    font-size: clamp(36px, 4vw, 56px);
    line-height: 0.95;
  }
  .t-werk-feature p { font-size: 16px; max-width: 44ch; opacity: 0.82; }
  .t-werk-feature .roman {
    font-size: clamp(56px, 7vw, 110px);
    color: var(--terra);
    opacity: 0.20;
    position: absolute;
    top: 28px; right: 36px;
    z-index: 0;
  }

  /* size variants */
  .span-3 { grid-column: span 3; grid-row: span 2; }
  .span-4 { grid-column: span 4; grid-row: span 2; }
  .span-6 { grid-column: span 6; grid-row: span 2; }
  .span-2-1 { grid-column: span 2; grid-row: span 1; }
  .span-3-1 { grid-column: span 3; grid-row: span 1; }
  .span-3-tall { grid-column: span 3; grid-row: span 3; }
  .span-4-tall { grid-column: span 4; grid-row: span 3; }

  /* specimen — tiny material chip with label */
  .t-spec {
    padding: 0;
    grid-column: span 1;
    grid-row: span 1;
    aspect-ratio: 1 / 1.2;
  }
  .t-spec::after {
    content: attr(data-label);
    position: absolute;
    bottom: 6px; left: 8px; right: 6px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.7;
    z-index: 4;
    line-height: 1;
  }


  /* ──────────────────────────────────────────
     SPECIMEN STONES — handcrafted textures
     ────────────────────────────────────────── */

  /* MARMOR — Calacatta: dramatic diagonal vein + hair veins + soft clouds */
  .t-spec.m-marmor {
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='192' viewBox='0 0 160 192'><defs><filter id='b'><feGaussianBlur stdDeviation='3.2'/></filter></defs><g fill='none'><path d='M-10 38 C 30 52, 55 20, 86 44 S 140 78, 175 60' stroke='rgba(118,104,86,0.5)' stroke-width='5' filter='url(%23b)'/><path d='M-10 38 C 30 52, 55 20, 86 44 S 140 78, 175 60' stroke='rgba(96,82,66,0.65)' stroke-width='1.6'/><path d='M52 30 C 60 48, 50 70, 62 92' stroke='rgba(96,82,66,0.4)' stroke-width='0.9'/><path d='M104 52 C 118 70, 108 96, 124 120 S 118 168, 132 196' stroke='rgba(106,92,74,0.5)' stroke-width='1.1'/><path d='M104 52 C 118 70, 108 96, 124 120 S 118 168, 132 196' stroke='rgba(118,104,86,0.32)' stroke-width='3.4' filter='url(%23b)'/><path d='M-8 128 C 26 118, 58 142, 92 132 S 148 148, 172 140' stroke='rgba(110,96,78,0.34)' stroke-width='0.8'/><path d='M18 192 C 28 162, 14 138, 30 110' stroke='rgba(110,96,78,0.28)' stroke-width='0.7'/><path d='M140 -4 C 130 22, 146 40, 138 64' stroke='rgba(110,96,78,0.3)' stroke-width='0.7'/></g></svg>"),
      radial-gradient(ellipse 70% 45% at 25% 28%, rgba(186,172,150,0.20), transparent 65%),
      radial-gradient(ellipse 55% 38% at 78% 72%, rgba(168,152,128,0.16), transparent 65%),
      linear-gradient(133deg, #f4efe2 0%, #eae2cf 42%, #f1ead9 70%, #e6ddc7 100%);
    background-size: 100% 100%, cover, cover, cover;
    color: var(--ink);
  }
  .t-spec.m-marmor::before {
    background: linear-gradient(118deg, rgba(255,255,255,0.32) 0%, transparent 28%, transparent 72%, rgba(255,255,255,0.14) 100%);
    opacity: 1;
  }

  /* TRAVERTIN — sedimentary banding + characteristic pores */
  .t-spec.m-travertin {
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='192' viewBox='0 0 160 192'><g fill='rgba(94,62,30,0.38)'><ellipse cx='24' cy='34' rx='3.4' ry='1.3'/><ellipse cx='58' cy='36' rx='2.2' ry='0.9'/><ellipse cx='104' cy='32' rx='4.2' ry='1.5'/><ellipse cx='138' cy='38' rx='2.6' ry='1.0'/><ellipse cx='40' cy='78' rx='2.8' ry='1.1'/><ellipse cx='86' cy='74' rx='5.0' ry='1.8'/><ellipse cx='126' cy='80' rx='2.2' ry='0.8'/><ellipse cx='16' cy='118' rx='3.6' ry='1.4'/><ellipse cx='66' cy='122' rx='2.4' ry='0.9'/><ellipse cx='112' cy='116' rx='3.8' ry='1.4'/><ellipse cx='146' cy='124' rx='2.0' ry='0.8'/><ellipse cx='34' cy='160' rx='4.4' ry='1.6'/><ellipse cx='90' cy='164' rx='2.6' ry='1.0'/><ellipse cx='130' cy='158' rx='3.2' ry='1.2'/></g><g fill='rgba(94,62,30,0.2)'><ellipse cx='76' cy='50' rx='1.6' ry='0.7'/><ellipse cx='120' cy='56' rx='1.4' ry='0.6'/><ellipse cx='30' cy='96' rx='1.8' ry='0.7'/><ellipse cx='98' cy='100' rx='1.5' ry='0.6'/><ellipse cx='52' cy='140' rx='1.7' ry='0.7'/><ellipse cx='142' cy='144' rx='1.3' ry='0.5'/><ellipse cx='12' cy='178' rx='1.9' ry='0.8'/><ellipse cx='108' cy='182' rx='1.6' ry='0.6'/></g></svg>"),
      repeating-linear-gradient(178deg,
        rgba(255,236,200,0.10) 0px, transparent 9px,
        rgba(118,80,38,0.10) 16px, transparent 21px,
        rgba(255,240,210,0.07) 30px, transparent 37px,
        rgba(104,68,30,0.12) 44px, transparent 48px),
      linear-gradient(170deg, #ddbd83 0%, #cda968 34%, #d6b577 62%, #c49e5c 100%);
    background-size: 100% 100%, cover, cover;
    color: var(--ink);
  }
  .t-spec.m-travertin::before {
    background: linear-gradient(105deg, rgba(255,255,255,0.18) 0%, transparent 35%);
    opacity: 1;
  }

  /* SCHIEFER — cleavage facets + edge highlights + mica sparkle */
  .t-spec.m-schiefer {
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='192' viewBox='0 0 160 192'><g><polygon points='0,0 160,0 160,46 92,62 0,38' fill='rgba(255,255,255,0.045)'/><polygon points='0,38 92,62 160,46 160,108 64,126 0,98' fill='rgba(0,0,0,0.16)'/><polygon points='0,98 64,126 160,108 160,158 96,176 0,150' fill='rgba(255,255,255,0.028)'/><polygon points='0,150 96,176 160,158 160,192 0,192' fill='rgba(0,0,0,0.22)'/></g><g fill='none' stroke-width='1'><path d='M0 38 L 92 62 L 160 46' stroke='rgba(190,205,215,0.30)'/><path d='M0 98 L 64 126 L 160 108' stroke='rgba(190,205,215,0.22)'/><path d='M0 150 L 96 176 L 160 158' stroke='rgba(190,205,215,0.26)'/></g><g fill='rgba(210,225,235,0.5)'><circle cx='38' cy='24' r='0.7'/><circle cx='122' cy='34' r='0.6'/><circle cx='74' cy='86' r='0.7'/><circle cx='142' cy='92' r='0.5'/><circle cx='22' cy='136' r='0.6'/><circle cx='108' cy='148' r='0.7'/><circle cx='58' cy='184' r='0.5'/></g></svg>"),
      linear-gradient(137deg, #36424c 0%, #232c34 48%, #2b343d 74%, #171e24 100%);
    background-size: 100% 100%, cover;
    color: var(--bone);
  }
  .t-spec.m-schiefer::before {
    background: linear-gradient(150deg, rgba(160,185,205,0.10) 0%, transparent 40%);
    opacity: 1;
  }

  /* ZELLIGE — handmade glazed tiles: tonal variance + wet-glaze specular per tile */
  .t-spec.m-zellige {
    background:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='192' viewBox='0 0 160 192'><defs><radialGradient id='g1' cx='32%25' cy='24%25' r='75%25'><stop offset='0%25' stop-color='rgba(255,255,255,0.34)'/><stop offset='34%25' stop-color='rgba(255,255,255,0.07)'/><stop offset='100%25' stop-color='rgba(0,0,0,0.12)'/></radialGradient></defs><g stroke='rgba(8,14,18,0.85)' stroke-width='2'><rect x='1' y='1' width='38' height='46' fill='%231d4a5c'/><rect x='41' y='1' width='38' height='46' fill='%23175064'/><rect x='81' y='1' width='38' height='46' fill='%23204554'/><rect x='121' y='1' width='38' height='46' fill='%231a5468'/><rect x='1' y='49' width='38' height='46' fill='%23185a70'/><rect x='41' y='49' width='38' height='46' fill='%231f4050'/><rect x='81' y='49' width='38' height='46' fill='%23196074'/><rect x='121' y='49' width='38' height='46' fill='%231c4858'/><rect x='1' y='97' width='38' height='46' fill='%23214e5e'/><rect x='41' y='97' width='38' height='46' fill='%23155a70'/><rect x='81' y='97' width='38' height='46' fill='%231d4252'/><rect x='121' y='97' width='38' height='46' fill='%23186078'/><rect x='1' y='145' width='38' height='46' fill='%23195468'/><rect x='41' y='145' width='38' height='46' fill='%23204a5a'/><rect x='81' y='145' width='38' height='46' fill='%23165c72'/><rect x='121' y='145' width='38' height='46' fill='%231e4654'/></g><g fill='url(%23g1)'><rect x='1' y='1' width='38' height='46'/><rect x='41' y='1' width='38' height='46'/><rect x='81' y='1' width='38' height='46'/><rect x='121' y='1' width='38' height='46'/><rect x='1' y='49' width='38' height='46'/><rect x='41' y='49' width='38' height='46'/><rect x='81' y='49' width='38' height='46'/><rect x='121' y='49' width='38' height='46'/><rect x='1' y='97' width='38' height='46'/><rect x='41' y='97' width='38' height='46'/><rect x='81' y='97' width='38' height='46'/><rect x='121' y='97' width='38' height='46'/><rect x='1' y='145' width='38' height='46'/><rect x='41' y='145' width='38' height='46'/><rect x='81' y='145' width='38' height='46'/><rect x='121' y='145' width='38' height='46'/></g></svg>"),
      linear-gradient(145deg, #143240 0%, #061821 100%);
    background-size: 100% 100%, cover;
    color: var(--bone);
  }

  /* specimen label — scrim for readability on any stone */
  .t-spec::after {
    text-shadow: 0 1px 2px rgba(0,0,0,0.45);
    background: linear-gradient(to top, rgba(8,7,6,0.38), transparent);
    padding: 14px 8px 6px;
    top: auto; bottom: 0; left: 0; right: 0;
    height: auto;
    color: #f7f2e4;
    opacity: 0.95;
  }
  .t-spec.m-marmor::after, .t-spec.m-travertin::after {
    color: #2b2317;
    text-shadow: 0 1px 1px rgba(255,255,255,0.4);
    background: linear-gradient(to top, rgba(241,233,212,0.5), transparent);
  }

  /* Materialpartner tile — manufacturer seals */
  .t-partner {
    grid-column: span 12;
    grid-row: span 1;
    padding: 28px 32px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px 32px;
  }
  .t-partner .label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--brass);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }
  .t-partner .label::before {
    content: "";
    width: 28px; height: 1px;
    background: var(--brass);
  }
  .t-partner .partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    flex: 1;
    justify-content: flex-end;
  }
  .t-partner .partners span {
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 60;
    font-size: clamp(15px, 1.4vw, 19px);
    color: var(--bone);
    letter-spacing: -0.005em;
    opacity: 0.92;
    white-space: nowrap;
  }
  .t-partner .partner-note {
    flex-basis: 100%;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    opacity: 0.92;
    max-width: 72ch;
  }
  .t-partner.m-bone .label { color: var(--terra-deep); }
  .t-partner.m-bone .label::before { background: var(--terra-deep); }
  .t-partner.m-bone .partners span { color: var(--ink); }
  .t-partner .partners span + span::before {
    content: "·";
    margin-right: 28px;
    margin-left: -16px;
    color: var(--brass);
    opacity: 0.6;
  }

  /* pull quote — broken tile motif */
  .t-zitat {
    grid-column: span 8;
    grid-row: span 4;
    padding: clamp(80px, 8vw, 120px) clamp(40px, 5vw, 72px) clamp(40px, 5vw, 72px);
    justify-content: center;
    position: relative;
  }
  .t-zitat::before {
    /* the "crack" line on the broken tile */
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='400' viewBox='0 0 600 400' preserveAspectRatio='none'><path d='M30 0 L 80 90 L 60 180 L 130 240 L 100 320 L 180 400' stroke='rgba(216,164,88,0.18)' stroke-width='1' fill='none'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 1;
    mix-blend-mode: overlay;
  }
  .t-zitat .qmark {
    position: absolute;
    top: clamp(8px, 2vw, 24px);
    left: clamp(28px, 4vw, 56px);
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-size: clamp(120px, 14vw, 220px);
    line-height: 1;
    color: var(--terra);
    z-index: 1;
    pointer-events: none;
    opacity: 0.85;
  }
  blockquote.zitat {
    font-family: var(--serif);
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: clamp(24px, 3.6vw, 48px);
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--bone);
    font-style: italic;
    text-wrap: balance;
    max-width: 28ch;
  }
  blockquote.zitat em { color: var(--brass); font-weight: 600; font-style: italic; }
  .t-zitat .attrib {
    margin-top: 28px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(216,164,88,0.7);
  }
  .t-zitat .attrib::before {
    content: "—  "; color: var(--terra);
  }
  .t-zitat .stars-inline { color: var(--brass); letter-spacing: 4px; margin-right: 12px; }

  /* visitenkarte / contact card */
  .t-karte {
    grid-column: span 4;
    grid-row: span 4;
    padding: 32px 28px;
    background: var(--paper);
    color: var(--ink);
    position: relative;
  }
  .t-karte::before { display: none; }
  .t-karte::after {
    content: "";
    position: absolute; top: 14px; left: 14px; right: 14px; bottom: 14px;
    border: 1px solid rgba(10,9,7,0.2);
    pointer-events: none;
    z-index: 1;
  }
  .t-karte .firm {
    font-family: var(--serif);
    font-weight: 800;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .t-karte .firm em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    color: var(--terra);
    display: block;
    font-size: 0.7em;
  }
  .t-karte .suffix {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(10,9,7,0.6);
    margin-bottom: 18px;
  }
  .t-karte hr { border: 0; height: 1px; background: var(--ink); margin: 0 0 18px; }
  .t-karte dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 20px;
    row-gap: 12px;
    font-size: 14px;
  }
  .t-karte dt {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(10,9,7,0.6);
    padding-top: 4px;
  }
  .t-karte dd a { border-bottom: 1px solid rgba(10,9,7,0.3); }
  .t-karte dd a:hover { color: var(--terra); border-bottom-color: var(--terra); }
  .t-karte .corner-w {
    position: absolute;
    bottom: 24px; right: 28px;
    font-family: var(--hand);
    font-weight: 700;
    font-size: 80px;
    color: var(--terra);
    opacity: 0.18;
    line-height: 0.8;
    transform: rotate(-6deg);
    z-index: 1;
  }

  /* big Anruf / closing */
  .t-anruf {
    grid-column: span 8;
    grid-row: span 3;
    padding: clamp(40px, 5vw, 72px);
    justify-content: space-between;
  }
  .t-anruf .label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--bone);
    opacity: 1;
  }
  .t-anruf h2 {
    font-family: var(--serif);
    font-weight: 800;
    font-variation-settings: "opsz" 144, "SOFT" 0;
    font-size: clamp(40px, 6.8vw, 108px);
    line-height: 0.92;
    letter-spacing: -0.035em;
    color: var(--bone);
    text-wrap: balance;
  }
  .t-anruf h2 em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    color: var(--bone);
  }
  .t-anruf h2 em::after { content: "."; color: var(--brass); font-style: normal; }
  .t-anruf .actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .t-anruf .btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 28px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    border: 1px solid var(--bone);
    color: var(--bone);
    transition: background 0.2s, color 0.2s;
  }
  .t-anruf .btn::before { content: ""; width: 8px; height: 8px; background: var(--brass); transform: rotate(45deg); }
  .t-anruf .btn:hover { background: var(--bone); color: var(--terra); }
  .t-anruf .btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; background: var(--bone); color: var(--terra); }
  .t-anruf .btn.solid { background: var(--ink); border-color: var(--ink); }
  .t-anruf .btn.solid:hover { background: var(--bone); color: var(--ink); }

  /* fugen / address tile */
  .t-adresse {
    grid-column: span 4;
    grid-row: span 3;
    padding: 32px 28px;
    justify-content: space-between;
  }
  .t-adresse .label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--brass);
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .t-adresse .label::before { content:""; width: 24px; height: 1px; background: var(--brass); }
  .t-adresse .ort {
    font-family: var(--serif);
    font-weight: 700;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--bone);
  }
  .t-adresse .ort em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    color: var(--brass);
  }
  .t-adresse address {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    line-height: 1.7;
    color: rgba(241,233,212,0.85);
    text-transform: uppercase;
    font-style: normal;
  }

  /* footer-tile / Impressum */
  .t-impressum {
    grid-column: span 12;
    grid-row: span 5;
    padding: clamp(40px, 5vw, 72px);
    justify-content: flex-start;
    color: var(--bone);
    background: var(--ink);
  }
  .t-impressum .label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--brass);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
  }
  .t-impressum .label::before { content:""; width: 28px; height: 1px; background: var(--brass); }
  .t-impressum .imp-title {
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 36px);
    color: var(--bone);
    margin-bottom: 32px;
    letter-spacing: -0.015em;
  }
  .impressum-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(216,164,88,0.18);
  }
  .impressum-grid h3 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--brass);
    margin-bottom: 12px;
    font-weight: 500;
  }
  .impressum-grid p { font-size: 14px; line-height: 1.55; margin-bottom: 6px; color: rgba(241,233,212,0.78); }
  .impressum-grid strong { color: var(--bone); }
  .footer-bottom {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(241,233,212,0.5);
  }
  .footer-links {
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .footer-links a {
    color: rgba(241,233,212,0.7);
    border-bottom: 1px solid rgba(216,164,88,0.25);
    padding-bottom: 1px;
    transition: color 0.2s, border-color 0.2s;
  }
  .footer-links a:hover { color: var(--brass); border-bottom-color: var(--brass); }

  /* ─── Reveal animation ─── */
  @keyframes set-tile {
    from { opacity: 0; transform: translateY(20px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .fliese.set { animation: set-tile 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .fliese.set:nth-child(1)  { animation-delay: 0.05s; }
  .fliese.set:nth-child(2)  { animation-delay: 0.12s; }
  .fliese.set:nth-child(3)  { animation-delay: 0.20s; }
  .fliese.set:nth-child(4)  { animation-delay: 0.28s; }
  .fliese.set:nth-child(5)  { animation-delay: 0.36s; }
  .fliese.set:nth-child(6)  { animation-delay: 0.44s; }
  .fliese.set:nth-child(7)  { animation-delay: 0.52s; }
  .fliese.set:nth-child(8)  { animation-delay: 0.60s; }

  /* Scroll-reveal (added via JS only — no-JS users see everything immediately) */
  .fliese.pre-reveal {
    opacity: 0;
    transform: translateY(14px);
  }
  .fliese.pre-reveal.reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.55s ease var(--reveal-delay, 0ms), transform 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) var(--reveal-delay, 0ms);
  }

  @media (prefers-reduced-motion: reduce) {
    .fliese.set { animation: none; opacity: 1; transform: none; }
    .fliese.pre-reveal { opacity: 1; transform: none; transition: none; }
    .fliese.lift:hover { transform: none; }
    html { scroll-behavior: auto; }
    body::before { animation: none; }
  }

  /* ─── FAQ tile ─── */
  .t-faq {
    grid-column: span 12;
    grid-row: span 4;
    padding: clamp(40px, 5vw, 72px);
    justify-content: flex-start;
    gap: 8px;
  }
  .t-faq .label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: var(--brass);
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
  }
  .t-faq .label::before { content:""; width: 32px; height: 1px; background: var(--brass); }
  .t-faq h2 {
    font-family: var(--serif);
    font-weight: 800;
    font-size: clamp(28px, 3.6vw, 52px);
    letter-spacing: -0.025em;
    color: var(--bone);
    margin-bottom: 26px;
  }
  .t-faq details {
    border-top: 1px solid rgba(216,164,88,0.25);
    padding: 4px 0;
  }
  .t-faq details:last-of-type { border-bottom: 1px solid rgba(216,164,88,0.25); }
  .t-faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 16px 4px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(17px, 1.7vw, 21px);
    color: var(--bone);
  }
  .t-faq summary::-webkit-details-marker { display: none; }
  .t-faq summary::after {
    content: "+";
    font-family: var(--mono);
    font-size: 22px;
    color: var(--brass);
    flex-shrink: 0;
    transition: transform 0.25s;
  }
  .t-faq details[open] summary::after { transform: rotate(45deg); }
  .t-faq summary:hover { color: var(--brass); }
  .t-faq summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
  .t-faq details p {
    padding: 0 4px 18px;
    font-size: 16.5px;
    line-height: 1.65;
    color: rgba(241,233,212,0.88);
    max-width: 76ch;
  }

  /* ─── Sticky call bar (mobile) ─── */
  .callbar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 110;
    background: var(--terra-deep);
    border-top: 1px solid rgba(216,164,88,0.5);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .callbar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffffff;
  }
  .callbar a + a { border-left: 1px solid rgba(216,164,88,0.4); }
  .callbar a:active { background: var(--rust); }
  .callbar .cb-ico { width: 18px; height: 18px; flex-shrink: 0; }

  /* ─── Responsive ─── */
  @media (max-width: 1180px) {
    .wand-inner { grid-template-columns: repeat(8, 1fr); }
    .t-brand { grid-column: span 8; grid-row: span 4; }
    .t-sig { grid-column: span 8; grid-row: span 1; }
    .t-tag { grid-column: span 4; grid-row: span 3; }
    .t-call { grid-column: span 8; grid-row: span 1; padding: 24px 28px; }
    .t-bewerten { grid-column: span 4; grid-row: span 1; }
    .t-num { grid-column: span 2; grid-row: span 2; }
    .t-partner { grid-column: span 8; }
    .t-manifest { grid-column: span 8; grid-row: span 4; }
    .t-portrait { grid-column: span 4; grid-row: span 4; }
    .span-3, .span-3-tall { grid-column: span 4; }
    .span-4, .span-4-tall { grid-column: span 4; }
    .span-6 { grid-column: span 8; }
    .t-werk-feature { grid-column: span 8; grid-row: span 3; }
    .t-zitat { grid-column: span 8; grid-row: span 4; }
    .t-karte { grid-column: span 8; grid-row: span 4; }
    .t-anruf { grid-column: span 8; grid-row: span 3; }
    .t-adresse { grid-column: span 8; grid-row: span 2; }
    .t-impressum { grid-column: span 8; }
    .impressum-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 720px) {
    .wand-inner { grid-template-columns: repeat(2, 1fr); }
    .crown-inner { padding: 12px 16px; gap: 14px; font-size: 10px; }
    .crown ul { gap: 14px; }
    .fliese { grid-column: span 2 !important; grid-row: span 1 !important; }
    .t-brand { grid-row: span 3 !important; padding: 32px 24px; }
    .t-portrait { grid-row: span 3 !important; min-height: 400px; }
    .t-manifest { grid-row: span 3 !important; }
    .t-zitat { grid-row: span 3 !important; }
    .t-karte { grid-row: span 4 !important; }
    .t-anruf { grid-row: span 2 !important; }
    .t-impressum { grid-row: span 6 !important; }
    .t-num { grid-column: span 1 !important; grid-row: span 1 !important; min-height: 140px; }
    .t-spec { grid-column: span 1 !important; }
    .t-spec.m-schiefer, .t-spec.m-zellige { display: none; }
    .impressum-grid { grid-template-columns: 1fr; }
    .t-werk-feature { padding: 32px 24px; }
    .t-werk-feature .roman { font-size: 80px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    body { padding-bottom: 64px; }
    .callbar { display: flex; }
    /* mobile typography — collision fixes */
    .t-brand .hero-paths {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
  }
  .t-brand .hero-paths a {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bone);
    border: 1px solid rgba(216,164,88,0.55);
    padding: 11px 16px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .t-brand .hero-paths a:hover {
    background: var(--brass);
    color: var(--ink);
    border-color: var(--brass);
  }
  .t-brand .hero-paths a:first-child {
    background: var(--terra);
    border-color: var(--terra);
    color: #fff;
  }
  .t-brand .hero-paths a:first-child:hover {
    background: var(--terra-deep);
    border-color: var(--terra-deep);
  }
  .t-brand .corner-stamp { display: none; }
    .t-brand .label { letter-spacing: 0.2em; font-size: 10px; line-height: 1.9; }
    .t-tag { justify-content: flex-start; gap: 10px; }
    .t-tag .quote-mark { line-height: 1; font-size: 48px; margin-bottom: -6px; }
    .t-tag .meta { margin-top: 6px; }
    .crown { font-size: 10px; letter-spacing: 0.18em; }
    .crown-inner { gap: 8px 12px; }
    .crown ul { gap: 4px 6px; }
    .crown a { padding: 6px 6px; }
    .t-manifest .steps li::before { font-size: 30px; }
    .t-manifest .steps li { grid-template-columns: 38px 1fr; gap: 12px; }
  }