/*
| Werkstatt — "Warm und handgemacht"
|
| Papier, Tinte, Handarbeit. Der Gegenentwurf zur KI-Glätte: feine Körnung
| auf den FLÄCHEN (nicht als Schleier über allem, wie es terracotta gemacht
| hat), warme Erdtöne, eine Serife mit Eigenheiten.
|
| Fraunces ist dafür gebaut: variabel über Grad (opsz), Gewicht, SOFT und
| WONK. WONK dreht einzelne Buchstaben ins Schräge — das ist der Unterschied
| zwischen "Serife" und "gemacht". Fließtext in Hanken Grotesk, damit die
| Seite lesbar bleibt und nicht zur Speisekarte wird.
|
| Beide Schriften liegen als Datei daneben.
*/

@font-face {
    font-family: 'Fraunces';
    src: url('fonts/fraunces-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Hanken Grotesk';
    src: url('fonts/hanken-latin.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-display: swap;
}

/* Farbwelt Bäckerei/Floristik/Handwerk: Papierweiß mit Wärme, Tinte statt
   Schwarz, ein gedämpfter Naturton. Keine Verläufe. */
:root {
    --papier: #faf6ee;
    --papier-tief: #f1e9da;
    --tinte: #2a211a;
    --tinte-leise: #6f6154;
    --linie: #ddd0bb;
    --flut: #33291f;
    --akzent: #8a4b2a;
    --akzent-hell: #e0a276;
    --offen: #7aa661;

    --rand: clamp(1.25rem, 4.5vw, 4.5rem);
    --spalte: 64ch;

    /* Körnung als eingebettetes SVG — kein Abruf, keine Datei. Sie liegt auf
       den Flächen, nicht über der Seite: ein fixiertes Overlay legt sich
       sonst auch über Text und Bilder und macht beide stumpf. */
    --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--papier);
    color: var(--tinte);
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.125rem);
    line-height: 1.65;
    padding-bottom: env(safe-area-inset-bottom);
}

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--akzent);
    outline-offset: 3px;
}

.zahl {
    font-variant-numeric: tabular-nums;
}

/* ── Kopf ────────────────────────────────────────────────────────────── */

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    padding: 1.2rem var(--rand);
}

.wortmarke {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 14;
    font-weight: 600;
    font-size: 1.15rem;
    text-decoration: none;
}

.wortmarke img {
    display: block;
    height: 32px;
    width: auto;
}

.sprungmarken {
    display: flex;
    gap: clamp(0.9rem, 2.5vw, 1.5rem);
    font-size: 0.85rem;
    font-weight: 600;
}

.sprungmarken a {
    text-decoration: none;
    color: var(--tinte-leise);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.sprungmarken a:hover {
    color: var(--akzent);
    border-bottom-color: var(--akzent);
}

/* ── Der Aufmacher ───────────────────────────────────────────────────── */

.plakat {
    position: relative;
    padding: clamp(1.5rem, 4vw, 3.5rem) var(--rand) clamp(1.5rem, 4vw, 3rem);
    background: var(--papier-tief);
    background-image: var(--korn);
    background-blend-mode: multiply;
}

.branche {
    margin: 0 0 0.8rem;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 60, 'opsz' 9;
    font-size: 0.9rem;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.04em;
    color: var(--akzent);
}

/* WONK auf 1: Fraunces dreht dann einzelne Formen ins Schräge. Genau das
   unterscheidet diese Vorlage von einer beliebigen Serifenseite. */
.name {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 144;
    font-size: clamp(2.6rem, 1.7rem + 4.4vw, 6rem);
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.claim {
    margin: clamp(0.9rem, 2vw, 1.5rem) 0 0;
    max-width: 38ch;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 60, 'opsz' 20;
    font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
    font-style: italic;
    font-weight: 400;
    line-height: 1.35;
    color: var(--tinte-leise);
}

/* ── Kontaktband ─────────────────────────────────────────────────────── */

.kontaktband {
    background: var(--flut);
    background-image: var(--korn);
    background-blend-mode: soft-light;
    color: var(--papier);
    padding: clamp(1.4rem, 3vw, 2.2rem) var(--rand);
}

.kontaktband-innen {
    display: grid;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 52rem) {
    .kontaktband-innen {
        grid-template-columns: auto 1fr auto;
    }
}

.anrufen {
    display: inline-flex;
    align-items: baseline;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--papier);
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 40, 'opsz' 40;
    font-weight: 600;
    font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.2rem);
    border-bottom: 2px solid var(--akzent-hell);
    padding-bottom: 0.1rem;
}

.anrufen:hover {
    border-bottom-color: var(--papier);
}

.anrufen .vorsatz {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.7;
}

.status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.status[hidden] {
    display: none;
}

.punkt {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--tinte-leise);
    flex: none;
}

.status[data-offen='ja'] .punkt {
    background: var(--offen);
}

.anschrift {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.88;
}

/* ── Abschnitte ──────────────────────────────────────────────────────── */

.block {
    padding: clamp(2.2rem, 6vw, 4.5rem) var(--rand);
}

