/* =========================================================================
   Theme «tattoostudio» — Gestaltung «Ink Editorial»

   Aufsetzend wie kanzlei: base/partials/head lädt blocks.css und site.css,
   danach diese Datei. Sie stellt die Tokens auf eine dunkle Palette um,
   bindet die Schriften ein und baut die Karten des Grunddesigns zu Bändern
   über die volle Breite um.

   Was je Webseite abweicht, kommt aus der Datenbank (ThemeTokens, nach dieser
   Datei im <head>): vor allem --color-primary, die Akzentfarbe. Die Schrift
   auf der Akzentfarbe (--color-primary-contrast) errechnet das Layout des
   Themes daraus (App\Support\ColorContrast). Alles hier ist die Vorgabe.

   Erkennungszeichen — überall dieselben, damit jede Seite nach diesem Studio
   aussieht und nicht nach einer Vorlage:
   1. Schrift-Paarung: Überschriften in fetter Grotesk in Versalien
      (Bricolage Grotesque 800), das hervorgehobene Wort als kursive Serife
      in der Akzentfarbe (Playfair Display Italic).
   2. Die Schablonen-Ecke: Bilder und Karten haben oben rechts eine
      abgeschnittene Ecke (--tt-cut), Hauptknöpfe unten rechts.
   3. Laufband in der Akzentfarbe unter der Bühne (partials/marquee).
   4. Stempel statt Plakette am Bild (partials/media-figure).
   5. Abschnittsnummern «01 / …», Kontur-Wasserzeichen hinter Seitenköpfen,
      dem Handlungsaufruf und im Fuß, feines Filmkorn über der ganzen Seite.

   Bauplan: .claude/plans/tattoo-studio.md.
   ========================================================================= */

/* --- Schriften (lokal, SIL Open Font License, siehe fonts/tattoostudio) - */

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/tattoostudio/bricolage-grotesque-latin-800.woff2") format("woff2");
}

@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/tattoostudio/bricolage-grotesque-latin-600.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/tattoostudio/playfair-display-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/tattoostudio/playfair-display-latin-400-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/tattoostudio/playfair-display-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/tattoostudio/inter-latin-300-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/tattoostudio/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/tattoostudio/inter-latin-500-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/tattoostudio/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/tattoostudio/inter-latin-700-normal.woff2") format("woff2");
}

/* --- Tokens --------------------------------------------------------------- */

:root {
    --color-primary: #9d6ebd;
    --color-primary-contrast: #0b0a0c;
    --color-secondary: #f2efe8;
    --color-bg: #0b0a0c;
    --color-bg-muted: #121114;
    --color-bg-strong: #070608;
    --color-bg-card: #18171b;
    --color-border: rgb(242 239 232 / 0.1);
    --color-border-strong: rgb(242 239 232 / 0.24);
    --color-text: #b5b1ba;
    --color-text-muted: #8d8993;
    --color-heading: #f2efe8;

    --font-heading: "Bricolage Grotesque", "Arial Narrow", Impact, ui-sans-serif, system-ui, sans-serif;
    --font-accent: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --tt-header-height: 5.5rem;
    --tt-section-space: clamp(5rem, 10vw, 9rem);
    --tt-gutter: clamp(1.25rem, 4vw, 3rem);
    --tt-cut: 1.5rem;
    --tt-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --tt-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M3 12h17M14 5l7 7-7 7'/%3E%3C/svg%3E");
    --tt-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E");
    --container: 84rem;

    color-scheme: dark;
}

@media (max-width: 63.99rem) {
    :root {
        --tt-header-height: 4.5rem;
        --tt-cut: 1rem;
    }
}

/* --- Grundlage ------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    html:has(> body.tt-body) {
        scroll-behavior: smooth;
    }
}

/* Telefon-Menü offen: die Seite darunter scrollt nicht mit
   (assets/js/tattoostudio.js setzt die Klasse). */
html.tt-nav-open {
    overflow: hidden;
}

.tt-body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Filmkorn über der ganzen Seite — ein kaum sichtbares Rauschen, das die
   dunklen Flächen nach Druck statt nach Bildschirm aussehen lässt. Klicks
   gehen hindurch. */
.tt-body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    background: url("../img/tattoostudio/grain.png") repeat;
    opacity: 0.07;
    pointer-events: none;
}

.tt-body .container {
    max-width: var(--container);
    padding-inline: var(--tt-gutter);
}

.tt-body [id] {
    scroll-margin-top: calc(var(--tt-header-height) + 1rem);
}

.tt-body h1,
.tt-body h2,
.tt-body h3,
.tt-body h4 {
    color: var(--color-heading, #fff);
    font-family: var(--font-heading);
    text-wrap: balance;
}

.tt-body h1,
.tt-body h2 {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.92;
    text-transform: uppercase;
}

.tt-body h2 {
    font-size: clamp(2.6rem, 6.4vw, 5.5rem);
}

.tt-body h3,
.tt-body h4 {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.tt-body h3 {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.tt-body a {
    color: var(--color-primary);
}

.tt-body ::selection {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.tt-body :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.tt-body .skip-link {
    z-index: 100;
    border-radius: 0;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-weight: 600;
}

/* Hervorgehobenes Wort einer Überschrift («Unser *Studio*»),
   App\Support\HeadingAccent: kursive Serife in der Akzentfarbe, in normaler
   Schreibung mitten in der Versalzeile. */
.tt-body .accent {
    color: var(--color-primary);
    font-family: var(--font-accent);
    font-size: 1.04em;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -0.015em;
    text-transform: none;
}

.tt-main {
    padding-top: var(--tt-header-height);
}

/* Auf der Startseite läuft die Bühne unter der Kopfzeile durch. */
.tt-body--home .tt-main {
    padding-top: 0;
}

.tt-anchor {
    height: 0;
}

/* --- Kleine Zeile über Überschriften ----------------------------------------
   «—— 01 / Unsere Vision»: ein Strich in der Akzentfarbe, die laufende
   Nummer des Abschnitts (partials/sections) und der Text. */

.tt-kicker {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 1.5rem;
    color: var(--color-heading);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    line-height: 1.3;
    text-transform: uppercase;
}

.tt-kicker::before {
    content: "";
    flex: none;
    width: 2.5rem;
    height: 1px;
    background: var(--color-primary);
}

.tt-kicker__index {
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
}

.tt-kicker__index::after {
    content: "/";
    margin-left: 0.6rem;
    color: var(--color-text-muted);
}

/* --- Pfeile ------------------------------------------------------------------
   Ein Pfeil als Maske in der Schriftfarbe — die Pfeilzeichen fehlen in den
   lokal eingebundenen Schnitten und kämen sonst aus einer Systemschrift. */

.tt-arrow {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--tt-arrow) center / contain no-repeat;
    mask: var(--tt-arrow) center / contain no-repeat;
    transition: transform 0.3s var(--tt-ease);
}

.tt-arrow--back {
    transform: rotate(180deg);
}

/* --- Knöpfe ----------------------------------------------------------------
   Eckig, Versalien, ein Pfeil, der beim Darüberfahren nach vorn rückt.
   Der Hauptknopf trägt die Schablonen-Ecke unten rechts. .button aus dem
   Grunddesign (Karte, Handlungsaufruf) bekommt dieselbe Form. */

.tt-button,
.tt-body .button {
    --tt-btn-cut: 0.7rem;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 3rem;
    padding: 0.85rem 1.6rem;
    border: 1px solid var(--color-primary);
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.25s var(--tt-ease), border-color 0.25s var(--tt-ease), color 0.25s var(--tt-ease);
}

.tt-button::after,
.tt-body .button::after {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: var(--tt-arrow) center / contain no-repeat;
    mask: var(--tt-arrow) center / contain no-repeat;
    transition: transform 0.3s var(--tt-ease);
}

.tt-button:hover::after,
.tt-body .button:hover::after {
    transform: translateX(4px);
}

.tt-body .tt-button--primary,
.tt-body .button--primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tt-btn-cut)), calc(100% - var(--tt-btn-cut)) 100%, 0 100%);
}

