/*
Theme Name: heyhochzeit.de
Description: Wartungsarmes Hochzeitsverzeichnis als GeneratePress Child Theme.
Author: heyhochzeit.de
Template: generatepress
Version: 1.1.0
Text Domain: heyhochzeit
*/

@font-face {
    font-family: "Space Grotesk";
    src: url("assets/fonts/space-grotesk-latin.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 300 700;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
    font-display: swap;
    font-style: normal;
    font-weight: 300 700;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
    background: var(--hh-color-canvas);
    color: var(--hh-color-ink);
    font-family: var(--hh-font-sans);
}

a { color: var(--hh-color-accent-strong); }
a:hover { color: var(--hh-color-ink); }

.hh-wordmark {
    color: var(--hh-color-ink);
    display: inline-block;
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    padding: var(--hh-space-4) 0;
    text-decoration: none;
}

button,
.button,
input[type="submit"] {
    background: var(--hh-color-accent);
    border: 0;
    border-radius: var(--hh-radius-pill);
    color: var(--hh-color-ink);
    font: inherit;
    font-weight: 600;
    padding: .75rem 1.4rem;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

button:hover,
.button:hover,
input[type="submit"]:hover {
    background: var(--hh-color-accent-strong);
    color: var(--hh-color-canvas);
    transform: translateY(-1px);
}

.button--ghost {
    background: transparent;
    border: 1.5px solid var(--hh-color-accent-strong);
    color: var(--hh-color-accent-strong);
}

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

.hh-main { margin-inline: auto; max-width: 75rem; padding: clamp(2rem, 5vw, 5rem) var(--hh-space-4); }
.hh-page-header { margin-bottom: var(--hh-space-8); max-width: 48rem; }
.hh-page-header h1 { font-size: clamp(2.25rem, 7vw, 4.75rem); letter-spacing: -.055em; line-height: 1; margin: .25rem 0 1rem; }
.hh-eyebrow { color: var(--hh-color-accent-strong); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hh-lead { color: var(--hh-color-muted); font-size: clamp(1.1rem, 2vw, 1.35rem); }

/* --- Startseiten-Hero -------------------------------------------------- */

.hh-hero-home {
    background: linear-gradient(120deg, #fbeee6, var(--hh-color-canvas) 45%, var(--hh-color-accent-soft));
    border-radius: var(--hh-radius-card);
    overflow: hidden;
    padding: clamp(3rem, 8vw, 6.5rem) clamp(1.5rem, 5vw, 4rem);
    position: relative;
}

.hh-hero-home::before,
.hh-hero-home::after {
    border-radius: 50%;
    content: "";
    position: absolute;
}

.hh-hero-home::before {
    background: radial-gradient(circle, rgb(232 184 173 / 55%), transparent 65%);
    height: 34rem;
    right: -10rem;
    top: -14rem;
    width: 34rem;
}

.hh-hero-home::after {
    background: radial-gradient(circle, rgb(197 214 227 / 45%), transparent 65%);
    bottom: -12rem;
    height: 26rem;
    left: -9rem;
    width: 26rem;
}

.hh-hero-home > * { position: relative; z-index: 1; }

.hh-hero-home__title {
    font-size: clamp(2.75rem, 8vw, 5.5rem);
    letter-spacing: -.055em;
    line-height: 1.02;
    margin: .4rem 0 1rem;
    max-width: 18ch;
}

.hh-accent {
    background: linear-gradient(transparent 70%, var(--hh-color-accent) 70% 94%, transparent 94%);
    color: var(--hh-color-accent-strong);
}

.hh-hero-home .hh-lead { max-width: 42rem; }

.hh-hero-home__actions { display: flex; flex-wrap: wrap; gap: var(--hh-space-2) var(--hh-space-4); margin-top: var(--hh-space-8); }
.hh-hero-home__note { color: var(--hh-color-muted); font-size: .85rem; letter-spacing: .04em; margin-top: var(--hh-space-4); }

@keyframes hh-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.hh-hero-home > * { animation: hh-rise .6s ease both; }
.hh-hero-home > :nth-child(2) { animation-delay: .07s; }
.hh-hero-home > :nth-child(3) { animation-delay: .14s; }
.hh-hero-home > :nth-child(4) { animation-delay: .21s; }
.hh-hero-home > :nth-child(5) { animation-delay: .28s; }

/* --- Sektionen und Einstiege ------------------------------------------ */

.hh-section { margin-top: clamp(3rem, 7vw, 5.5rem); }

.hh-section-head { align-items: end; display: flex; gap: var(--hh-space-4); justify-content: space-between; margin-bottom: var(--hh-space-4); }
.hh-section-head h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.035em; margin: .15rem 0 0; }
.hh-section-head__link { font-weight: 600; white-space: nowrap; }

.hh-subline { color: var(--hh-color-muted); font-size: .85rem; font-weight: 700; letter-spacing: .08em; margin: var(--hh-space-8) 0 var(--hh-space-2); text-transform: uppercase; }
.hh-subline:first-of-type { margin-top: var(--hh-space-4); }

.hh-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hh-chip {
    background: var(--hh-color-surface);
    border: 1px solid var(--hh-color-accent);
    border-radius: var(--hh-radius-pill);
    color: var(--hh-color-ink);
    font-size: .9rem;
    font-weight: 600;
    padding: .5rem 1rem;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}
.hh-chip:hover { background: var(--hh-color-accent); color: var(--hh-color-ink); transform: translateY(-1px); }

.hh-stil-grid { display: grid; gap: var(--hh-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.hh-stil-tile {
    aspect-ratio: 4 / 3;
    border-radius: var(--hh-radius-card);
    color: var(--hh-color-ink);
    display: flex;
    align-items: flex-end;
    font-weight: 700;
    overflow: hidden;
    padding: var(--hh-space-4);
    position: relative;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}
.hh-stil-tile:hover { box-shadow: var(--hh-shadow-card-hover); color: var(--hh-color-ink); transform: translateY(-3px); }
.hh-stil-tile--klassisch { background: linear-gradient(150deg, #fdf3ec, #ecd9c8); }
.hh-stil-tile--modern { background: linear-gradient(150deg, #f2ede9, #d8d3cf); }
.hh-stil-tile--rustikal { background: linear-gradient(150deg, #f3e3d3, #d9b895); }
.hh-stil-tile--maritim { background: linear-gradient(150deg, #e7f0f2, #b8d4da); }
.hh-stil-tile--industrial { background: linear-gradient(150deg, #ebe7e4, #c9c1bc); }
.hh-stil-tile--natur { background: linear-gradient(150deg, #ecf2e4, #c3d6ae); }
.hh-stil-tile--ungewoehnlich { background: linear-gradient(150deg, #f7e6f0, #e3bcd6); }

/* --- Karten ------------------------------------------------------------ */

.hh-grid { display: grid; gap: var(--hh-space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.hh-card {
    background: var(--hh-color-surface);
    border-radius: var(--hh-radius-card);
    box-shadow: var(--hh-shadow-card);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.hh-card:hover { box-shadow: var(--hh-shadow-card-hover); transform: translateY(-4px); }
.hh-card__image { display: block; overflow: hidden; position: relative; }
.hh-card__image img { display: block; transition: transform .4s ease; width: 100%; }
.hh-card:hover .hh-card__image img { transform: scale(1.04); }
.hh-card__body { padding: 1.25rem; }
.hh-card__title { font-size: 1.35rem; margin: .25rem 0; }
.hh-card__title a { color: var(--hh-color-ink); text-decoration: none; }
.hh-card__tag { color: var(--hh-color-accent-strong); font-size: .75rem; font-weight: 700; letter-spacing: .07em; margin: .6rem 0 0; text-transform: uppercase; }

.hh-badge {
    background: var(--hh-color-ink);
    border-radius: var(--hh-radius-pill);
    color: var(--hh-color-canvas);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .3rem .7rem;
    position: absolute;
    right: .75rem;
    top: .75rem;
    text-transform: uppercase;
    z-index: 1;
}

.hh-card--demo .hh-card__image { position: relative; }
.hh-card--demo .hh-image-placeholder span { font-size: 2.5rem; opacity: .5; }
.hh-grid > .hh-card--demo:nth-child(3n+2) .hh-image-placeholder { background: linear-gradient(135deg, #e7f0ee, #f7efe6); }
.hh-grid > .hh-card--demo:nth-child(3n) .hh-image-placeholder { background: linear-gradient(135deg, #f0e7f0, #fdf3ec); }

.hh-demo-note {
    background: var(--hh-color-accent-soft);
    border-radius: var(--hh-radius-card);
    color: var(--hh-color-muted);
    font-size: .9rem;
    margin-top: var(--hh-space-8);
    padding: var(--hh-space-4);
}

.hh-hero { border-radius: var(--hh-radius-card); margin-bottom: var(--hh-space-8); overflow: hidden; position: relative; }
.hh-hero__image { aspect-ratio: 16 / 9; display: block; height: auto; object-fit: cover; width: 100%; }
.hh-image-placeholder { align-items: center; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #f5ddd6, #fff4ec); color: var(--hh-color-accent-strong); display: flex; font-weight: 700; justify-content: center; }

/* --- Profile, Filter, Listen ------------------------------------------ */

.hh-profile__layout { display: grid; gap: var(--hh-space-8); grid-template-columns: minmax(0, 2fr) minmax(15rem, 1fr); }
.hh-article { max-width: 44rem; }
.hh-prose { font-size: 1.08rem; line-height: 1.75; }
.hh-facts { align-self: start; background: var(--hh-color-surface); border-radius: var(--hh-radius-card); padding: var(--hh-space-8); }
.hh-facts h2 { font-size: 1.1rem; }
.hh-correction { border-top: 1px solid var(--hh-color-accent); margin-top: var(--hh-space-8); padding-top: var(--hh-space-4); }
.hh-filters { align-items: end; background: var(--hh-color-surface); border-radius: var(--hh-radius-card); display: grid; gap: var(--hh-space-4); grid-template-columns: repeat(4, 1fr); margin-bottom: var(--hh-space-8); padding: var(--hh-space-4); }
.hh-filters label { color: var(--hh-color-muted); display: grid; font-size: .85rem; gap: .25rem; }
.hh-filters select { border: 1px solid var(--hh-color-accent); border-radius: .5rem; font: inherit; padding: .65rem; }
.hh-events { display: grid; gap: var(--hh-space-4); }
.hh-month { border-bottom: 1px solid var(--hh-color-accent); margin: var(--hh-space-8) 0 0; padding-bottom: .5rem; }
.hh-pagination, .hh-empty { margin-top: var(--hh-space-8); }
.hh-pagination .page-numbers { background: var(--hh-color-surface); border-radius: .5rem; display: inline-block; margin-right: .35rem; padding: .5rem .85rem; text-decoration: none; }
.hh-pagination .page-numbers.current { background: var(--hh-color-ink); color: var(--hh-color-canvas); }

/* --- CTA-Band ---------------------------------------------------------- */

.hh-cta-band {
    background: var(--hh-color-ink);
    border-radius: var(--hh-radius-card);
    color: var(--hh-color-canvas);
    display: grid;
    gap: var(--hh-space-2);
    justify-items: start;
    margin-top: clamp(3rem, 7vw, 5.5rem);
    padding: clamp(2rem, 6vw, 4rem);
}
.hh-cta-band h2 { color: inherit; font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: -.035em; margin: 0; }
.hh-cta-band p { color: rgb(255 250 246 / 78%); margin: 0; max-width: 40rem; }
.hh-cta-band .hh-eyebrow { color: var(--hh-color-accent); }
.hh-cta-band .button { margin-top: var(--hh-space-4); }

@media (max-width: 48rem) {
    .hh-profile__layout, .hh-filters { grid-template-columns: 1fr; }
    .hh-section-head { align-items: start; flex-direction: column; gap: var(--hh-space-2); }
}

@media (prefers-reduced-motion: reduce) {
    .hh-hero-home > * { animation: none; }
    .hh-card, .hh-card__image img, .hh-chip, .hh-stil-tile, button, .button, input[type="submit"] { transition: none; }
}