/**
 * HIT Theme – Inhaltsgestaltung
 *
 * Beiträge, Seiten ohne Elementor, Archive, Kommentare, Formulare, Widgets
 * und die Klassen, die WordPress selbst in den Inhalt schreibt (Ausrichtung,
 * Bildunterschriften, Galerien). Wird unter „Design → HIT Theme → Website"
 * mit „Nur Grundgerüst" abgeschaltet.
 *
 * Wie base.css: geringe Spezifität über :where(), damit Elementor gewinnt.
 * Und wie dort logische Eigenschaften statt left/right – für Sprachen von
 * rechts nach links; die Pfeile dreht rtl.css.
 */

/* ------------------------------------------------------------- Typografie */

:where(h1, h2, h3, h4, h5, h6) {
    margin: 1.5em 0 0.5em;
    font-family: var(--hit-font-heading);
    font-weight: var(--hit-heading-weight, 700);
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-transform: var(--hit-heading-transform, none);
    color: var(--hit-color-text);
}

/* Die Grössen kommen aus den Einstellungen (--hit-h1 …); ohne sie gelten
   die fliessenden Werte. */
:where(h1) { font-size: var(--hit-h1, clamp(1.875rem, 3.5vw, 2.5rem)); }
:where(h2) { font-size: var(--hit-h2, clamp(1.5rem, 2.75vw, 2rem)); }
:where(h3) { font-size: var(--hit-h3, clamp(1.25rem, 2.2vw, 1.5rem)); }
:where(h4) { font-size: var(--hit-h4, 1.25rem); }
:where(h5) { font-size: var(--hit-h5, 1.125rem); }
:where(h6) { font-size: var(--hit-h6, 1rem); letter-spacing: 0.04em; }