.tt-body .tt-button--primary:hover,
.tt-body .button--primary:hover {
    border-color: color-mix(in srgb, var(--color-primary) 82%, #fff);
    background: color-mix(in srgb, var(--color-primary) 82%, #fff);
    color: var(--color-primary-contrast);
}

/* Die abgeschnittene Ecke schneidet auch einen äußeren Fokusrahmen ab —
   beim Hauptknopf liegt er deshalb innen. */
.tt-body .tt-button--primary:focus-visible,
.tt-body .button--primary:focus-visible {
    outline: 2px solid var(--color-primary-contrast);
    outline-offset: -5px;
}

.tt-body .tt-button--outline,
.tt-body .button--outline,
.tt-body .button--quiet {
    border-color: var(--color-border-strong);
    background: transparent;
    color: var(--color-heading);
}

.tt-body .tt-button--outline:hover,
.tt-body .button--outline:hover,
.tt-body .button--quiet:hover {
    border-color: var(--color-heading);
    background: var(--color-heading);
    color: var(--color-bg);
}

/* Auf Flächen in der Akzentfarbe (Handlungsaufruf): ein Knopf in der
   Schriftfarbe dieser Fläche. */
.tt-body .tt-button--ink {
    border-color: var(--color-primary-contrast);
    background: var(--color-primary-contrast);
    color: var(--color-primary);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--tt-btn-cut)), calc(100% - var(--tt-btn-cut)) 100%, 0 100%);
}

.tt-body .tt-button--ink:hover {
    background: transparent;
    color: var(--color-primary-contrast);
}

.tt-body .tt-button--ink:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -5px;
}

.tt-button--lg {
    min-height: 3.5rem;
    padding: 1rem 2rem;
    font-size: 0.8rem;
}

.tt-body .button__icon {
    display: none;
}

/* --- Kopfzeile -------------------------------------------------------------- */

.tt-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 50;
    border-bottom: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-header-bg, var(--color-bg)) 84%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    color: var(--color-header-ink, var(--color-heading));
    transition: background-color 0.4s var(--tt-ease), border-color 0.4s var(--tt-ease);
}

/* Ganz oben durchsichtig (assets/js/tattoostudio.js). Ohne Skript fehlt die
   Klasse, die Leiste behält ihre Fläche. */
.tt-header--top:not([data-nav-open="true"]) {
    border-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Durchsichtig liegt die helle Schrift sonst direkt auf dem Bühnenfoto —
   bei einem hellen Motiv oben ist das Menü kaum zu sehen. Ein dunkler
   Verlauf, der unter der Leiste ausläuft, hält sie lesbar, ohne eine
   sichtbare Kante zu ziehen. */
.tt-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: calc(100% + 3rem);
    background: linear-gradient(to bottom, color-mix(in srgb, var(--color-bg) 85%, transparent) 0%, color-mix(in srgb, var(--color-bg) 50%, transparent) 55%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--tt-ease);
}

.tt-header--top:not([data-nav-open="true"])::before {
    opacity: 1;
}

.tt-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    min-height: var(--tt-header-height);
}

.tt-brand {
    display: flex;
    align-items: center;
    margin-right: auto;
    color: inherit;
    text-decoration: none;
}

.tt-brand__logo {
    width: auto;
    height: var(--logo-height, calc(4rem * var(--logo-scale, 1)));
    max-height: calc(var(--tt-header-height) - 1rem);
}

.tt-brand__name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.tt-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.tt-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tt-nav__list > li > a,
.tt-nav__list .menu__summary {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--color-header-ink, var(--color-heading));
    font-family: var(--font-body);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
}

/* Unterstrich, der von links einläuft. */
.tt-nav__list > li > a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.2rem;
    left: 0;
    height: 1px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s var(--tt-ease);
}

.tt-nav__list > li > a:hover::after,
.tt-nav__list > li > a[aria-current="page"]::after,
.tt-body--home .tt-nav__list > li > a[href="/"]::after {
    transform: scaleX(1);
    transform-origin: left;
}

.tt-nav__list a[aria-current="page"],
.tt-body--home .tt-nav__list a[href="/"] {
    color: var(--color-primary);
}

.tt-nav__list .menu__summary:hover {
    color: var(--color-primary);
}

.tt-nav__list .menu__children {
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-bg-muted);
}

.tt-nav__list .menu__children a {
    color: var(--color-text);
    font-size: 0.9rem;
    text-decoration: none;
}

.tt-nav__list .menu__children a:hover,
.tt-nav__list .menu__children a[aria-current="page"] {
    color: var(--color-primary);
}

.tt-nav__cta.tt-button {
    min-height: 2.6rem;
    padding: 0.6rem 1.15rem;
    font-size: 0.7rem;
}

.tt-nav__contact,
.tt-header__book {
    display: none;
}

.tt-header__toggle {
    display: none;
}

@media (max-width: 63.99rem) {
    .tt-header__book.tt-button {
        display: inline-flex;
        min-height: 2.6rem;
        padding: 0.55rem 0.9rem;
        font-size: 0.66rem;
        letter-spacing: 0.1em;
    }

    .tt-header__book.tt-button::after {
        display: none;
    }

    .tt-header__toggle.nav-toggle {
        display: inline-grid;
        place-items: center;
        flex: none;
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--color-border-strong);
        border-radius: 0;
        background: transparent;
        color: var(--color-header-ink, var(--color-heading));
    }

    .tt-header__toggle-lines {
        position: relative;
        display: block;
        width: 1.25rem;
        height: 0.75rem;
    }

    .tt-header__toggle-lines span {
        position: absolute;
        right: 0;
        left: 0;
        height: 2px;
        background: currentColor;
        transition: top 0.3s var(--tt-ease), transform 0.3s var(--tt-ease);
    }

    .tt-header__toggle-lines span:first-child {
        top: 0;
    }

    .tt-header__toggle-lines span:last-child {
        top: calc(100% - 2px);
    }

    .tt-header__toggle[aria-expanded="true"] .tt-header__toggle-lines span:first-child {
        top: calc(50% - 1px);
        transform: rotate(45deg);
    }

    .tt-header__toggle[aria-expanded="true"] .tt-header__toggle-lines span:last-child {
        top: calc(50% - 1px);
        transform: rotate(-45deg);
    }

    .tt-nav__cta.tt-button {
        display: none;
    }

    /* Ohne JavaScript (kein data-nav-open): die Leiste läuft im Fluss mit
       und das Menü steht offen darunter — nichts verdeckt die Seite. */
    .tt-header:not([data-nav-open]) {
        position: relative;
    }

    .tt-header:not([data-nav-open]) ~ .tt-main {
        padding-top: 0;
    }

    .tt-header:not([data-nav-open]) .tt-header__inner {
        flex-wrap: wrap;
    }

    .tt-header:not([data-nav-open]) .tt-nav {
        flex-basis: 100%;
        padding-bottom: 1.5rem;
    }

    .tt-header:not([data-nav-open]) .tt-nav__list {
        flex-wrap: wrap;
    }

    /* Mit JavaScript: zugeklappt nichts, aufgeklappt ein Vollbild unter der
       Leiste mit großen, nummerierten Einträgen. */
    .tt-header[data-nav-open="false"] .tt-nav {
        display: none;
    }

    /* Deckend und ohne Weichzeichner: ein backdrop-filter machte die Leiste
       zum Bezugsrahmen des festen Menüs darunter — es wäre auf ihre Höhe
       geschrumpft. */
    .tt-header[data-nav-open="true"] {
        border-color: var(--color-border);
        background: var(--color-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .tt-header[data-nav-open="true"] .tt-nav {
        position: fixed;
        inset: var(--tt-header-height) 0 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: space-between;
        gap: 2.5rem;
        padding: 1.5rem var(--tt-gutter) 2.5rem;
        overflow-y: auto;
        background: var(--color-bg);
        animation: tt-menu-in 0.45s var(--tt-ease) both;
    }

    .tt-header[data-nav-open="true"] .tt-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        counter-reset: tt-menu;
    }

    .tt-header[data-nav-open="true"] .tt-nav__list > li {
        border-bottom: 1px solid var(--color-border);
        counter-increment: tt-menu;
    }

    .tt-header[data-nav-open="true"] .tt-nav__list > li > a,
    .tt-header[data-nav-open="true"] .tt-nav__list .menu__summary {
        display: flex;
        align-items: baseline;
        gap: 1rem;
        width: 100%;
        padding: 1.1rem 0;
        font-family: var(--font-heading);
        font-size: clamp(2rem, 9vw, 3.25rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    .tt-header[data-nav-open="true"] .tt-nav__list > li > a::before,
    .tt-header[data-nav-open="true"] .tt-nav__list .menu__summary::before {
        content: counter(tt-menu, decimal-leading-zero);
        min-width: 1.75rem;
        color: var(--color-primary);
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.1em;
    }

    .tt-header[data-nav-open="true"] .tt-nav__list > li > a::after {
        display: none;
    }

    .tt-header[data-nav-open="true"] .tt-nav__list .menu__children {
        position: static;
        margin: 0 0 1rem 2.75rem;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .tt-header[data-nav-open="true"] .tt-nav__list .menu__children a {
        padding: 0.4rem 0;
        font-size: 1.1rem;
    }

    .tt-header[data-nav-open="true"] .tt-nav__contact {
        display: grid;
        gap: 0.35rem;
        color: var(--color-text-muted);
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .tt-nav__contact-line {
        margin: 0;
    }

    .tt-nav__contact a {
        color: var(--color-heading);
        text-decoration: none;
    }
}

@keyframes tt-menu-in {
    from {
        opacity: 0;
        transform: translateY(-0.75rem);
    }
}

/* --- Bühne der Startseite ------------------------------------------------- */

.tt-hero {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--tt-header-height) + 3rem);
    overflow: hidden;
    background: var(--color-bg-strong);
}

.tt-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Nach unten und links ins Dunkle — dort steht der Text, er liegt nie auf
   einem unruhigen Motiv. */
.tt-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 70%, transparent) 30%, transparent 65%),
        linear-gradient(to right, color-mix(in srgb, var(--color-bg) 88%, transparent) 0%, color-mix(in srgb, var(--color-bg) 45%, transparent) 50%, color-mix(in srgb, var(--color-bg) 15%, transparent) 100%);
}

