/* ══════════════════════════════════════════════════════
   DOMLA THEME — based on the "Domla Designkonzept"
   Wood background, parchment sheets, medallion navigation,
   wax-seal buttons. Loaded after Tailwind and the Radzen theme.
   ══════════════════════════════════════════════════════ */

:root {
    --holz-tief: #140d07;
    --holz: #24170d;
    --holz-hell: #3a2615;
    --pergament: #ecdcb6;
    --pergament-hell: #f5ead0;
    --pergament-tief: #d9c290;
    --tinte: #2b1f14;
    --tinte-leise: #5b4631;
    --wachs: #7d2a1e;
    --wachs-hell: #a8402b;
    --messing: #c39a4b;
    --messing-hell: #e6c98a;
    --kerze: #ffb85c;
    --hell-auf-holz: #f1e4c6;
    --leise-auf-holz: #cdbb98;

    /* All fonts are self-hosted, see @font-face in app.css */
    --schrift-titel: "Cinzel", "Trajan Pro", "Times New Roman", serif;
    --schrift-text: "Alegreya", "Palatino Linotype", Palatino, Georgia, serif;
    --schrift-kapitaelchen: "Alegreya SC", "Palatino Linotype", Georgia, serif;
    --schrift-hand: "IM Fell English", "Palatino Linotype", Georgia, serif;

    --leiste: 116px;
    --breite: 1180px;
    --rand: clamp(1.25rem, 4vw, 3rem);
    --weich: cubic-bezier(.22, 1, .36, 1);

    --papier-korn: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    --holz-maserung: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='h'><feTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='4' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .05 0 0 0 0 .03 0 0 0 0 .01 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23h)'/></svg>");

    /* Legacy colour used by the account pages */
    --color-tavern-brown: var(--tinte);

    /* Radzen */
    --rz-primary: var(--wachs);
    --rz-primary-dark: #5a1b12;
    --rz-primary-light: var(--wachs-hell);
    --rz-primary-contrast: var(--pergament-hell);
    --rz-text-color: var(--tinte);
    --rz-text-secondary-color: var(--tinte-leise);
    --rz-success: #3d5a2e;
    --rz-warning: #9a5b12;
}

/* ── Base ── */
/* Element rules live in Tailwind's base layer so that utility classes in the pages still win */