.block--flut {
    background: var(--papier-tief);
    background-image: var(--korn);
    background-blend-mode: multiply;
}

.block-kopf {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin: 0 0 1.4rem;
}

.zaehler {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--akzent);
}

h2 {
    margin: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'WONK' 1, 'opsz' 60;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.015em;
}

.text {
    max-width: var(--spalte);
}

.text p {
    margin: 0 0 1rem;
}

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

/* Leistungen wie von Hand aufgeschrieben: gepunktete Linie, Serife. */
.leistungen {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 44rem;
}

.leistungen li {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--linie);
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 50, 'opsz' 24;
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
    font-weight: 500;
}

.leistungen .nr {
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--akzent);
    flex: none;
}

/* ── Bilder: wie ins Album geklebt ───────────────────────────────────── */

/* Unregelmäßige Größen und ein leichter Versatz — nicht als Spielerei,
   sondern weil ein gleichmäßiges Raster hier nach Katalog aussähe. */
/* ── Das Plakatbild ──────────────────────────────────────────────────── */

/* Werkstatt haelt Mass: das Bild bleibt in derselben Breite wie die Galerie
   und bekommt denselben warmen Stich wie sie. */
.plakatbild {
    padding: clamp(1rem, 3vw, 2.25rem) var(--rand) 0;
}
.plakatbild img {
    display: block;
    width: 100%;
    max-width: 58rem;
    height: auto;
    aspect-ratio: 12 / 5;
    object-fit: cover;
    filter: sepia(0.18) saturate(0.92) contrast(1.02);
}

@media (max-width: 47.99rem) {
    .plakatbild img {
        aspect-ratio: 4 / 3;
    }
}

.galerie {
    display: grid;
    gap: clamp(0.8rem, 2vw, 1.5rem);
    /* 13rem statt 15rem: in den 58rem der Spalte stehen damit vier Bilder in
       einer Reihe statt drei plus einem verwaisten. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin: 0;
    max-width: 58rem;
}

.galerie figure {
    margin: 0;
}

.galerie figure:nth-child(even) {
    margin-top: clamp(0.8rem, 3vw, 2.5rem);
}

.galerie img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    filter: sepia(0.18) saturate(0.9) contrast(1.02);
    transition: filter 0.25s;
}

.galerie a:hover img {
    filter: sepia(0) saturate(1) contrast(1.02);
}

.galerie figcaption {
    margin-top: 0.5rem;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 60, 'opsz' 12;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--tinte-leise);
}

.lupe {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: none;
    place-items: center;
    padding: 1.5rem;
    background: rgb(51 41 31 / 0.95);
}

.lupe:target {
    display: grid;
}

.lupe img {
    max-width: min(100%, 56rem);
    max-height: 88vh;
    width: auto;
}

.lupe .zu {
    position: absolute;
    inset: 0;
}

/* ── Öffnungszeiten ──────────────────────────────────────────────────── */

.zeiten {
    width: 100%;
    max-width: 32rem;
    border-collapse: collapse;
}

.zeiten th,
.zeiten td {
    text-align: left;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--linie);
    font-weight: 500;
}

.zeiten td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.zeiten .zu {
    color: var(--tinte-leise);
    font-style: italic;
    font-weight: 500;
}

.hinweis {
    margin: 0.9rem 0 0;
    max-width: var(--spalte);
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'SOFT' 60, 'opsz' 14;
    font-style: italic;
    color: var(--tinte-leise);
}

/* ── Kontakt ─────────────────────────────────────────────────────────── */

.kontaktgitter {
    display: grid;
    gap: 1.4rem clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin: 0;
    max-width: 60rem;
}

.kontaktgitter dt {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--akzent);
    margin-bottom: 0.3rem;
}

.kontaktgitter dd {
    margin: 0;
    line-height: 1.55;
}

.netze {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fuss {
    padding: clamp(1.4rem, 3vw, 2.2rem) var(--rand) clamp(5rem, 8vw, 2.5rem);
    font-size: 0.85rem;
    color: var(--tinte-leise);
    border-top: 1px dashed var(--linie);
}

.fuss summary {
    cursor: pointer;
    color: var(--tinte);
    font-weight: 600;
}

.fuss address {
    font-style: normal;
    margin-top: 0.6rem;
    line-height: 1.6;
}

/* ── Anrufleiste ─────────────────────────────────────────────────────── */

.anrufleiste {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--flut);
    color: var(--papier);
    padding-bottom: env(safe-area-inset-bottom);
}

.anrufleiste a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    text-decoration: none;
    font-weight: 700;
}

.anrufleiste a + a {
    border-left: 1px solid rgb(250 246 238 / 0.2);
}

.anrufleiste .haupt {
    background: var(--akzent);
}

@media (min-width: 52rem) {
    .anrufleiste {
        display: none;
    }

    .fuss {
        padding-bottom: clamp(1.5rem, 4vw, 3rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

@media print {
    .sprungmarken,
    .anrufleiste,
    .lupe {
        display: none;
    }

    .plakat,
    .kontaktband,
    .block--flut {
        background: #fff;
        color: #000;
    }
}