.tt-hero__slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.8s ease;
}

.tt-hero__slide.is-active {
    opacity: 1;
}

.tt-hero__slide picture {
    display: block;
    height: 100%;
}

.tt-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    filter: grayscale(0.3) contrast(1.05);
}

/* Das aktive Bild zoomt kaum merklich auf seine Größe zurück. */
.tt-hero__slide.is-active .tt-hero__image {
    animation: tt-kenburns 16s var(--tt-ease) both;
}

@keyframes tt-kenburns {
    from {
        transform: scale(1.12);
    }

    to {
        transform: scale(1);
    }
}

.tt-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
    padding-bottom: clamp(2.5rem, 7vh, 5rem);
}

.tt-hero__content {
    max-width: 70rem;
}

.tt-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.75rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--color-border-strong);
    background: color-mix(in srgb, var(--color-bg) 45%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--color-heading);
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.tt-hero__kicker::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    animation: tt-pulse 2.6s ease-out infinite;
}

@keyframes tt-pulse {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 70%, transparent);
    }

    70%,
    100% {
        box-shadow: 0 0 0 0.6rem transparent;
    }
}

.tt-body .tt-hero__heading {
    margin: 0 0 clamp(1.75rem, 4vh, 2.75rem);
    font-size: clamp(3.4rem, 11.2vw, 11rem);
    letter-spacing: -0.045em;
    line-height: 0.84;
}

.tt-hero__heading .accent {
    display: block;
    padding-left: 0.02em;
    line-height: 0.95;
}

.tt-hero__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
}

.tt-hero__text {
    max-width: 31rem;
    margin: 0;
    color: #d3cfd8;
    font-size: 1.0625rem;
    line-height: 1.65;
}

.tt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}

.tt-hero__scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: var(--color-text);
    text-decoration: none;
}

.tt-hero__scroll-label {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
}

.tt-hero__scroll-line {
    position: relative;
    width: 1px;
    height: 4.5rem;
    overflow: hidden;
    background: var(--color-border-strong);
}

.tt-hero__scroll-line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    animation: tt-scroll-line 2.4s var(--tt-ease) infinite;
}

@keyframes tt-scroll-line {
    0% {
        transform: translateY(-100%);
    }

    60%,
    100% {
        transform: translateY(100%);
    }
}

.tt-hero__scroll:hover {
    color: var(--color-primary);
}

@media (max-width: 47.99rem) {
    .tt-hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .tt-hero__scroll {
        display: none;
    }

    .tt-hero__actions,
    .tt-hero__actions .tt-button {
        width: 100%;
    }
}

/* --- Laufband ------------------------------------------------------------- */

.tt-marquee {
    position: relative;
    overflow: hidden;
    padding: 1.1rem 0;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.tt-marquee__track {
    display: flex;
    width: max-content;
    animation: tt-marquee 42s linear infinite;
}

.tt-marquee:hover .tt-marquee__track {
    animation-play-state: paused;
}

/* Beide Hälften gleich gebaut, der Abstand am Ende einer Hälfte gleich dem
   zwischen den Begriffen — sonst ruckt das Band beim Neubeginn. */
.tt-marquee__list {
    display: flex;
    flex: none;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
    margin: 0;
    padding: 0 clamp(1.25rem, 2.5vw, 2.25rem) 0 0;
    list-style: none;
}

.tt-marquee__item,
.tt-marquee__star {
    margin: 0;
    padding: 0;
}

.tt-marquee__item::before,
.tt-marquee__star::before {
    content: none;
}

.tt-marquee__item {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.6vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.tt-marquee__item--outline {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-primary-contrast);
}

.tt-marquee__star svg {
    display: block;
    width: clamp(1rem, 2vw, 1.5rem);
    height: clamp(1rem, 2vw, 1.5rem);
}

@keyframes tt-marquee {
    to {
        transform: translateX(-50%);
    }
}

/* --- Seitenkopf der Inhaltsseiten ------------------------------------------
   Groß und linksbündig, dahinter dieselbe Überschrift riesig als Kontur
   (data-watermark). */

.tt-page-header {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 11vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
    border-bottom: 1px solid var(--color-border);
}

.tt-page-header[data-watermark]::before {
    content: attr(data-watermark);
    position: absolute;
    right: -0.04em;
    bottom: -0.2em;
    color: transparent;
    font-family: var(--font-heading);
    font-size: clamp(7rem, 24vw, 22rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.8;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--color-heading) 10%, transparent);
    pointer-events: none;
}

.tt-page-header > .container {
    position: relative;
}

.tt-body .tt-page-header__heading {
    max-width: 16ch;
    margin: 0;
    font-size: clamp(3.2rem, 9.5vw, 8rem);
    line-height: 0.86;
}

.tt-page-header__lead {
    max-width: 38rem;
    margin: 2rem 0 0;
    color: #cfcbd4;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

/* --- Kategorieseite (Blog) ------------------------------------------------
   Filterleiste «Alle · Unterkategorien» unter dem Seitenkopf. Die
   Beitragskacheln selbst kommen aus blocks.css (post-feed). */

.tt-category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2.5rem;
}