:where(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

:where(p, ul, ol, dl, blockquote, pre, table, figure) {
    margin: 0 0 1.25em;
}

:where(blockquote) {
    padding-block: 0.5em;
    padding-inline: 1.25em 0;
    border-inline-start: 4px solid var(--hit-color-primary);
    color: var(--hit-color-muted);
    font-size: 1.125rem;
}

:where(blockquote cite) {
    display: block;
    margin-top: 0.5em;
    font-size: 0.875rem;
    font-style: normal;
}

:where(pre) {
    padding: 1em 1.25em;
    overflow: auto;
    border-radius: var(--hit-radius);
    background: var(--hit-color-surface);
    font-size: 0.9375rem;
}

:where(code, kbd, samp) {
    padding: 0.15em 0.4em;
    border-radius: 4px;
    background: var(--hit-color-surface);
    font-size: 0.9em;
}

:where(pre code) {
    padding: 0;
    background: none;
}

:where(hr) {
    height: 1px;
    margin: 2.5em 0;
    border: 0;
    background: var(--hit-color-border);
}

:where(table) {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

:where(th, td) {
    padding: 0.6em 0.8em;
    border-bottom: 1px solid var(--hit-color-border);
    text-align: start;
    vertical-align: top;
}

:where(th) {
    font-weight: 600;
}

:where(figcaption, .wp-caption-text) {
    margin-top: 0.5em;
    color: var(--hit-color-muted);
    font-size: 0.875rem;
    text-align: center;
}

/* ---------------------------------------------------------- WordPress-Klassen */

/* "links" und "rechts" meinen den Anfang und das Ende der Leserichtung –
   so macht es auch WordPress selbst in seinen RTL-Stylesheets. */
.alignleft {
    float: inline-start;
    margin-block: 0.5em 1em;
    margin-inline: 0 1.5em;
}

.alignright {
    float: inline-end;
    margin-block: 0.5em 1em;
    margin-inline: 1.5em 0;
}

.aligncenter {
    display: block;
    clear: both;
    margin-inline: auto;
}

.alignwide {
    margin-inline: calc(-1 * min(120px, var(--hit-gutter)));
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

.has-sidebar .alignwide,
.has-sidebar .alignfull {
    width: auto;
    max-width: 100%;
    margin-inline: 0;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption img {
    display: block;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(var(--hit-gallery-columns, 3), minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 1.5em;
}

.gallery-columns-1 { --hit-gallery-columns: 1; }
.gallery-columns-2 { --hit-gallery-columns: 2; }
.gallery-columns-4 { --hit-gallery-columns: 4; }
.gallery-columns-5 { --hit-gallery-columns: 5; }
.gallery-columns-6 { --hit-gallery-columns: 6; }

.gallery-item {
    margin: 0;
}

.gallery-item img {
    display: block;
    width: 100%;
    border-radius: var(--hit-radius);
}

.sticky .entry-title::before {
    content: "★ ";
    color: var(--hit-color-primary);
}

.bypostauthor > .comment-body .fn::after {
    content: " · " attr(data-author-label);
}

.post-password-form input[type="password"] {
    margin: 0 8px;
}

/* ------------------------------------------------------------------ Formulare */

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]), textarea, select) {
    width: 100%;
    max-width: 100%;
    padding: 0.65em 0.9em;
    border: 1px solid var(--hit-color-border);
    border-radius: var(--hit-radius);
    background: var(--hit-color-bg);
    color: var(--hit-color-text);
    font: inherit;
    line-height: 1.4;
}

:where(input, textarea, select):focus {
    border-color: var(--hit-color-primary);
    outline: 2px solid var(--hit-color-primary);
    outline-offset: 0;
}

:where(textarea) {
    min-height: 8em;
    resize: vertical;
}

:where(label) {
    display: inline-block;
    margin-bottom: 0.35em;
    font-weight: 600;
}

:where(button, input[type="submit"], input[type="button"], .button, .wp-block-button__link) {
    display: inline-block;
    padding: 0.7em 1.4em;
    border: 1px solid var(--hit-color-primary);
    border-radius: var(--hit-radius);
    background: var(--hit-color-primary);
    color: var(--hit-color-on-primary);
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    text-transform: var(--hit-button-transform, none);
    cursor: pointer;
    transition: background-color var(--hit-transition), border-color var(--hit-transition);
}

.button--outline {
    background: transparent;
    color: var(--hit-color-primary);
}

:where(button, input[type="submit"], input[type="button"], .button):hover,
:where(button, input[type="submit"], input[type="button"], .button):focus {
    border-color: var(--hit-color-primary-dark);
    background: var(--hit-color-primary-dark);
    color: var(--hit-color-on-primary);
}

.search-form {
    display: flex;
    gap: 8px;
    max-width: 480px;
}

.search-form .search-field {
    flex: 1 1 auto;
}

.search-form .search-submit {
    flex: 0 0 auto;
}

/* --------------------------------------------------------------- Einträge */

.page-header {
    margin: 0 0 var(--hit-section-gap);
}

.page-header .page-title,
.page-header .entry-title {
    margin: 0;
}

.archive-description {
    margin-top: 0.75em;
    color: var(--hit-color-muted);
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-top: 0.75em;
    color: var(--hit-color-muted);
    font-size: 0.875rem;
}

.entry-meta a {
    color: inherit;
    text-decoration: none;
}

.entry-meta a:hover,
.entry-meta a:focus {
    color: var(--hit-color-primary);
    text-decoration: underline;
}

.entry--single .post-thumbnail,
.entry--page .post-thumbnail {
    margin: 0 0 var(--hit-section-gap);
}

.post-thumbnail img {
    display: block;
    width: 100%;
    border-radius: var(--hit-radius);
}

.entry-content > :first-child {
    margin-top: 0;
}

.entry-content > :last-child {
    margin-bottom: 0;
}

.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

.page-links {
    margin: 1.5em 0 0;
    font-weight: 600;
}

.page-links a,
.page-links > span:not(:first-child) {
    display: inline-block;
    min-width: 2em;
    margin-inline-start: 4px;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    text-align: center;
}

.page-links a {
    background: var(--hit-color-surface);
    text-decoration: none;
}

.entry-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: var(--hit-section-gap);
    padding-top: 20px;
    border-top: 1px solid var(--hit-color-border);
    color: var(--hit-color-muted);
    font-size: 0.875rem;
}

.entry--page > .entry-footer:only-child,
.entry-footer:empty {
    display: none;
}

/* Übersichten: Karten in einem Raster oder als Liste */
.entries {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}

@media (min-width: 600px) {
    .entries--cols-2,
    .entries--cols-3,
    .entries--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .entries--cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .entries--cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    /* Neben einer Seitenleiste bleiben höchstens zwei Spalten */
    .has-sidebar .entries--cols-3,
    .has-sidebar .entries--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.search-results .entries {
    grid-template-columns: minmax(0, 1fr);
}

.entry--summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.entry-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 12px;
}

/* Liste: Bild am Anfang, Text daneben */
@media (min-width: 600px) {
    .entries--list .entry--summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        gap: 24px;
        align-items: start;
    }

    .entries--list .entry--summary .post-thumbnail {
        margin: 0;
    }
}