@layer base {
html {
    scroll-behavior: smooth;
    background-color: var(--holz-tief);
}

body {
    min-height: 100vh;
    margin: 0;
    padding-left: var(--leiste);
    color: var(--hell-auf-holz);
    font-family: var(--schrift-text);
    font-size: 1.15rem;
    line-height: 1.62;
    background-color: #1f140d;
    background-image:
            linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
            url('/images/marketing/tavern-hero.webp'),
            url('/images/neoclassical-medieval-illustration-fair.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

h1, h2, h3 {
    font-family: var(--schrift-titel);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: .01em;
    text-wrap: balance;
    overflow-wrap: break-word;
}

a {
    color: var(--messing-hell);
    text-underline-offset: .18em;
}

:focus-visible {
    outline: 3px solid var(--kerze);
    outline-offset: 3px;
    border-radius: 6px;
}

.blatt :focus-visible {
    outline-color: var(--wachs);
}

.blatt a {
    color: var(--wachs);
}
}

.filter-vorrat {
    position: absolute;
    width: 0;
    height: 0;
}

.skip {
    position: absolute;
    top: -5rem;
    left: 1rem;
    z-index: 100;
    padding: .6rem 1rem;
    border-radius: 8px;
    background: var(--kerze);
    color: var(--tinte);
}

.skip:focus {
    top: 1rem;
}

/* Candle light vignette over the whole page */
.kerzenschein {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    background:
            radial-gradient(900px 700px at 22% 8%, #ffb85c21, #0000 65%),
            radial-gradient(140% 120% at 50% 40%, #0000 55%, #0804018c 100%);
    animation: 6s step-end infinite flackern;
}

@keyframes flackern {
    0%, to { opacity: 1 }
    12% { opacity: .93 }
    14% { opacity: 1 }
    47% { opacity: .96 }
    49% { opacity: 1 }
    78% { opacity: .9 }
    80% { opacity: 1 }
}

/* ── Parchment sheet ── */

.blatt {
    position: relative;
    isolation: isolate;
    color: var(--tinte);
}

.blatt::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Large sheets are slightly translucent (about 80 %) so the scene shimmers through;
       small elements on them (notes, cards, popups) keep their own opaque backgrounds */
    background:
            var(--papier-korn),
            radial-gradient(120% 90% at 50% 40%, #f5ead0cc 0%, #ecdcb6cc 55%, #d9c290cc 100%);
    filter: url(#rauer-rand);
    transform: rotate(var(--blatt-neigung, -.5deg));
}

/* Shadow on its own layer: an outer box-shadow is only painted outside the box,
   so it does not darken the scene behind the translucent parchment */
.blatt::after {
    content: "";
    position: absolute;
    inset: 4px;
    z-index: -2;
    box-shadow: 0 22px 34px #0000008c;
    transform: rotate(var(--blatt-neigung, -.5deg));
    pointer-events: none;
}

.seite {
    max-width: var(--breite);
    margin: 0 auto;
    /* Top space keeps the floating trial seal clear of the first sheet */
    padding: 5.5rem var(--rand) clamp(3rem, 8vh, 6rem);
}

.seite__blatt {
    --blatt-neigung: -.25deg;
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.4rem, 4vw, 3.5rem);
    animation: entrollen 1.2s var(--weich) backwards;
}

@keyframes entrollen {
    0% { clip-path: inset(-60px -60px 100%); opacity: .4 }
    to { clip-path: inset(-60px); opacity: 1 }
}

/* ── Buttons ── */

.siegel-knopf,
.village-primary-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 52px;
    padding: .75rem 1.6rem .75rem 1.2rem;
    border: 0;
    border-radius: 26px 30px 24px 32px / 30px 24px 32px 26px;
    background: radial-gradient(circle at 30% 25%, var(--wachs-hell), var(--wachs) 55%, #5a1b12);
    color: var(--pergament-hell);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.12rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: none;
    text-decoration: none;
    text-shadow: 0 1px #00000059;
    cursor: pointer;
    box-shadow: inset 0 2px #ffffff2e, inset 0 -4px 8px #00000059, 0 8px 18px #00000073;
    transition: transform .25s var(--weich), box-shadow .25s var(--weich);
}

.siegel-knopf::before,
.village-primary-action::before {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #c2553d, #6a2116);
    box-shadow: inset 0 0 0 2px #00000040, inset 0 0 0 5px #ffd2aa2e;
}

.siegel-knopf:hover,
.village-primary-action:hover {
    color: var(--pergament-hell);
    text-decoration: none;
    transform: translateY(-2px) rotate(-.6deg);
    box-shadow: inset 0 2px #fff3, inset 0 -4px 8px #00000059, 0 12px 26px #00000080, 0 0 30px #ff8c5040;
}

.siegel-knopf:active,
.village-primary-action:active {
    transform: translateY(1px) scale(.98);
}

.siegel-knopf--klein {
    min-height: 44px;
    padding: .5rem 1.1rem .5rem .9rem;
    font-size: 1rem;
}

.siegel-knopf--klein::before {
    width: 16px;
    height: 16px;
}

.rahmen-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .55rem 1.2rem;
    border: 1px solid var(--messing);
    outline: 1px solid #c39a4b73;
    outline-offset: 3px;
    color: var(--hell-auf-holz);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.rahmen-knopf:hover {
    background: #c39a4b26;
    color: var(--hell-auf-holz);
}

/* Ink framed button for use on parchment */
.village-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .55rem 1.2rem;
    border: 1px solid var(--tinte);
    border-radius: 0;
    outline: 1px solid #2b1f1466;
    outline-offset: 3px;
    background: transparent;
    color: var(--tinte);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.village-secondary-action:hover {
    background: #2b1f1414;
    color: var(--tinte);
    transform: none;
    box-shadow: none;
}

.village-secondary-action:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* ── Floating trial seal and scroll shade (no header bar) ── */

.probe-siegel {
    position: fixed;
    top: calc(1rem + env(safe-area-inset-top, 0px));
    right: var(--rand);
    z-index: 36;
}

/* Spans the full width including the menu, so there is no edge anywhere */
.scroll-schatten {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 34;
    height: 110px;
    pointer-events: none;
    background: linear-gradient(180deg, #0a0603d9 0%, #0a060399 45%, #0a060300 100%);
    opacity: 0;
    transition: opacity .35s var(--weich);
}

.ist-gescrollt .scroll-schatten {
    opacity: 1;
}

/* ── Side navigation with the illustrated place icons ── */

.leiste {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    width: var(--leiste);
    /* No own background: the icons stand freely on the page background */
    text-shadow: 0 1px 3px #000, 0 0 8px #000000b3;
}

.leiste ul {
    display: grid;
    gap: .4rem;
    width: 100%;
    max-height: 100%;
    margin: 0;
    padding: .8rem 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    list-style: none;
}

.leiste a {
    display: grid;
    justify-items: center;
    gap: .1rem;
    padding: .4rem .3rem;
    color: var(--hell-auf-holz);
    text-align: center;
    text-decoration: none;
}

.leiste__bild {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px #0000008c);
    transition: transform .25s var(--weich), filter .25s;
}

.leiste__ort {
    margin-top: .35rem;
    font-family: var(--schrift-titel);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .05em;
}

.leiste__funktion {
    color: var(--leise-auf-holz);
    font-size: .95rem;
    line-height: 1;
}

.leiste a:hover .leiste__bild {
    transform: scale(1.12);
    filter: drop-shadow(0 0 10px #ffc850d9) drop-shadow(0 0 4px #ffa01499);
}

.leiste a.ist-aktiv .leiste__bild {
    filter: drop-shadow(0 0 8px #ffb85cbf) drop-shadow(0 2px 6px #0000008c);
}

.leiste a.ist-aktiv .leiste__ort {
    color: var(--kerze);
}

/* ── Footer ── */

.fuss {
    display: grid;
    justify-items: center;
    gap: .4rem;
    padding: 1.1rem var(--rand) 1.3rem;
    color: var(--leise-auf-holz);
    text-align: center;
    text-shadow: 0 1px 3px #000, 0 0 8px #000000b3;
}

.fuss__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .1rem 0;
    font-family: var(--schrift-kapitaelchen);
    font-size: .98rem;
}

.fuss__links a {
    padding: .3rem .1rem;
    color: var(--leise-auf-holz);
    text-decoration: none;
}

.fuss__links a:hover {
    color: var(--hell-auf-holz);
}

.fuss__links a + a::before {
    content: "·";
    display: inline-block;
    margin: 0 .7rem;
    color: var(--messing);
}

.fuss__zeile {
    max-width: 60rem;
    font-size: .85rem;
    line-height: 1.45;
}

/* ══════════════════════════════════════════════════════
   PAGE CONTENT ON PARCHMENT
   ══════════════════════════════════════════════════════ */

.village-kicker {
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: none;
    color: var(--wachs);
}

/* ── Landing page ── */

.village-landing,
.village-merchant-page,
.village-checkout-page,
.village-about-page {
    color: var(--tinte);
}

.village-hero {
    padding-top: 0;
}

.village-hero-copy {
    padding: 0;
}

.village-hero-title {
    max-width: none;
    color: var(--tinte);
    font-size: clamp(2.1rem, 3.9vw, 3.5rem);
    line-height: 1.12;
    text-shadow: none;
}

/* Calm small-caps line in the same ink as the heading */
.village-hero-subtitle {
    margin-top: .7rem;
    color: var(--tinte);
    font-family: var(--schrift-titel);
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    font-style: normal;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: .06em;
    text-shadow: none;
}

.village-hero-text {
    max-width: 33rem;
    margin-top: 1.4rem;
    color: var(--tinte-leise);
    font-size: 1.25rem;
    line-height: 1.62;
    text-shadow: none;
}

.village-hero-actions {
    gap: 1.2rem 1.8rem;
    margin-top: 2rem;
}

.village-feature-row {
    gap: clamp(1rem, 2.5vw, 2rem);
    border-top: 1px solid #2b1f144d;
    padding-top: 2rem;
}

.village-feature-card {
    padding: 1.4rem 1.2rem;
    border: 2px solid var(--tinte);
    outline: 1px solid var(--tinte);
    outline-offset: -7px;
    background: linear-gradient(#ffffff40, #ffffff40), var(--pergament-hell);
    box-shadow: none;
}

.village-feature-card h3 {
    margin-bottom: .4rem;
    color: var(--tinte);
    font-size: 1.1rem;
}

.village-feature-card p {
    color: var(--tinte-leise);
    font-size: 1.02rem;
    line-height: 1.45;
}

.village-divider {
    margin: 2.4rem 0 1.2rem;
    color: var(--wachs);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: none;
}

.village-divider::before,
.village-divider::after {
    background: #2b1f144d;
}

.village-accordion-list {
    gap: .8rem;
}

.village-details {
    border: 0;
    background: var(--papier-korn), linear-gradient(170deg, var(--pergament-hell), var(--pergament));
    box-shadow: 0 6px 14px #0000002e, 0 0 0 1px #2b1f1426;
}

.village-details summary {
    min-height: 44px;
    padding: 1rem 1.3rem;
    color: var(--tinte);
    font-size: 1.1rem;
    letter-spacing: normal;
}

.village-details-arrow {
    color: var(--wachs);
    font-size: 1.4rem;
    line-height: 1;
}

.village-details > div {
    padding: 0 1.3rem 1.2rem;
    border-top: 1px solid #2b1f1426;
    color: var(--tinte-leise);
    font-size: 1.05rem;
    line-height: 1.55;
}

.village-about-teaser,
.village-about-cta {
    border: 1px dashed var(--wachs);
    border-radius: 0;
    background: linear-gradient(#7d2a1e0f, #7d2a1e0f), var(--pergament-hell);
    box-shadow: none;
}

.village-about-teaser h2,
.village-about-section h2,
.village-about-cta h2 {
    color: var(--tinte);
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

.village-about-teaser p:not(.village-kicker),
.village-about-cta p {
    color: var(--tinte-leise);
    font-size: 1.05rem;
}

.village-story-arrow {
    width: 58px;
    height: 58px;
    min-width: 58px;
    border: 0;
    border-radius: 48% 52% 50% 50%;
    background: radial-gradient(circle at 35% 30%, var(--wachs-hell), var(--wachs) 60%, #5a1b12);
    color: var(--pergament-hell);
    box-shadow: inset 0 0 0 4px #0000002e, 0 6px 12px #00000059;
}

.village-story-arrow:hover {
    color: var(--pergament-hell);
    box-shadow: inset 0 0 0 4px #0000002e, 0 8px 18px #00000073, 0 0 24px #ff8c5040;
}

.village-story-link {
    color: var(--wachs);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    text-shadow: none;
    text-decoration-color: var(--wachs);
}

.village-story-link:hover {
    color: var(--wachs-hell);
    text-decoration-color: var(--wachs-hell);
}

.village-disclaimer {
    color: var(--tinte-leise);
    font-family: var(--schrift-hand);
    font-size: 1rem;
    text-shadow: none;
}

/* ── Merchant (plans) ── */

.village-merchant-header,
.village-checkout-header,
.village-about-header {
    max-width: 46rem;
}

.village-merchant-header h1,
.village-checkout-header h1,
.village-about-header h1 {
    color: var(--tinte);
    font-size: clamp(2rem, 4vw, 3.3rem);
    text-shadow: none;
}

.village-merchant-header p,
.village-checkout-header p,
.village-about-header p:not(.village-kicker) {
    max-width: 40rem;
    color: var(--tinte-leise);
    font-size: 1.22rem;
    line-height: 1.55;
    text-shadow: none;
}

.village-merchant-controls {
    gap: 1.2rem;
    margin-bottom: 2.6rem;
}

.village-billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 46px;
    padding: .5rem 1.15rem;
    border: 1px solid #c39a4b80;
    border-radius: 999px;
    background: #140d0799;
    color: var(--hell-auf-holz);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}

.village-billing-toggle:has(input:checked) {
    border-color: var(--messing-hell);
    background: var(--messing);
    color: var(--tinte);
}

.village-billing-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--wachs);
}

.village-trial-banner {
    padding: .8rem 1.2rem;
    border: 1px dashed var(--wachs);
    border-radius: 0;
    background: linear-gradient(#7d2a1e0f, #7d2a1e0f), var(--pergament-hell);
    color: var(--wachs);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.1rem;
    font-weight: 500;
    box-shadow: none;
}

.village-product-grid {
    gap: clamp(1rem, 2.5vw, 2rem);
}

.village-product-card {
    gap: .8rem;
    padding: 2.2rem 1.8rem 2rem;
    border: 2px solid var(--tinte);
    border-radius: 0;
    outline: 1px solid var(--tinte);
    outline-offset: -9px;
    background: var(--papier-korn), linear-gradient(175deg, var(--pergament-hell), var(--pergament));
    box-shadow: 0 18px 30px #00000040;
    transition: transform .5s var(--weich), box-shadow .5s var(--weich);
}

.village-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 40px #00000059, 0 0 50px #ffb85c40;
}

.village-product-card h2 {
    color: var(--tinte);
    font-size: 1.8rem;
    text-align: center;
}

.village-product-description {
    color: var(--tinte-leise);
    font-family: var(--schrift-kapitaelchen);
    font-weight: 500;
}

.village-product-explanation {
    margin: .4rem 0 .8rem;
    color: var(--tinte-leise);
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.5;
    text-align: center;
}

.village-price-panel {
    gap: 1rem;
    padding: 1.1rem 0 0;
    border: 0;
    border-top: 1px solid #2b1f144d;
    border-radius: 0;
    background: transparent;
    text-align: center;
}

.village-price {
    color: var(--wachs);
    font-family: var(--schrift-titel);
    font-size: 2rem;
}

.village-price-caption,
.village-yearly-price span {
    color: var(--tinte-leise);
    font-size: 1rem;
}

.village-yearly-price strong {
    color: var(--tinte);
    font-family: var(--schrift-titel);
    font-size: 1.15rem;
}

.village-product-card .village-secondary-action:hover {
    border-color: var(--wachs);
    background: var(--wachs);
    color: var(--pergament-hell);
}

.village-loading-note {
    color: var(--tinte-leise);
    font-family: var(--schrift-hand);
    font-size: 1.2rem;
}

/* ── Checkout ── */

.village-checkout-card {
    max-width: 44rem;
    padding: 2rem 2rem 1.8rem;
    border: 2px solid var(--tinte);
    border-radius: 0;
    outline: 1px solid var(--tinte);
    outline-offset: -9px;
    background: linear-gradient(#ffffff40, #ffffff40), var(--pergament-hell);
    box-shadow: none;
}

.village-checkout-summary h2 {
    color: var(--tinte);
    font-size: 1.6rem;
}

.village-checkout-description {
    color: var(--tinte-leise);
    font-family: var(--schrift-kapitaelchen);
    font-weight: 500;
}

.village-checkout-price-box {
    border: 0;
    border-top: 1px dotted #2b1f1459;
    border-bottom: 1px dotted #2b1f1459;
    border-radius: 0;
    background: transparent;
}

.village-checkout-label {
    color: var(--tinte-leise);
    font-family: var(--schrift-kapitaelchen);
    font-size: .98rem;
}

.village-checkout-price-box strong {
    color: var(--tinte);
    font-size: 1.1rem;
}

.village-checkout-today {
    border: 1px dashed var(--wachs);
    border-radius: 0;
    background: linear-gradient(#7d2a1e0f, #7d2a1e0f), var(--pergament-hell);
    color: var(--wachs);
}

.village-checkout-today span {
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.05rem;
    font-weight: 500;
}

.village-checkout-today strong {
    color: var(--wachs);
    font-size: 1.8rem;
}

.village-checkout-no-obligation-note {
    border: 1px solid #3d5a2e80;
    border-radius: 0;
    background: linear-gradient(#3d5a2e14, #3d5a2e14), var(--pergament-hell);
    color: #2e4423;
    box-shadow: none;
}

.village-checkout-no-obligation-note strong {
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: .02em;
    text-transform: none;
}

.village-checkout-login-link {
    color: var(--wachs);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: normal;
    text-decoration-color: var(--wachs);
}

.village-checkout-login-link:hover {
    color: var(--wachs-hell);
}

.village-checkout-note {
    color: var(--tinte-leise);
    font-size: 1rem;
}

/* ── About ── */

.village-about-photo-card {
    --blatt-neigung: 0deg;
    border: 0;
    border-radius: 0;
    background: var(--pergament-hell);
    box-shadow: 0 0 0 2px var(--messing), 0 0 0 7px #1d1209, 0 0 0 8px #c39a4b80, 0 20px 40px #00000059;
}

.village-about-photo {
    border-radius: 0;
}

.village-about-photo-card figcaption {
    color: var(--tinte-leise);
    font-family: var(--schrift-hand);
    font-size: 1.05rem;
}

.village-about-section {
    border: 1px solid #2b1f1459;
    border-radius: 0;
    background: linear-gradient(#ffffff40, #ffffff40), var(--pergament-hell);
    box-shadow: none;
}

.village-about-section p {
    color: var(--tinte-leise);
    font-size: 1.1rem;
    line-height: 1.6;
}

.village-about-signature {
    color: var(--wachs) !important;
    font-family: var(--schrift-hand);
    font-size: 1.8rem !important;
    font-style: italic;
    font-weight: 400;
}

/* ══════════════════════════════════════════════════════
   PAGE BUILDING BLOCKS
   ══════════════════════════════════════════════════════ */

/* ── Page head: swinging sign and title sheet ── */

.seitenkopf__schild {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: start;
    margin: 0 0 -.6rem 2.5rem;
    transform-origin: 50% 0;
    animation: 3.2s ease-out both schaukeln;
}

.seitenkopf__brett {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem 1.4rem;
    border-radius: 6px;
    background: var(--holz-maserung), linear-gradient(180deg, #4a3019, #2a1a0d);
    color: var(--messing-hell);
    font-family: var(--schrift-titel);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .06em;
    box-shadow: inset 0 0 0 2px #1a1009, inset 0 0 0 3px #c39a4b99, 0 10px 18px #0000008c;
}

@keyframes schaukeln {
    0% { transform: rotate(-7deg) }
    25% { transform: rotate(5deg) }
    45% { transform: rotate(-3deg) }
    65% { transform: rotate(1.5deg) }
    85% { transform: rotate(-.5deg) }
    to { transform: none }
}

.seitenkopf__blatt {
    --blatt-neigung: -.4deg;
    padding: clamp(2.2rem, 4vw, 3.2rem) clamp(1.6rem, 4vw, 3.2rem);
}

.seitenkopf__blatt h1 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.3rem);
    text-align: left;
}

.seitenkopf__text {
    max-width: 46rem;
    margin-top: 1rem;
    color: var(--tinte-leise);
    font-size: 1.22rem;
}

.seitenkopf__text p + p {
    margin-top: .6rem;
}

.seitenkopf__meta {
    color: var(--wachs);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.05rem;
}

/* Content below the page head */
.seite__inhalt {
    display: grid;
    gap: clamp(1.6rem, 3vw, 2.5rem);
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* ── Small parts ── */

.ort-schild {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1rem;
    color: var(--wachs);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.15rem;
}

.tinte-link {
    color: var(--wachs);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.1rem;
    text-decoration: underline 1px;
    text-underline-offset: .3em;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.tinte-link:hover {
    text-decoration-thickness: 2px;
}

.blatt .rahmen-knopf--tinte,
.rahmen-knopf--tinte {
    border-color: var(--tinte);
    outline-color: #2b1f1466;
    background: transparent;
    color: var(--tinte);
    cursor: pointer;
}

.rahmen-knopf--tinte:hover {
    background: #2b1f1414;
    color: var(--tinte);
}

.rahmen-knopf--tinte:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.zier-trenner {
    margin: 2.4rem 0 0;
    color: var(--messing);
    font-size: 1.1rem;
    letter-spacing: .6em;
    text-align: center;
}

/* Notes on parchment: hint, success, error */
.hinweis {
    padding: .9rem 1.2rem;
    border: 1px dashed var(--wachs);
    background: linear-gradient(#7d2a1e0f, #7d2a1e0f), var(--pergament-hell);
    color: var(--tinte);
}

.hinweis__titel {
    display: block;
    margin-bottom: .2rem;
    color: var(--wachs);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.1rem;
}

.hinweis--erfolg {
    border: 1px solid #3d5a2e80;
    background: linear-gradient(#3d5a2e14, #3d5a2e14), var(--pergament-hell);
    color: #2e4423;
}

.hinweis--fehler {
    border: 1px solid var(--wachs);
    background: linear-gradient(#7d2a1e1f, #7d2a1e1f), var(--pergament-hell);
    color: #5a1b12;
}

.hinweis--leise {
    border: 1px solid #2b1f1459;
    background: linear-gradient(#ffffff40, #ffffff40), var(--pergament-hell);
}

.lade-hinweis {
    padding: 1.5rem 0;
    color: var(--tinte-leise);
    font-family: var(--schrift-hand);
    font-size: 1.2rem;
    font-style: italic;
    text-align: center;
}

/* ── Legal documents ── */

.dokument {
    --blatt-neigung: 0deg;
    max-width: 52rem;
    padding: clamp(2rem, 4vw, 3.4rem);
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: 1.08rem;
    line-height: 1.6;
}

.dokument h2 {
    margin: 2rem 0 .6rem;
    color: var(--tinte);
    font-size: 1.25rem;
    letter-spacing: normal;
}

.dokument h3 {
    margin: 1.4rem 0 .4rem;
    font-size: 1.1rem;
}

.dokument section:first-child > h2 {
    margin-top: 0;
}

.dokument p + p,
.dokument .space-y-3 > * + * {
    margin-top: .7rem;
}

.dokument ul,
.dokument ol {
    display: grid;
    gap: .3rem;
    margin: .6rem 0;
    padding-left: 1.3rem;
}

.dokument ul {
    list-style: disc;
}

.dokument ol {
    list-style: decimal;
}

.dokument table {
    min-width: 34rem;
    border-collapse: collapse;
    font-size: 1rem;
}

.dokument th,
.dokument td {
    padding: .4rem .8rem .4rem 0;
    border-bottom: 1px solid #2b1f1433;
    text-align: left;
}

.dokument__angaben {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: .3rem 1.5rem;
    margin: 0 0 2.2rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid #2b1f144d;
}

.dokument__angaben dt {
    color: var(--tinte-leise);
    font-family: var(--schrift-kapitaelchen);
}

.dokument__angaben dd {
    margin: 0;
}

.dokument__download {
    margin-top: .4rem;
}

/* ── Tavern: notes pinned on a board ── */

.brett {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1.6rem;
    padding: clamp(1.6rem, 3vw, 2.6rem);
    border-radius: 6px;
    background: var(--holz-maserung), linear-gradient(160deg, #3b2716, #24170d);
    box-shadow: inset 0 0 0 10px #1a1009, inset 0 0 0 12px #c39a4b66, 0 24px 40px #0000008c;
}

.zettel {
    --neigung: -1.2deg;
    position: relative;
    color: var(--tinte);
    background: var(--papier-korn), linear-gradient(170deg, var(--pergament-hell), var(--pergament));
    box-shadow: 0 10px 18px #00000080;
    transform: rotate(var(--neigung));
    transition: transform .4s var(--weich);
}

.zettel:nth-child(4n + 2) { --neigung: .8deg }
.zettel:nth-child(4n + 3) { --neigung: -.5deg }
.zettel:nth-child(4n + 4) { --neigung: 1.1deg }

.zettel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #d8573f, #6a2116);
    box-shadow: 0 2px 2px #00000080;
    translate: -50%;
}

.zettel[open] {
    z-index: 2;
    transform: rotate(0) scale(1.01);
}

.zettel summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
    padding: 1.7rem 1.5rem 1.2rem;
    font-family: var(--schrift-titel);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    list-style: none;
    cursor: pointer;
}

.zettel summary::-webkit-details-marker {
    display: none;
}

.zettel summary h2 {
    margin: 0;
    font: inherit;
    letter-spacing: normal;
    text-align: left;
}

.zettel summary::after {
    content: "+";
    color: var(--wachs);
    font-size: 1.6rem;
    line-height: .9;
    transition: transform .3s var(--weich);
}

.zettel[open] summary::after {
    transform: rotate(45deg);
}

.zettel__antwort {
    padding: 0 1.5rem 1.5rem;
    color: var(--tinte-leise);
    font-size: 1.05rem;
    line-height: 1.55;
}

.zettel:not([open]):hover {
    animation: .6s ease-in-out wackeln;
}

@keyframes wackeln {
    25% { transform: rotate(calc(var(--neigung) + 1.5deg)) }
    60% { transform: rotate(calc(var(--neigung) - 1deg)) }
}

/* ── Chronicles: article sheet ── */

.artikel__leiste {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Overview and RSS links sit directly on the dark background */
.artikel__leiste > a {
    color: var(--leise-auf-holz);
    text-shadow: 0 1px 3px #000;
}

.artikel__leiste > a:hover {
    color: var(--hell-auf-holz);
}

/* Overview: one parchment sheet per article */
.chronik-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
    gap: clamp(1.4rem, 3vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.chronik-liste > li {
    display: flex;
}

.chronik-eintrag {
    --blatt-neigung: 0deg;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    width: 100%;
    padding: clamp(1.6rem, 3vw, 2.2rem);
}

.chronik-eintrag h2 {
    margin: 0;
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
    text-align: left;
}

.chronik-eintrag h2 a {
    color: var(--tinte);
    text-decoration: none;
}

.chronik-eintrag h2 a:hover {
    color: var(--wachs);
}

.chronik-eintrag > p:not(.seitenkopf__meta) {
    flex: 1;
    color: var(--tinte-leise);
}

.chronik-eintrag .tinte-link {
    align-self: flex-start;
}

/* Links to prices, FAQ and further articles below an article */
.artikel__weiter {
    margin-top: 2.4rem;
}

.artikel__weiter h2 {
    margin: 0 0 .8rem;
    font-size: 1.35rem;
}

.artikel__weiter ul {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.artikel__blatt {
    --blatt-neigung: 0deg;
    max-width: 860px;
    padding: clamp(2rem, 5vw, 4rem);
}

.artikel__inhalt {
    font-size: 1.2rem;
    line-height: 1.65;
}

.artikel__inhalt > p:first-child::first-letter {
    float: left;
    padding: .3rem .6rem 0 0;
    color: var(--wachs);
    font-family: var(--schrift-titel);
    font-size: 4.2rem;
    font-weight: 700;
    line-height: .85;
}

.artikel__inhalt h2 {
    margin: 2.6rem 0 1rem;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.artikel__inhalt h3 {
    margin: 1.8rem 0 .6rem;
    font-size: 1.3rem;
}

.artikel__inhalt p + p {
    margin-top: .9rem;
}

.artikel__inhalt ul,
.artikel__inhalt ol {
    display: grid;
    gap: .5rem;
    margin: 1rem 0;
    padding-left: 1.6rem;
}

.artikel__inhalt ul {
    padding-left: 0;
    list-style: none;
}

.artikel__inhalt ul > li {
    position: relative;
    padding-left: 1.6rem;
}

.artikel__inhalt ul > li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--wachs);
}

.artikel__inhalt ol {
    list-style: decimal;
}

.artikel__inhalt ol > li::marker {
    color: var(--wachs);
    font-family: var(--schrift-titel);
}

.artikel__inhalt strong {
    color: var(--tinte);
}

.artikel__inhalt img {
    max-width: 100%;
    height: auto;
    margin: 1.6rem 0;
    box-shadow: 0 0 0 2px var(--messing), 0 12px 24px #00000059;
}

.artikel__autor {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1.6rem;
    margin-top: 2.8rem;
    padding-top: 2rem;
    border-top: 1px solid #2b1f144d;
}

.artikel__autor img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--messing), 0 8px 16px #00000059;
}

.artikel__autor h2 {
    margin: .2rem 0 .4rem;
    font-size: 1.35rem;
}

.artikel__autor p {
    color: var(--tinte-leise);
}

/* ── Forms ── */

.formular-blatt {
    --blatt-neigung: -.3deg;
    padding: clamp(2rem, 4vw, 3rem);
}

.formular-abschnitt {
    display: grid;
    gap: 1rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #2b1f144d;
}

.formular-abschnitt + .formular-abschnitt {
    padding-top: 2rem;
}

.formular-abschnitt h2 {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0;
    font-size: 1.6rem;
}

.formular-abschnitt__nummer {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--wachs-hell), var(--wachs) 60%, #5a1b12);
    color: var(--pergament-hell);
    font-size: 1.1rem;
    box-shadow: inset 0 0 0 3px #0000002e;
}

.formular__feld {
    display: grid;
    gap: .35rem;
}

.formular__feld label,
.formular__label {
    color: var(--tinte);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.08rem;
}

.formular__hinweis {
    color: var(--tinte-leise);
    font-size: 1rem;
    font-style: italic;
}

.formular__fehler,
.formular .validation-message {
    color: var(--wachs);
    font-size: 1rem;
    font-style: italic;
}

.formular__zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.4rem;
}

.formular__adresse {
    display: flex;
    align-items: stretch;
}

.formular__adresse > span {
    display: flex;
    align-items: center;
    padding: 0 .8rem;
    border: 2px solid var(--tinte-leise);
    background: #2b1f1414;
    color: var(--tinte-leise);
    font-family: ui-monospace, Consolas, monospace;
    font-size: .95rem;
    white-space: nowrap;
}

.formular__adresse > span:first-child {
    border-right: 0;
}

.formular__adresse > span:last-child {
    border-left: 0;
}

.formular__adresse .rz-textbox,
.formular__adresse .rz-inputmask {
    flex: 1;
    min-width: 0;
    border-radius: 0 !important;
}

.formular__beleg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem 1.2rem;
    padding: .8rem 1rem;
    border: 2px solid var(--tinte);
    outline: 1px solid var(--tinte);
    outline-offset: -6px;
    background: linear-gradient(#ffffff40, #ffffff40), var(--pergament-hell);
}

.formular__beleg strong {
    color: var(--wachs);
    font-family: var(--schrift-titel);
    font-size: 1.2rem;
}

.formular__zustimmung {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    cursor: pointer;
}

.formular__absenden {
    display: grid;
    gap: 1rem;
    padding-top: 2rem;
}

.formular__absenden .rz-button {
    justify-self: center;
    min-height: 62px;
    padding: .9rem 2rem !important;
    border: 0 !important;
    border-radius: 26px 30px 24px 32px / 30px 24px 32px 26px !important;
    font-size: 1.15rem !important;
    box-shadow: inset 0 2px #ffffff2e, inset 0 -4px 8px #00000059, 0 8px 18px #00000073 !important;
}

.formular__warten {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    background: #140d07a6;
}

.formular__warten > div {
    max-width: 26rem;
    padding: 2rem 2.2rem;
    color: var(--tinte);
    text-align: center;
    background: var(--papier-korn), linear-gradient(170deg, var(--pergament-hell), var(--pergament));
    box-shadow: 0 0 0 1px var(--messing), 0 20px 40px #0009;
}

.formular__warten .w20 {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--wachs);
    animation: 1.4s linear infinite rollen;
}

@keyframes rollen {
    to { transform: rotate(360deg) }
}

.formular__warten strong {
    display: block;
    font-family: var(--schrift-titel);
    font-size: 1.3rem;
}

/* ── Letter (confirmation after checkout) ── */

.brief {
    --blatt-neigung: .5deg;
    max-width: 860px;
    padding: clamp(2.4rem, 5vw, 4rem) clamp(1.8rem, 5vw, 4.2rem) clamp(3rem, 6vw, 4.5rem);
}

.brief h2 {
    margin: 2rem 0 .6rem;
    font-size: 1.5rem;
}

.brief p {
    font-size: 1.15rem;
}

.brief__gruss {
    margin-top: 2rem;
}

.wachssiegel {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: 0 0 1.4rem auto;
    border-radius: 48% 52% 50% 50% / 50% 47% 53% 50%;
    background: radial-gradient(circle at 35% 30%, var(--wachs-hell), var(--wachs) 60%, #5a1b12);
    color: #5a1b12;
    font-family: var(--schrift-titel);
    font-size: 2.6rem;
    font-weight: 700;
    text-shadow: 0 1px #ffc8a059, 0 -1px #0006;
    transform: rotate(-12deg);
    box-shadow: inset 0 0 0 6px #0003, inset 0 0 0 10px #ffd2aa24, 0 8px 14px #00000073;
}

/* ── Watchtower (customer area) ── */

.konto-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.konto-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .45rem 1.15rem;
    border: 1px solid #c39a4b80;
    border-radius: 999px;
    background: #140d0799;
    color: var(--hell-auf-holz);
    font-family: var(--schrift-kapitaelchen);
    text-decoration: none;
    transition: background-color .2s, color .2s;
}

.konto-nav a:hover,
.konto-nav a[aria-current] {
    border-color: var(--messing-hell);
    background: var(--messing);
    color: var(--tinte);
}

.konto-blatt {
    --blatt-neigung: -.2deg;
    padding: clamp(1.6rem, 3.5vw, 2.6rem);
}

.konto-blatt > h2 {
    margin: 0 0 1.2rem;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.konto-liste {
    display: grid;
    gap: 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.konto-karte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.6rem;
    padding: 1.4rem 1.6rem;
    border: 2px solid var(--tinte);
    outline: 1px solid var(--tinte);
    outline-offset: -7px;
    background: linear-gradient(#ffffff40, #ffffff40), var(--pergament-hell);
}

.konto-karte h3 {
    margin: 0;
    font-size: 1.35rem;
}

.konto-karte__fakten {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem 1.2rem;
    margin: .5rem 0 0;
    padding: 0;
    color: var(--tinte-leise);
    font-size: 1.02rem;
    list-style: none;
}

.konto-karte__fakten li::before {
    content: "✦";
    margin-right: .4rem;
    color: var(--wachs);
    font-size: .8em;
}

.konto-karte__preis {
    display: grid;
    justify-items: end;
    gap: .5rem;
    text-align: right;
}

.konto-karte__preis strong {
    color: var(--wachs);
    font-family: var(--schrift-titel);
    font-size: 1.5rem;
    line-height: 1.1;
}

.konto-karte__preis small {
    color: var(--tinte-leise);
    font-size: .98rem;
}

.konto-karte--leise {
    border-width: 1px;
    outline: 0;
}

.konto-werte {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem 2.5rem;
    margin: 0;
}

.konto-werte div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem 1.5rem;
    padding-bottom: .35rem;
    border-bottom: 1px dotted #2b1f1459;
}

.konto-werte dt {
    flex: none;
    color: var(--tinte-leise);
    font-family: var(--schrift-kapitaelchen);
}

.konto-werte dd {
    margin: 0 0 0 auto;
    text-align: right;
}

.konto-werte__betont {
    color: var(--wachs);
    font-family: var(--schrift-titel);
    font-weight: 700;
}

.konto-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.4rem;
}

.konto-tabelle {
    overflow-x: auto;
}

.konto-tabelle table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    font-size: 1.02rem;
}

.konto-tabelle th {
    padding: .5rem .8rem .5rem 0;
    border-bottom: 2px solid var(--tinte);
    color: var(--tinte-leise);
    font-family: var(--schrift-kapitaelchen);
    font-weight: 500;
    text-align: left;
}

.konto-tabelle td {
    padding: .6rem .8rem .6rem 0;
    border-bottom: 1px dotted #2b1f1459;
}

.konto-tabelle .rechts {
    text-align: right;
}

.konto-kuendigen {
    justify-self: start;
    padding: .4rem 0;
    border: 0;
    background: none;
    color: var(--leise-auf-holz);
    font: inherit;
    font-size: 1rem;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

.konto-kuendigen:hover {
    color: var(--hell-auf-holz);
}

.konto-kuendigen:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.versions-dialog {
    display: grid;
    gap: 1.2rem;
    padding: .6rem;
}

.versions-dialog__knoepfe {
    display: flex;
    justify-content: flex-end;
    gap: .8rem;
}

/* ── Lost in the fog (404 and errors) ── */

.verirrt {
    display: grid;
    place-items: center;
    min-height: 60svh;
    padding: 2rem 0;
}

.verirrt__blatt {
    max-width: 40rem;
    padding: 3rem;
    text-align: center;
}

.verirrt__wurf {
    display: grid;
    place-items: center;
    width: 90px;
    height: 90px;
    margin: 0 auto 1rem;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: var(--wachs);
    color: var(--pergament-hell);
    font: 700 2.6rem var(--schrift-titel);
}

.verirrt h1 {
    margin: 0 0 1rem;
    font-size: 2.4rem;
    text-align: center;
}

.verirrt__wege {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.6rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.verirrt__wege a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    color: var(--wachs);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.1rem;
}

.verirrt__technik {
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid #2b1f144d;
    color: var(--tinte-leise);
    font-size: 1rem;
    text-align: left;
}

.verirrt__technik h2 {
    margin: 0 0 .5rem;
    font-size: 1.15rem;
}

.verirrt__technik p + p {
    margin-top: .6rem;
}

/* The about page keeps its own narrow columns inside a full width sheet */
.village-about-page.blatt {
    max-width: none;
}

@media (max-width: 760px) {
    .seitenkopf__schild {
        margin-left: 1rem;
    }

    .seitenkopf__blatt h1 {
        font-size: clamp(1.6rem, 7.5vw, 2.2rem);
    }

    .brett,
    .formular__zweispaltig,
    .konto-werte {
        grid-template-columns: 1fr;
    }

    .dokument__angaben {
        grid-template-columns: 1fr;
    }

    .dokument__angaben dd {
        margin-bottom: .5rem;
    }

    .konto-karte {
        grid-template-columns: 1fr;
    }

    .konto-karte__preis {
        justify-items: start;
        text-align: left;
    }

    .artikel__autor {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .formular__adresse {
        flex-wrap: wrap;
    }

    .formular__adresse > span:first-child {
        display: none;
    }

    .formular__adresse .rz-textbox,
    .formular__adresse .rz-inputmask {
        flex-basis: 100%;
    }

    .formular__adresse > span:last-child {
        border-left: 2px solid var(--tinte-leise);
        border-top: 0;
    }
}

/* ══════════════════════════════════════════════════════
   TILES — soft, rounded, slightly translucent cards on parchment.
   Replaces the ink double frames of the concept for all content cards.
   ══════════════════════════════════════════════════════ */

.village-feature-card,
.village-about-section,
.village-checkout-card,
.village-product-card,
.konto-karte,
.formular__beleg,
.hinweis--leise {
    border: 1px solid #78350f38;
    border-radius: .55rem;
    outline: 0;
    background: linear-gradient(180deg, #fffbebb3, #fef3c78c);
    box-shadow: inset 0 0 24px #78350f0f, 0 8px 18px #0000001f;
}

.konto-karte--leise {
    background: linear-gradient(180deg, #fffbeb8c, #fef3c766);
    box-shadow: inset 0 0 20px #78350f0a;
}

.hinweis,
.village-trial-banner,
.village-checkout-today,
.village-checkout-no-obligation-note {
    border-style: solid;
    border-radius: .55rem;
}

/* ── About: photo laid on the sheet ── */

.village-about-photo-card {
    padding: .6rem .6rem .9rem;
    border-radius: .55rem;
    background: var(--pergament-hell);
    box-shadow: 0 2px 4px #0000001f, 0 14px 30px #00000040;
    transform: rotate(-1deg);
}

.village-about-photo {
    border-radius: .35rem;
    box-shadow: none;
}

.village-about-photo-card figcaption {
    margin-top: .7rem;
}

/* ── About: closing invitation ── */

.einladung {
    display: grid;
    justify-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: clamp(2rem, 5vw, 3rem) clamp(1.2rem, 4vw, 2.5rem);
    border-radius: .8rem;
    background: radial-gradient(120% 140% at 50% 0%, #ffd58a73 0%, #fde68a33 45%, #fffbeb00 80%);
    text-align: center;
}

.einladung h2 {
    margin: 0;
    color: var(--tinte);
    font-size: clamp(1.6rem, 3.2vw, 2.3rem);
    text-align: center;
}

.einladung > p {
    max-width: 34rem;
    margin: 0;
    color: var(--tinte-leise);
    font-size: 1.12rem;
}

.einladung__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.8rem;
    margin-top: .6rem;
}

.einladung__gruss {
    margin-top: .4rem !important;
    color: var(--wachs) !important;
    font-family: var(--schrift-hand);
    font-size: 1.45rem !important;
    font-style: italic;
}

/* ── Merchant: interval switch ── */

.intervall-wahl {
    display: inline-flex;
    margin: 0;
    padding: .3rem;
    border: 1px solid #c39a4b80;
    border-radius: 999px;
    background: #140d07a6;
}

.intervall-wahl label {
    position: relative;
    min-width: 8.5rem;
    padding: .5rem 1.2rem;
    border-radius: 999px;
    color: var(--hell-auf-holz);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.08rem;
    text-align: center;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.intervall-wahl input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.intervall-wahl label:has(input:checked) {
    background: var(--messing);
    color: var(--tinte);
    box-shadow: inset 0 1px #ffffff59, 0 2px 6px #0006;
}

.intervall-wahl label:has(input:focus-visible) {
    outline: 3px solid var(--kerze);
    outline-offset: 2px;
}

/* ── Merchant: trial note and plan cards ── */

.village-trial-banner {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    border-color: #7d2a1e4d;
    background: linear-gradient(180deg, #fffbebd9, #fef3c7b3);
}

/* Small wax seal with the number of trial days */
.probe-wachs {
    display: block;
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    overflow: visible;
    transform: rotate(-12deg);
    filter: drop-shadow(0 2px 3px #00000066);
}

/* Keep the trial note on one line where there is room */
.village-trial-banner {
    max-width: none;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .village-trial-banner {
        white-space: normal;
    }
}

/* ── Secondary buttons: light pill, same family as the plan buttons ── */

.village-secondary-action,
.rahmen-knopf--tinte {
    min-height: 52px;
    padding: .7rem 1.5rem;
    border: 1px solid #7d2a1e80;
    border-radius: 999px;
    outline: 0;
    background: #fffbebcc;
    color: var(--wachs);
    font-size: 1.08rem;
    box-shadow: 0 4px 10px #0000001f;
    transition: background-color .2s, color .2s, box-shadow .2s;
}

.village-secondary-action:hover,
.rahmen-knopf--tinte:hover {
    background: var(--wachs);
    color: var(--pergament-hell);
    box-shadow: 0 6px 14px #00000040;
}

/* ── Lead texts: dark ink instead of the pale brown ── */

.village-hero-text,
.seitenkopf__text,
.village-merchant-header p,
.village-checkout-header p,
.village-about-header p:not(.village-kicker) {
    color: var(--tinte);
    font-size: 1.3rem;
}

.village-hero-text strong {
    color: var(--tinte);
    font-weight: 700;
}

.village-product-card {
    position: relative;
    overflow: visible;
}

.village-product-card.ist-beliebt {
    border-color: #7d2a1e8c;
    background: linear-gradient(180deg, #fffbebe6, #fef3c7c7);
    box-shadow: inset 0 0 24px #78350f0f, 0 0 0 1px #7d2a1e33, 0 14px 30px #00000033, 0 0 40px #ffb85c40;
}

.village-product-seal {
    position: absolute;
    top: -22px;
    right: -14px;
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 0;
    border-radius: 47% 53% 50% 50% / 52% 48%;
    background: radial-gradient(circle at 35% 30%, var(--wachs-hell), var(--wachs) 60%, #5a1b12);
    color: var(--pergament-hell);
    font-family: var(--schrift-kapitaelchen);
    font-size: .95rem;
    transform: rotate(12deg);
    box-shadow: inset 0 0 0 5px #0000002e, inset 0 0 0 8px #ffd2aa26, 0 6px 12px #00000080;
}

.village-product-description {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-top: .7rem;
}

.village-product-description span {
    padding: .15rem .7rem;
    border: 1px solid #78350f33;
    border-radius: 999px;
    background: #fffbebcc;
    color: var(--tinte-leise);
    font-size: .98rem;
}

.village-yearly-price {
    color: var(--tinte-leise);
    font-size: 1rem;
}

.village-product-card .village-primary-action,
.tarif-knopf {
    width: 100%;
}

.tarif-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: .7rem 1.2rem;
    border: 1px solid #7d2a1e80;
    border-radius: 999px;
    background: #fffbebcc;
    color: var(--wachs);
    font-family: var(--schrift-kapitaelchen);
    font-size: 1.12rem;
    cursor: pointer;
    transition: background-color .2s, color .2s, box-shadow .2s;
}

.tarif-knopf:hover {
    background: var(--wachs);
    color: var(--pergament-hell);
    box-shadow: 0 6px 14px #00000040;
}

.tarif-knopf:disabled {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 760px) {
    .village-product-seal {
        right: 8px;
    }
}

/* ══════════════════════════════════════════════════════
   RADZEN
   ══════════════════════════════════════════════════════ */

.rz-textbox,
.rz-inputmask,
.rz-textarea,
.rz-dropdown {
    border: 2px solid var(--tinte-leise) !important;
    border-radius: 4px !important;
    background-color: #ffffff8c !important;
    color: var(--tinte) !important;
    font-family: var(--schrift-text);
}

.rz-textbox:focus,
.rz-inputmask:focus,
.rz-textarea:focus,
.rz-dropdown:hover,
.rz-dropdown.rz-state-focused {
    border-color: var(--tinte) !important;
    box-shadow: 0 0 0 3px #ffb85c99 !important;
}

.rz-dropdown-panel,
.rz-dialog {
    border: 1px solid var(--messing) !important;
    background-color: var(--pergament-hell) !important;
    color: var(--tinte) !important;
    font-family: var(--schrift-text) !important;
}

.rz-dropdown-item:hover,
.rz-dropdown-item.rz-state-highlight {
    background-color: var(--wachs) !important;
    color: var(--pergament-hell) !important;
}

.rz-button {
    font-family: var(--schrift-kapitaelchen) !important;
    font-weight: 500 !important;
    letter-spacing: .02em !important;
}

.rz-button.rz-button-md.rz-variant-filled.rz-primary {
    border-color: var(--wachs) !important;
    background: radial-gradient(circle at 30% 25%, var(--wachs-hell), var(--wachs) 55%, #5a1b12) !important;
    color: var(--pergament-hell) !important;
}

.rz-button.rz-button-md.rz-variant-filled.rz-primary:hover {
    box-shadow: 0 0 18px #ff8c5059 !important;
}

.rz-button.rz-variant-outlined {
    border: 1px solid var(--tinte) !important;
    color: var(--tinte) !important;
}

.rz-button.rz-variant-outlined:hover {
    background-color: var(--wachs) !important;
    border-color: var(--wachs) !important;
    color: var(--pergament-hell) !important;
}

.rz-chkbox-box.rz-state-active,
.rz-radiobutton-box.rz-state-active .rz-radiobutton-icon,
.rz-slider-range {
    border-color: var(--wachs) !important;
    background-color: var(--wachs) !important;
}

.rz-radiobutton-box.rz-state-active {
    border-color: var(--wachs) !important;
}

.rz-datatable-thead th,
.rz-dialog-titlebar,
.rz-panel-titlebar {
    border-color: #5a1b12 !important;
    background-color: var(--wachs) !important;
    color: var(--pergament-hell) !important;
    font-family: var(--schrift-titel) !important;
}

.rz-notification-success .rz-notification-item {
    border: 1px solid #5a1b12 !important;
    background-color: var(--wachs) !important;
}

.rz-tooltip.rz-popup {
    border: 1px solid var(--messing) !important;
    background-color: var(--holz-tief) !important;
}

.rz-tooltip-content > div {
    color: var(--hell-auf-holz) !important;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    body {
        padding-left: 0;
        background-attachment: scroll;
        background-position: center top;
    }

    /* Icons only, centered in a row pinned to the top, like the earlier mobile version */
    .leiste {
        right: 0;
        bottom: auto;
        justify-content: center;
        width: auto;
        padding-top: env(safe-area-inset-top, 0px);
    }

    .leiste ul {
        grid-auto-columns: auto;
        grid-auto-flow: column;
        justify-content: center;
        gap: clamp(.4rem, 4vw, 1.6rem);
        width: auto;
        padding: .5rem 0;
        overflow: visible;
    }

    .leiste a {
        padding: .2rem;
    }

    .leiste__bild {
        width: 44px;
        height: 44px;
        filter: drop-shadow(0 3px 6px #000000bf);
    }

    .leiste a:hover .leiste__bild {
        transform: none;
    }

    /* Phones show only the short function name below each icon */
    .leiste__ort {
        display: none;
    }

    .leiste__funktion {
        display: block;
        max-width: 4.6rem;
        margin-top: .15rem;
        color: var(--hell-auf-holz);
        font-family: var(--schrift-kapitaelchen);
        font-size: .75rem;
        line-height: 1.1;
    }

    .leiste a.ist-aktiv .leiste__funktion {
        color: var(--kerze);
    }

    .seite {
        padding-top: 5.2rem;
    }

    /* Stronger on phones: the pinned icons pass over light parchment */
    .scroll-schatten {
        height: 120px;
        background: linear-gradient(180deg, #0a0603f2 0%, #0a0603d9 50%, #0a060300 100%);
    }

    /* Trial seal becomes a round wax stamp in the lower right corner */
    .probe-siegel {
        top: auto;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        width: 76px;
        height: 76px;
        min-height: 0;
        padding: .4rem;
        border-radius: 48% 52% 50% 50% / 50% 47% 53% 50%;
        font-size: .82rem;
        line-height: 1.1;
        text-align: center;
        white-space: normal;
        box-shadow: inset 0 0 0 4px #0003, inset 0 0 0 7px #ffd2aa24, inset 0 2px #ffffff2e, 0 8px 18px #00000099;
    }

    .probe-siegel::before {
        display: none;
    }

    .probe-siegel:hover {
        transform: rotate(-4deg);
    }

    .fuss {
        padding-bottom: 6.5rem;
    }
}

@media (max-width: 760px) {
    .village-primary-action {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        animation: none !important;
    }
}