.tt-category-filter__link,
.tt-filter__button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.15rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--color-heading);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s var(--tt-ease), border-color 0.25s var(--tt-ease), color 0.25s var(--tt-ease);
}

.tt-category-filter__link:hover,
.tt-filter__button:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tt-category-filter__link[aria-current="page"],
.tt-filter__button[aria-pressed="true"] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.tt-section--posts.content-card {
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

.tt-body .post-feed__title {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.tt-body .post-feed__link {
    color: var(--color-heading);
    text-decoration: none;
}

.tt-body .post-feed__link:hover {
    color: var(--color-primary);
}

.tt-body .post-feed__image {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--tt-cut)) 0, 100% var(--tt-cut), 100% 100%, 0 100%);
}

/* --- Ein Beitrag (base/ratgeber/show + posts/beitrag) -------------------------
   Das Grunddesign legt ein Band in der Akzentfarbe über das Titelbild und
   setzt jede Zwischenüberschrift auf eine farbige Leiste in einer Karte mit
   Rahmen. Hier: Titelbild mit Schablonen-Ecke und dunklem Verlauf, Titel in
   der Überschriftenschrift, Abschnitte ohne Karte — eine ruhige Lesespalte. */

.tt-body .post-layout {
    padding-top: clamp(2.5rem, 5vw, 4rem);
    padding-bottom: var(--tt-section-space);
}

.tt-body .post-hero {
    margin-bottom: 1.5rem;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--tt-cut) * 1.5) 0, 100% calc(var(--tt-cut) * 1.5), 100% 100%, 0 100%);
}

.tt-body .post-hero__overlay {
    padding: clamp(1.5rem, 4vw, 3rem);
    background: linear-gradient(to top, rgb(7 6 8 / 0.94) 0%, rgb(7 6 8 / 0.7) 55%, transparent 100%);
}

.tt-body .post-hero__overlay::before {
    display: none;
}

.tt-body .post-hero--plain {
    clip-path: none;
}

.tt-body .post-hero--plain .post-hero__overlay {
    padding: 0;
    background: none;
}

.tt-body .post-hero__category a,
.tt-body .post-hero--plain .post-hero__category a {
    color: var(--color-primary);
    font-size: 0.72rem;
    letter-spacing: 0.24em;
    opacity: 1;
}

.tt-body .post-hero__title {
    max-width: 22ch;
    color: var(--color-heading);
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 0.95;
    text-transform: uppercase;
}