.entry--summary .post-thumbnail {
    display: block;
    overflow: hidden;
    border-radius: var(--hit-radius);
}

.entry--summary .post-thumbnail img {
    aspect-ratio: var(--hit-thumb-ratio, 16 / 9);
    object-fit: cover;
    transition: transform var(--hit-transition);
}

.entry--summary .post-thumbnail:hover img {
    transform: scale(1.02);
}

.entry--summary .entry-title {
    margin: 0;
    font-size: 1.375rem;
}

.entry--summary .entry-title a {
    color: inherit;
    text-decoration: none;
}

.entry--summary .entry-title a:hover,
.entry--summary .entry-title a:focus {
    color: var(--hit-color-primary);
}

.entry--summary .entry-meta {
    margin-top: 0.5em;
}

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

.entry--summary .entry-footer {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.entry--summary .entry-content {
    font-size: 1rem;
}

.entry--related .entry-title {
    font-size: 1.125rem;
}

/* Autorenkasten */
.author-box {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: var(--hit-section-gap);
    padding: 24px;
    border: 1px solid var(--hit-color-border);
    border-radius: var(--hit-radius);
    background: var(--hit-color-surface);
}

.author-box__avatar img {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 50%;
}

.author-box__name {
    margin: 0 0 6px;
    font-size: 1.125rem;
}

.author-box__name a {
    color: inherit;
    text-decoration: none;
}

.author-box__description {
    margin: 0;
    color: var(--hit-color-muted);
    font-size: 0.9375rem;
}

/* Verwandte Beiträge */
.related-posts {
    margin-top: var(--hit-section-gap);
    padding-top: var(--hit-section-gap);
    border-top: 1px solid var(--hit-color-border);
}

.related-posts__title {
    margin: 0 0 24px;
    font-size: 1.375rem;
}

.more-link {
    font-weight: 600;
    text-decoration: none;
}

.more-link::after {
    content: " →";
}

.more-link:hover,
.more-link:focus {
    text-decoration: underline;
}

/* ------------------------------------------------------------ Navigation */

.navigation.pagination {
    margin: var(--hit-section-gap) 0 0;
}

.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--hit-color-border);
    border-radius: var(--hit-radius);
    color: var(--hit-color-text);
    text-decoration: none;
}

.navigation.pagination .page-numbers.current {
    border-color: var(--hit-color-primary);
    background: var(--hit-color-primary);
    color: var(--hit-color-on-primary);
}

.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus {
    border-color: var(--hit-color-primary);
    color: var(--hit-color-primary);
}

.navigation.pagination .screen-reader-text {
    position: absolute !important;
}

/* Neuere / Ältere statt Seitenzahlen */
.navigation.posts-navigation {
    margin: var(--hit-section-gap) 0 0;
}