.tt-body .post__meta {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tt-body .post__lead {
    color: #d6d2db;
    font-size: 1.2rem;
}

.tt-body .post .content-card,
.tt-body .page .content-card {
    margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.tt-body .post .content-card__heading,
.tt-body .page .content-card__heading {
    margin: 0 0 1.25rem;
    padding: 0;
    background: transparent;
    color: var(--color-heading);
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    text-transform: uppercase;
}

.tt-body .post .content-card__body,
.tt-body .page .content-card__body {
    max-width: 46rem;
    margin: 0;
    padding: 0;
    color: var(--color-text);
}

.tt-body .post .content-card__body a,
.tt-body .page .content-card__body a {
    color: var(--color-heading);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-underline-offset: 0.25em;
}

.tt-body .post .content-card__body strong {
    color: var(--color-heading);
}

/* --- Bänder (Blöcke) -------------------------------------------------------
   Die Karten des Grunddesigns (content-card) werden zu Flächen über die
   volle Breite. Hintergrund aus dem Feld «Hintergrund» des Blocks:
   keiner → Seite, «Ton, hell» → abgesetzt, «Ton, kräftig» → am dunkelsten.
   --tt-section-bg tragen auch Elemente, die die Fläche durchscheinen lassen
   müssen (Kartenraster). */

.tt-section.content-card {
    --tt-section-bg: var(--color-bg);

    position: relative;
    margin: 0;
    padding: var(--tt-section-space) 0;
    border: 0;
    border-radius: 0;
    background: var(--tt-section-bg);
    box-shadow: none;
    overflow: visible;
}

.tt-section.content-card.content-card--bg-tint {
    --tt-section-bg: var(--color-bg-muted);

    background-image: none;
}

.tt-section.content-card.content-card--bg-strong {
    --tt-section-bg: var(--color-bg-strong);

    background-image: none;
}

.tt-section.content-card--space-tight {
    padding-bottom: var(--space-8);
}

.tt-section.content-card--rule-top {
    border-top: 1px solid var(--color-border);
}

.tt-section.content-card--rule-bottom {
    border-bottom: 1px solid var(--color-border);
}

/* Zwei Bänder derselben Fläche hintereinander: eine feine Linie trennt sie. */
.tt-section.content-card:not(.content-card--bg-tint):not(.content-card--bg-strong):not(.tt-section--cta) + .tt-section.content-card:not(.content-card--bg-tint):not(.content-card--bg-strong):not(.tt-section--cta) {
    border-top: 1px solid var(--color-border);
}

.tt-section__header {
    max-width: none;
    margin: 0 0 clamp(2.5rem, 5vw, 4.5rem);
    text-align: left;
}

.tt-body .tt-section__heading {
    max-width: 17ch;
    margin: 0;
    font-size: clamp(2.6rem, 6.4vw, 5.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.92;
    text-transform: uppercase;
}

/* Die Ebene wählt der Redakteur; die Größe folgt der Rolle im Abschnitt.
   Ein Block mit H1 ist der Kopf einer Seite ohne eigenen Seitenkopf. */
.tt-body h1.tt-section__heading {
    font-size: clamp(2.9rem, 7vw, 6.25rem);
}

.tt-body h3.tt-section__heading,
.tt-body h4.tt-section__heading,
.tt-body h5.tt-section__heading {
    font-size: clamp(1.8rem, 3.6vw, 2.9rem);
}

.tt-section .content-card__body {
    max-width: none;
    margin: 0;
    padding: 0;
    color: var(--color-text);
    font-size: 1.0625rem;
}

/* Fließtext mit Kopf: links der Kopf (bleibt beim Lesen stehen), rechts der
   Text — eine ruhige Lesespalte statt einer Zeile über die volle Breite.
   Gleiches Raster für das Akkordeon. */
@media (min-width: 64rem) {
    .tt-section--text.tt-section--has-header .tt-section__inner,
    .tt-section--accordion.tt-section--has-header .tt-section__inner {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(3rem, 6vw, 7rem);
        align-items: start;
    }

    .tt-section--text.tt-section--has-header .tt-section__header,
    .tt-section--accordion.tt-section--has-header .tt-section__header {
        position: sticky;
        top: calc(var(--tt-header-height) + 2rem);
        margin: 0;
    }

    .tt-body .tt-section--text.tt-section--has-header .tt-section__heading,
    .tt-body .tt-section--accordion.tt-section--has-header .tt-section__heading {
        font-size: clamp(2.4rem, 4.4vw, 4.25rem);
    }

    .tt-section--text:not(.tt-section--has-header) .content-card__body {
        margin-left: calc(5 / 12 * 100% + clamp(3rem, 6vw, 7rem) * 5 / 12);
    }
}

.tt-section--text .content-card__body {
    max-width: 46rem;
}

/* Einleitende Absätze über Galerien stehen in der Lesebreite. */
.tt-section--gallery .content-card__body > p:not(.tt-more),
.tt-section--artist_gallery .content-card__body > p:not(.tt-more),
.tt-section--artists .content-card__body > p:not(.tt-more) {
    max-width: 40rem;
    margin: 0 0 2.5rem;
    font-size: 1.125rem;
}

/* --- Fließtext ----------------------------------------------------------------- */

.tt-section .prose h2 {
    margin: 3rem 0 1.25rem;
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
}

.tt-section .prose h3 {
    margin: 2.25rem 0 0.75rem;
}

.tt-section .prose p {
    margin: 0 0 1.25rem;
}

.tt-section .prose strong {
    color: var(--color-heading);
    font-weight: 600;
}

.tt-section .prose a,
.tt-body .page .prose a {
    color: var(--color-heading);
    text-decoration: underline;
    text-decoration-color: var(--color-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

.tt-section .prose a:hover,
.tt-body .page .prose a:hover {
    color: var(--color-primary);
}

/* Nur Listen aus dem Editor (ohne Klasse) — Mosaik, Artist-Karten,
   Galerien und Haken-Listen sind ebenfalls <ul> im Rumpf, haben aber ihre
   eigene Form. */
.tt-section .prose ul:not([class]) {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.tt-section .prose ul:not([class]) > li {
    position: relative;
    margin: 0 0 0.75rem;
    padding-left: 1.75rem;
}

/* Raute in der Akzentfarbe statt des Punkts. */
.tt-section .prose ul:not([class]) > li::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0.2rem;
    width: 0.45rem;
    height: 0.45rem;
    border: 0;
    border-radius: 0;
    background: var(--color-primary);
    transform: rotate(45deg);
}

.tt-section .prose ol:not([class]) {
    padding-left: 1.5rem;
}

.tt-section .prose ol:not([class]) > li::marker {
    color: var(--color-primary);
    font-weight: 600;
}

/* --- Zweispaltige Blöcke --------------------------------------------------
   «Text mit Bild» links/rechts und die Karte mit Anschrift: Kopf und Text
   in einer Spalte, Bild bzw. Karte in der anderen. Die Zwischenebenen
   (Rumpf, block-media, block-map) treten mit display: contents zurück,
   damit Kopf, Text und Bild Zellen desselben Rasters werden. Sie sind
   reine <div> ohne Bedeutung — für Vorleseprogramme ändert sich nichts. */

@media (min-width: 56rem) {
    .tt-section--split .tt-section__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: clamp(3rem, 7vw, 7.5rem);
        align-items: start;
    }

    .tt-section--split .content-card__body,
    .tt-section--split .block-media,
    .tt-section--split .block-map--split {
        display: contents;
    }

    .tt-section--split .tt-section__header {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        margin: 0 0 2rem;
    }

    .tt-section--split .block-media__text,
    .tt-section--split .block-map__text {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        max-width: 34rem;
    }

    /* Ohne Kopf steht der Text mittig neben dem Bild. */
    .tt-section--split:not(.tt-section--has-header) .block-media__text,
    .tt-section--split:not(.tt-section--has-header) .block-map__text {
        grid-row: 1 / span 2;
        align-self: center;
    }

    .tt-section--split .block-media__image,
    .tt-section--split .block-map__map {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
    }

    .tt-section--image-left .tt-section__header,
    .tt-section--image-left .block-media__text {
        grid-column: 2;
    }

    .tt-section--image-left .block-media__image {
        grid-column: 1;
    }

    /* Gegen das Fließen aus blocks.css: im Raster gibt es nichts zu
       umfließen. */
    .tt-section--split .content-card__body .block-media:not(.block-media--stacked) .block-media__image,
    .tt-section--split .content-card__body .block-media--reverse:not(.block-media--stacked) .block-media__image {
        float: none;
        width: auto;
        margin: 0;
    }

    /* Bilder neben dem Text höchstens im Format 4 : 5 — ein Hochformat-Foto
       würde den Abschnitt sonst doppelt so hoch machen wie seinen Text. */
    .tt-section--split .content-card__body .block-media__image img {
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }
}

/* --- Text mit Bild: Rahmen, Schablonen-Ecke, Stempel --------------------------- */

.tt-section .content-card__body .tt-figure {
    position: relative;
    isolation: isolate;
    margin: 0 0 2rem;
}

/* Ein feiner Rahmen in der Akzentfarbe, versetzt hinter dem Bild. */
.tt-section .content-card__body .tt-figure::before {
    content: "";
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    z-index: -1;
    border: 1px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
    pointer-events: none;
}

.tt-section--image-left .content-card__body .tt-figure::before {
    inset: 1.25rem 1.25rem -1.25rem -1.25rem;
}

.tt-section .content-card__body .tt-figure__link {
    display: block;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - var(--tt-cut) * 1.5) 0, 100% calc(var(--tt-cut) * 1.5), 100% 100%, 0 100%);
}

.tt-section .content-card__body .tt-figure img {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    filter: grayscale(0.15);
    transition: transform 1.2s var(--tt-ease), filter 0.6s var(--tt-ease);
}

.tt-section .content-card__body .tt-figure__link:hover img,
.tt-section .content-card__body .tt-figure__link:focus-visible img {
    box-shadow: none;
    filter: none;
    transform: scale(1.04);
}

.tt-stamp {
    position: absolute;
    bottom: clamp(-2.5rem, -3vw, -1.5rem);
    left: clamp(-2.75rem, -3.5vw, -1rem);
    z-index: 2;
    display: grid;
    place-items: center;
    width: clamp(7.5rem, 11vw, 9.5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 1.5rem 3rem rgb(0 0 0 / 0.45);
    color: var(--color-primary-contrast);
}

.tt-section--image-left .tt-stamp {
    right: clamp(-2.75rem, -3.5vw, -1rem);
    left: auto;
}

.tt-stamp::after {
    content: "";
    position: absolute;
    inset: 24%;
    border: 1px dashed currentColor;
    border-radius: 50%;
    opacity: 0.45;
}

.tt-stamp__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: tt-spin 24s linear infinite;
}

.tt-stamp__text {
    fill: currentColor;
    font-family: var(--font-body);
    font-size: 8.4px;
    font-weight: 600;
    letter-spacing: 0.18em;
}

.tt-section .content-card__body .tt-stamp__value {
    position: relative;
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.2vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

@keyframes tt-spin {
    to {
        transform: rotate(1turn);
    }
}

/* Auf schmalen Bildschirmen bleibt der Stempel innerhalb des Rands. */
@media (max-width: 55.99rem) {
    .tt-stamp,
    .tt-section--image-left .tt-stamp {
        right: auto;
        bottom: -1.5rem;
        left: 1rem;
    }

    .tt-section .content-card__body .tt-figure::before {
        inset: 0.75rem -0.75rem -0.75rem 0.75rem;
    }
}

.tt-section .content-card__body .block-media__caption {
    margin-top: 1rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.tt-section .content-card__body .block-media__more {
    margin: 2rem 0 0;
}

.tt-section .content-card__body .block-media__more a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-border-strong);
    color: var(--color-heading);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-decoration: none;
    text-transform: uppercase;
}

.tt-section .content-card__body .block-media__more a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* --- Punkte mit Haken ---------------------------------------------------------- */

.tt-section .content-card__body .check-list {
    display: grid;
    margin: 2rem 0 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
    list-style: none;
}

.tt-section .content-card__body .check-list__item {
    position: relative;
    margin: 0;
    padding: 1rem 0 1rem 2.25rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-heading);
    font-weight: 500;
}

.tt-section .content-card__body .check-list__item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.15rem;
    height: 1.15rem;
    border: 0;
    border-radius: 0;
    background: var(--color-primary);
    transform: translateY(-50%);
    -webkit-mask: var(--tt-check) center / contain no-repeat;
    mask: var(--tt-check) center / contain no-repeat;
}

/* --- Kartenraster («01. Hygiene») ----------------------------------------------
   Kacheln auf einem Raster aus feinen Linien (die Lücke von 1px zeigt den
   Linienton darunter). Die Nummer steht groß als Kontur und füllt sich beim
   Darüberfahren mit der Akzentfarbe. */

.tt-section .content-card__body .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    background: var(--color-border);
    list-style: none;
}

.tt-section .content-card__body .card-grid__item {
    margin: 0;
    padding: clamp(1.75rem, 3vw, 2.75rem);
    border: 0;
    border-radius: 0;
    background: var(--tt-section-bg, var(--color-bg));
    box-shadow: none;
    transition: background-color 0.4s var(--tt-ease);
}

.tt-section .content-card__body .card-grid__item::before {
    content: none;
}

.tt-section .content-card__body .card-grid__item:hover {
    background: color-mix(in srgb, var(--tt-section-bg, var(--color-bg)) 88%, var(--color-heading));
}

.tt-section .content-card__body .card-grid__number {
    display: block;
    margin: 0 0 2rem;
    color: transparent;
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 6vw, 5rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--color-heading) 40%, transparent);
    transition: color 0.4s var(--tt-ease), -webkit-text-stroke-color 0.4s var(--tt-ease);
}

.tt-section .content-card__body .card-grid__item:hover .card-grid__number {
    color: var(--color-primary);
    -webkit-text-stroke-color: var(--color-primary);
}

.tt-section .content-card__body .card-grid__image {
    width: 100%;
    margin: 0 0 1.5rem;
    border-radius: 0;
}

.tt-section .content-card__body .card-grid__title {
    margin: 0 0 1rem;
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-transform: uppercase;
}

.tt-section .content-card__body .card-grid__link {
    color: inherit;
    text-decoration: none;
}

.tt-section .content-card__body .card-grid__text {
    margin: 0;
    color: var(--color-text);
    font-size: 0.98rem;
}

.tt-section .content-card__body .card-grid__more {
    margin: 1.25rem 0 0;
    color: var(--color-primary);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* --- Akkordeon (FAQ) ------------------------------------------------------------
   Nummerierte Fragen zwischen feinen Linien, ein Plus, das sich zum Kreuz
   dreht. */

.tt-section .content-card__body .accordion {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--color-border);
    counter-reset: tt-faq;
}

.tt-section .content-card__body .accordion .faq-item {
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    counter-increment: tt-faq;
}

.tt-section .content-card__body .accordion .faq-item:hover,
.tt-section .content-card__body .accordion .faq-item[open] {
    border-color: var(--color-border);
}

.tt-section .content-card__body .accordion .faq-item summary {
    justify-content: flex-start;
    gap: 1.25rem;
    padding: 1.6rem 0;
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    transition: color 0.25s var(--tt-ease);
}

.tt-section .content-card__body .accordion .faq-item summary:hover {
    color: var(--color-primary);
}

.tt-section .content-card__body .accordion .faq-item summary::before {
    content: counter(tt-faq, decimal-leading-zero);
    flex: none;
    min-width: 1.75rem;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.tt-section .content-card__body .accordion .faq-item summary::after {
    content: "";
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background:
        linear-gradient(currentColor, currentColor) center / 0.85rem 1.5px no-repeat,
        linear-gradient(currentColor, currentColor) center / 1.5px 0.85rem no-repeat;
    color: var(--color-heading);
    transition: transform 0.35s var(--tt-ease), background-color 0.35s var(--tt-ease), border-color 0.35s var(--tt-ease), color 0.35s var(--tt-ease);
}

.tt-section .content-card__body .accordion .faq-item[open] summary::after {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
    transform: rotate(45deg);
}

.tt-section .content-card__body .accordion .faq-item p {
    max-width: 44rem;
    margin: 0;
    padding: 0 3.75rem 1.75rem 3rem;
    color: var(--color-text);
}

@media (max-width: 47.99rem) {
    .tt-section .content-card__body .accordion .faq-item p {
        padding: 0 0 1.5rem;
    }
}

/* --- Galerie «Unser Studio» ---------------------------------------------------
   Drei Hochformate, das mittlere versetzt — eine Bildstrecke statt einer
   Kachelwand. */

.tt-section .content-card__body .gallery:not(.tt-mosaic) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    margin: 0;
}

.tt-section .content-card__body .gallery:not(.tt-mosaic) .gallery__link {
    display: block;
    overflow: hidden;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--tt-cut)) 0, 100% var(--tt-cut), 100% 100%, 0 100%);
}

.tt-section .content-card__body .gallery:not(.tt-mosaic) .gallery__item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 0;
    filter: grayscale(0.2);
    transition: transform 1s var(--tt-ease), filter 0.6s var(--tt-ease);
}

.tt-section .content-card__body .gallery:not(.tt-mosaic) .gallery__link:hover img,
.tt-section .content-card__body .gallery:not(.tt-mosaic) .gallery__link:focus-visible img {
    filter: none;
    transform: scale(1.05);
}

@media (min-width: 56rem) {
    .tt-section--gallery .content-card__body .gallery__item:nth-child(3n + 2) {
        transform: translateY(3rem);
    }

    .tt-section--gallery.content-card {
        padding-bottom: calc(var(--tt-section-space) + 3rem);
    }
}

/* --- Mosaik der Arbeiten ----------------------------------------------------------
   «Galerie aus den Portfolios» und das Portfolio im Profil. Jede sechste
   Kachel ab der ersten läuft über zwei Spalten und Reihen, jede sechste ab
   der vierten über zwei Reihen — grid-auto-flow: dense füllt die Lücken. */

.tt-body .tt-mosaic {
    display: grid;
    grid-auto-flow: dense;
    grid-auto-rows: clamp(9rem, 44vw, 15rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48rem) {
    .tt-body .tt-mosaic {
        grid-auto-rows: clamp(12rem, 24vw, 18rem);
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

@media (min-width: 72rem) {
    .tt-body .tt-mosaic {
        grid-auto-rows: clamp(13rem, 18vw, 19rem);
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.tt-body .tt-mosaic__item {
    margin: 0;
    padding: 0;
}

.tt-body .tt-mosaic__item::before {
    content: none;
}

.tt-body .tt-mosaic__item:nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

.tt-body .tt-mosaic__item:nth-child(6n + 4) {
    grid-row: span 2;
}

.tt-body .tt-mosaic__item.is-filtered-out {
    display: none;
}

.tt-body .tt-mosaic__link {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
    background: var(--color-bg-card);
    clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 0.9rem, 100% 100%, 0 100%);
    cursor: zoom-in;
}

.tt-body .tt-mosaic__link picture {
    display: block;
    height: 100%;
}

.tt-body .tt-mosaic .tt-mosaic__image {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
    filter: grayscale(0.25);
    transition: transform 1s var(--tt-ease), filter 0.6s var(--tt-ease);
}

.tt-body .tt-mosaic__link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(7 6 8 / 0.75), transparent 55%);
    opacity: 0;
    transition: opacity 0.5s var(--tt-ease);
}

.tt-mosaic__tag {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-heading);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.45s var(--tt-ease), transform 0.45s var(--tt-ease);
}

.tt-mosaic__tag::before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: var(--color-primary);
}

.tt-body .tt-mosaic__link:hover .tt-mosaic__image,
.tt-body .tt-mosaic__link:focus-visible .tt-mosaic__image {
    filter: none;
    transform: scale(1.06);
}

.tt-body .tt-mosaic__link:hover::after,
.tt-body .tt-mosaic__link:focus-visible::after,
.tt-body .tt-mosaic__link:hover .tt-mosaic__tag,
.tt-body .tt-mosaic__link:focus-visible .tt-mosaic__tag {
    opacity: 1;
    transform: none;
}

.tt-body .tt-mosaic__link:focus-visible {
    outline-offset: -4px;
}

.tt-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 2rem;
}

.tt-filter[hidden] {
    display: none;
}

.tt-filter__count {
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}

/* Der große Verweis unter einem Block («Alle Artists ansehen»). */
.tt-body .tt-more {
    display: flex;
    justify-content: flex-end;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
}

.tt-body .tt-more a {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border-strong);
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2.4vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s var(--tt-ease), border-color 0.3s var(--tt-ease);
}

.tt-body .tt-more a::after {
    content: "";
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    -webkit-mask: var(--tt-arrow) center / contain no-repeat;
    mask: var(--tt-arrow) center / contain no-repeat;
    transition: transform 0.3s var(--tt-ease);
}