.navigation.posts-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.navigation.posts-navigation a {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid var(--hit-color-border);
    border-radius: var(--hit-radius);
    color: var(--hit-color-text);
    font-weight: 600;
    text-decoration: none;
}

.navigation.posts-navigation a:hover,
.navigation.posts-navigation a:focus {
    border-color: var(--hit-color-primary);
    color: var(--hit-color-primary);
}

.post-navigation {
    margin: var(--hit-section-gap) 0 0;
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.post-navigation .nav-previous {
    grid-column: 1;
}

.post-navigation .nav-next {
    grid-column: 2;
    text-align: end;
}

.post-navigation a {
    display: block;
    padding: 16px;
    border: 1px solid var(--hit-color-border);
    border-radius: var(--hit-radius);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--hit-transition);
}

.post-navigation a:hover,
.post-navigation a:focus {
    border-color: var(--hit-color-primary);
}

.post-navigation .nav-subtitle {
    display: block;
    color: var(--hit-color-muted);
    font-size: 0.8125rem;
}

.post-navigation .nav-title {
    font-weight: 600;
}

@media (max-width: 600px) {
    .post-navigation .nav-links {
        grid-template-columns: 1fr;
    }

    .post-navigation .nav-next {
        grid-column: 1;
        text-align: start;
    }
}

/* ------------------------------------------------------------- Kommentare */

.comments-area {
    margin-top: var(--hit-section-gap);
    padding-top: var(--hit-section-gap);
    border-top: 1px solid var(--hit-color-border);
}

.comments-title,
.comment-reply-title {
    margin-top: 0;
    font-size: 1.5rem;
}

.comment-list,
.comment-list .children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment-list .children {
    margin-inline-start: clamp(16px, 4vw, 48px);
}

.comment-body {
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid var(--hit-color-border);
}

.comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.comment-author .avatar {
    border-radius: 50%;
}

.comment-metadata {
    color: var(--hit-color-muted);
}

.comment-metadata a {
    color: inherit;
    text-decoration: none;
}

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

.comment-awaiting-moderation {
    color: var(--hit-color-muted);
    font-style: italic;
}

.reply {
    margin-top: 8px;
    font-size: 0.875rem;
}

.comment-respond {
    margin-top: var(--hit-section-gap);
}

.comment-form-comment textarea {
    min-height: 10em;
}

.comment-form .form-submit {
    margin-bottom: 0;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.comment-form-cookies-consent label {
    font-weight: 400;
}

.no-comments {
    color: var(--hit-color-muted);
}

/* ---------------------------------------------------------------- Widgets */

.widget-area .widget {
    margin: 0 0 32px;
    font-size: 0.9375rem;
}

.widget-area .widget-title {
    margin: 0 0 12px;
    font-size: 1rem;
}

.widget-area ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.widget-area li {
    margin: 0 0 8px;
}

/* ------------------------------------------------- Kontakt und Zeiten */

.contact-block p {
    margin: 0 0 8px;
}

.contact-block__name {
    font-weight: 600;
}

.contact-block__label {
    color: var(--hit-color-muted);
}

.opening-hours__list {
    margin: 0;
}

.opening-hours__row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    justify-content: space-between;
    padding-block: 4px;
    border-bottom: 1px solid var(--hit-color-border);
}

.opening-hours__row:last-child {
    border-bottom: 0;
}

.opening-hours__day {
    margin: 0;
    font-weight: 600;
}

.opening-hours__time {
    margin: 0;
    color: var(--hit-color-muted);
    font-variant-numeric: tabular-nums;
}

.opening-hours__note {
    margin: 8px 0 0;
    color: var(--hit-color-muted);
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------- 404 und Suche */

.error-404,
.no-results {
    max-width: 640px;
}

.error-404 .search-form,
.no-results .search-form {
    margin: 1.5em 0;
}