.tt-body .tt-more a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tt-body .tt-more a:hover::after {
    transform: translateX(5px);
}

/* --- Artist-Karten (partials/artist-cards) ------------------------------------------- */

/* Mit .tt-body davor: die Grundregeln für Listen im Inhaltsblock
   (.content-card__body li — Einzug, Punkt, Abstand) sind sonst stärker. */
.tt-body .tt-artists {
    --tt-artist-ratio: 3 / 4;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Zwei Artists: groß nebeneinander über die volle Breite. Einer: nicht
   breiter als ein Porträt sinnvoll ist. */
.tt-body .tt-artists--count-2 {
    --tt-artist-ratio: 1 / 1.08;
}

.tt-body .tt-artists--count-1 {
    --tt-artist-ratio: 4 / 5;

    max-width: 32rem;
}

.tt-body .tt-artist {
    margin: 0;
    padding: 0;
}

.tt-body .tt-artist::before {
    content: none;
}

.tt-artist__link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}

.tt-artist__media {
    position: relative;
    display: block;
    aspect-ratio: var(--tt-artist-ratio);
    overflow: hidden;
    background: var(--color-bg-card);
    clip-path: polygon(0 0, calc(100% - var(--tt-cut) * 1.5) 0, 100% calc(var(--tt-cut) * 1.5), 100% 100%, 0 100%);
}

.tt-artist__media picture {
    display: block;
    height: 100%;
}

.tt-artist__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    filter: grayscale(1) contrast(1.05);
    transform: scale(1.02);
    transition: filter 0.7s var(--tt-ease), transform 1.4s var(--tt-ease);
}

.tt-artist__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(7 6 8 / 0.95) 0%, rgb(7 6 8 / 0.7) 30%, rgb(7 6 8 / 0.15) 58%, transparent 72%);
}

.tt-artist__placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    color: color-mix(in srgb, var(--color-heading) 12%, transparent);
    font-family: var(--font-heading);
    font-size: 10rem;
    font-weight: 800;
}

.tt-artist__index {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
    z-index: 2;
    color: transparent;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 5.5vw, 4.75rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    -webkit-text-stroke: 1px rgb(255 255 255 / 0.55);
    transition: color 0.5s var(--tt-ease), -webkit-text-stroke-color 0.5s var(--tt-ease);
}

.tt-artist__body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.tt-artist__role {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-heading);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.tt-artist__role::before {
    content: "";
    width: 1.25rem;
    height: 1px;
    background: var(--color-primary);
}

.tt-artist__name {
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.88;
    text-transform: uppercase;
}

.tt-artist__styles {
    color: #d3cfd8;
    font-size: 0.9rem;
}

.tt-artist__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid currentColor;
    color: var(--color-heading);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: color 0.3s var(--tt-ease);
}

.tt-artist__cta::after {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    background: currentColor;
    -webkit-mask: var(--tt-arrow) center / contain no-repeat;
    mask: var(--tt-arrow) center / contain no-repeat;
    transition: transform 0.3s var(--tt-ease);
}

.tt-artist__link:hover .tt-artist__image,
.tt-artist__link:focus-visible .tt-artist__image {
    filter: none;
    transform: scale(1.06);
}

.tt-artist__link:hover .tt-artist__index,
.tt-artist__link:focus-visible .tt-artist__index {
    color: var(--color-primary);
    -webkit-text-stroke-color: var(--color-primary);
}

.tt-artist__link:hover .tt-artist__cta,
.tt-artist__link:focus-visible .tt-artist__cta {
    color: var(--color-primary);
}

.tt-artist__link:hover .tt-artist__cta::after {
    transform: translateX(4px);
}

/* --- Karte mit Anschrift -------------------------------------------------------- */

.tt-section .content-card__body .block-map__address {
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0;
    background: var(--color-bg-card);
}

.tt-section .content-card__body .block-map__address-title {
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.tt-section .content-card__body .block-map__address-lines {
    color: var(--color-text);
}

.tt-section .content-card__body .block-map__routes .button {
    flex: 1 1 14rem;
}

.tt-section .content-card__body .block-map__map .embed {
    margin: 0;
    overflow: hidden;
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - var(--tt-cut) * 1.5) 0, 100% calc(var(--tt-cut) * 1.5), 100% 100%, 0 100%);
}

/* --- Handlungsaufruf -------------------------------------------------------------
   Ein Band in der Akzentfarbe, Schrift in der dazu errechneten Kontrastfarbe,
   dahinter der Name des Studios riesig als Kontur (data-watermark). */

.tt-section--cta.content-card,
.tt-callout {
    position: relative;
    overflow: hidden;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    text-align: center;
}

.tt-section--cta.content-card[data-watermark]::before,
.tt-callout[data-watermark]::before {
    content: attr(data-watermark);
    position: absolute;
    top: 50%;
    left: 50%;
    color: transparent;
    font-family: var(--font-heading);
    font-size: clamp(7rem, 24vw, 22rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.8;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    -webkit-text-stroke: 1px color-mix(in srgb, var(--color-primary-contrast) 22%, transparent);
    pointer-events: none;
}

.tt-section--cta .tt-section__inner,
.tt-callout__inner {
    position: relative;
}

.tt-section--cta .content-card__body,
.tt-section--cta .content-card__body p {
    color: inherit;
}

.tt-section--cta .tt-section__header {
    margin: 0 auto 1.75rem;
    text-align: center;
}

.tt-section--cta .tt-kicker {
    justify-content: center;
    color: inherit;
}

.tt-section--cta .tt-kicker::before {
    background: currentColor;
}

.tt-section--cta .tt-kicker__index {
    color: inherit;
}

.tt-body .tt-section--cta .tt-section__heading,
.tt-body .tt-callout__heading {
    max-width: 14ch;
    margin: 0 auto;
    color: inherit;
    font-size: clamp(2.8rem, 8vw, 7rem);
}

.tt-section--cta .accent,
.tt-callout .accent {
    color: inherit;
}

.tt-section .content-card__body .cta-band {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: center;
}

.tt-section .content-card__body .cta-band__text,
.tt-callout__text {
    max-width: 38rem;
    margin: 0 auto 2.5rem;
    color: inherit;
    font-size: 1.15rem;
    opacity: 0.85;
}

.tt-section .content-card__body .cta-band__text p {
    margin: 0;
}

.tt-section .content-card__body .cta-band__actions,
.tt-callout__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
}

.tt-body .tt-section--cta .button--primary {
    min-height: 3.5rem;
    padding: 1rem 2rem;
    border-color: var(--color-primary-contrast);
    background: var(--color-primary-contrast);
    color: var(--color-primary);
}

.tt-body .tt-section--cta .button--primary:hover {
    background: transparent;
    color: var(--color-primary-contrast);
}

.tt-body .tt-section--cta .button--primary:focus-visible {
    outline-color: var(--color-primary);
}

.tt-body .tt-section--cta .button--quiet {
    border-color: currentColor;
    color: inherit;
}

.tt-body .tt-section--cta .button--quiet:hover {
    background: var(--color-primary-contrast);
    color: var(--color-primary);
}

.tt-callout {
    padding: var(--tt-section-space) 0;
}

.tt-body .tt-callout__heading {
    margin-bottom: 1.75rem;
}

/* --- Seiten des Moduls «Artists & Portfolio» ------------------------------------ */

.tt-band {
    padding: var(--tt-section-space) 0;
}

.tt-band--muted {
    background: var(--color-bg-muted);
}

.tt-band__header {
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.tt-body .tt-band__heading {
    max-width: 17ch;
    margin: 0;
}

.tt-body .artists-page__empty {
    color: var(--color-text-muted);
    font-size: 1.125rem;
}

.tt-profile__intro {
    padding: clamp(2.5rem, 6vw, 5rem) 0 var(--tt-section-space);
}

.tt-profile__grid {
    display: grid;
    gap: clamp(2.5rem, 6vw, 6rem);
}

@media (min-width: 56rem) {
    .tt-profile__grid {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: start;
    }

    .tt-profile__media {
        position: sticky;
        top: calc(var(--tt-header-height) + 2rem);
    }
}

.tt-profile__photo {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--color-bg-card);
    clip-path: polygon(0 0, calc(100% - var(--tt-cut) * 2) 0, 100% calc(var(--tt-cut) * 2), 100% 100%, 0 100%);
}

.tt-profile__photo picture {
    display: block;
    height: 100%;
}

.tt-profile__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.tt-profile__placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    color: color-mix(in srgb, var(--color-heading) 12%, transparent);
    font-family: var(--font-heading);
    font-size: 12rem;
    font-weight: 800;
}

.tt-body .tt-profile__name {
    margin: 0 0 2.5rem;
    font-size: clamp(4rem, 12vw, 9.5rem);
    letter-spacing: -0.05em;
    line-height: 0.82;
}

.tt-profile__bio {
    position: relative;
    margin: 0 0 2.5rem;
    padding: 0 0 0 1.75rem;
    border-left: 2px solid var(--color-primary);
    color: #d6d2db;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.75;
}

.tt-profile__bio p {
    margin: 0 0 1rem;
}

.tt-profile__bio p:last-child {
    margin-bottom: 0;
}

.tt-profile__label {
    margin: 0 0 0.85rem;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.tt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

.tt-chips__item {
    margin: 0;
    padding: 0.5rem 0.95rem;
    border: 1px solid var(--color-border-strong);
    color: var(--color-heading);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tt-chips__item::before {
    content: none;
}

.tt-profile__stat {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    margin: 0 0 2.5rem;
    padding: 1.25rem 0;
    border-block: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.tt-profile__stat-value {
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
}

.tt-profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
}

.tt-profile__back {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.tt-profile__back a {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-heading);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-decoration: none;
    text-transform: uppercase;
}

.tt-profile__back a:hover {
    color: var(--color-primary);
}

/* --- Rechtstexte und andere Seiten aus base ----------------------------------- */

.tt-body .page {
    padding-top: clamp(3.5rem, 8vw, 6rem);
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
}

.tt-body .page h1 {
    font-size: clamp(2.8rem, 7vw, 5.5rem);
}

.tt-body .page .prose {
    max-width: 46rem;
}

.tt-body .page h2 {
    font-size: clamp(1.6rem, 3vw, 2.25rem);
}

/* --- Fußbereich ------------------------------------------------------------------ */

.tt-footer {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 6rem) 0 0;
    border-top: 1px solid var(--color-border);
    background: var(--color-footer-bg, var(--color-bg-strong));
    color: var(--color-footer-ink, var(--color-text));
    font-size: 0.92rem;
}

.tt-footer__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--color-border);
}

.tt-footer__brand {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 34rem;
}

.tt-footer__logo {
    flex: none;
    width: auto;
    height: 5.5rem;
}

.tt-footer__text {
    margin: 0;
    line-height: 1.7;
}

.tt-footer__social {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--color-heading);
    text-decoration: none;
}

.tt-footer__social-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.tt-footer__social-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.tt-footer__social-handle {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3.6vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    transition: color 0.3s var(--tt-ease);
}

.tt-footer__social:hover .tt-footer__social-handle {
    color: var(--color-primary);
}

.tt-footer__social:hover .tt-arrow {
    transform: translateX(5px);
}

.tt-footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: 2.5rem;
    padding-block: 3rem;
}

.tt-footer__heading {
    margin: 0 0 1.25rem;
    color: var(--color-heading);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.tt-footer__links,
.tt-footer__contact {
    display: grid;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tt-footer__links li,
.tt-footer__contact li {
    margin: 0;
}

.tt-footer__links li::before,
.tt-footer__contact li::before {
    content: none;
}

.tt-footer a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s var(--tt-ease);
}

.tt-footer a:hover {
    color: var(--color-primary);
}

.tt-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.tt-footer__icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.25em;
    color: var(--color-primary);
}

.tt-footer__hours {
    display: grid;
    gap: 0;
    margin: 0;
}

.tt-footer__hours-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--color-border);
}

.tt-footer__hours-row:first-child {
    padding-top: 0;
}

.tt-footer__hours-row dt,
.tt-footer__hours-row dd {
    margin: 0;
}

.tt-footer__hours-row dd {
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.tt-footer__hours-row--closed,
.tt-footer__hours-row--closed dd {
    color: var(--color-primary);
}

.tt-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tt-footer__bottom p {
    margin: 0;
}

.tt-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* Der Name des Studios über die volle Breite, als Kontur, unten
   angeschnitten — die letzte Zeile jeder Seite. */
.tt-footer__watermark {
    margin: 0;
    overflow: hidden;
    color: transparent;
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 15.5vw, 17rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.78;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    transform: translateY(0.14em);
    user-select: none;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--color-heading) 16%, transparent);
}

/* --- WhatsApp-Chat ----------------------------------------------------------
   Das Grunddesign setzt ihn unten links; hier sitzt er rechts, wo man ihn
   auf dem Telefon mit dem Daumen erreicht. */

.tt-body .wa {
    right: var(--space-4);
    left: auto;
    align-items: flex-end;
}

/* --- Leuchtkasten ------------------------------------------------------------- */

.tt-body .gallery-lightbox {
    background-color: rgb(7 6 8 / 0.96);
}

.tt-body .gallery-lightbox__close,
.tt-body .gallery-lightbox__nav {
    border-radius: 0;
}

.tt-body .gallery-lightbox__caption {
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* --- Einblenden beim Scrollen ----------------------------------------------------
   Gesetzt von assets/js/tattoostudio.js, und nur an dem, was beim Laden
   unterhalb des sichtbaren Bereichs liegt. */

.tt-reveal {
    opacity: 0;
    transform: translateY(2rem);
}

.tt-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 0.9s var(--tt-ease), transform 0.9s var(--tt-ease);
}

.tt-artist.tt-reveal:nth-child(4n + 2).is-revealed,
.tt-mosaic__item.tt-reveal:nth-child(4n + 2).is-revealed {
    transition-delay: 0.08s;
}

.tt-artist.tt-reveal:nth-child(4n + 3).is-revealed,
.tt-mosaic__item.tt-reveal:nth-child(4n + 3).is-revealed {
    transition-delay: 0.16s;
}

.tt-artist.tt-reveal:nth-child(4n + 4).is-revealed,
.tt-mosaic__item.tt-reveal:nth-child(4n + 4).is-revealed {
    transition-delay: 0.24s;
}

/* --- Weniger Bewegung, Druck ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .tt-marquee__track,
    .tt-stamp__ring,
    .tt-hero__slide.is-active .tt-hero__image,
    .tt-hero__kicker::before,
    .tt-hero__scroll-line::after,
    .tt-header[data-nav-open="true"] .tt-nav {
        animation: none;
    }

    .tt-hero__slide,
    .tt-artist__image,
    .tt-mosaic .tt-mosaic__image,
    .tt-section .content-card__body .tt-figure img,
    .tt-section .content-card__body .gallery__item img {
        transition: none;
    }

    .tt-artist__link:hover .tt-artist__image,
    .tt-body .tt-mosaic__link:hover .tt-mosaic__image,
    .tt-section .content-card__body .tt-figure__link:hover img,
    .tt-section .content-card__body .gallery__link:hover img {
        transform: none;
    }
}

@media print {
    .tt-body::after,
    .tt-header,
    .tt-marquee,
    .tt-hero__scroll,
    .tt-footer__watermark {
        display: none;
    }

    .tt-main {
        padding-top: 0;
    }

    .tt-reveal {
        opacity: 1;
        transform: none;
    }
}