/*
Theme Name: Tablet-ten Elementor Theme
Theme URI: https://tablet-ten.de
Author: Sebastian Wojatzek
Description: Eigenständiges WordPress-Theme für das Tablet-ten-Gesundheitsportal mit Elementor-Unterstützung.
Version: 2.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: tablet-ten
*/
@import url("assets/fonts/poppins.css");

:root {
    --tt-primary: var(--wp--preset--color--primary, #1a7c73);
    --tt-secondary: var(--wp--preset--color--secondary, #4aae8c);
    --tt-soft: var(--wp--preset--color--bg-soft, #e8f5f1);
    --tt-text: var(--wp--preset--color--text, #2e2e2e);
    --tt-bg: var(--wp--preset--color--white, #fff);
    --tt-deep: #104943;
    --tt-muted: #4d615d;
    --tt-line: #d8e7e1;
    --tt-radius: 1rem;
    --tt-gutter: clamp(1rem, 4vw, 2.5rem);
    --tt-display: clamp(1.85rem, 4vw, 3rem);
    --tt-shell: 75rem;
    --tt-reading: 51.25rem;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 400 1rem/1.7 Poppins, system-ui, sans-serif; color: var(--tt-text); background: var(--tt-bg); }
img { max-inline-size: 100%; height: auto; }
a { color: var(--tt-primary); text-underline-offset: .18em; }
a:hover { color: var(--tt-deep); }
:where(a, button, input, textarea, select):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }
.tt-shell, .tt-reading {
    width: min(calc(100% - 2 * var(--tt-gutter)), var(--tt-shell));
    margin-inline: auto;
}
.tt-reading { max-width: var(--tt-reading); }
.tt-main { min-height: 48vh; }
.screen-reader-text,
.tt-skip:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.tt-skip:focus { position: fixed; z-index: 100000; inset: 1rem auto auto 1rem; background: white; padding: .6rem 1rem; }

.tt-header { border-bottom: 1px solid var(--tt-line); background: var(--tt-bg); position: relative; z-index: 5; }
.tt-header-inner, .tt-primary-panel, .tt-menu { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.4rem); }
.tt-header-inner { justify-content: space-between; flex-wrap: wrap; min-height: 74px; padding-block: .55rem; }
.tt-identity, .tt-primary-panel { min-width: 0; }
.tt-brand { font-size: 1.35rem; line-height: 1.2; font-weight: 700; color: var(--tt-deep); text-decoration: none; overflow-wrap: anywhere; }
.tt-header .custom-logo { display: block; width: auto; max-width: min(220px, 65vw); max-height: 52px; object-fit: contain; }
.tt-menu, .tt-menu .sub-menu, .tt-footer nav ul { margin: 0; padding: 0; list-style: none; }
.tt-menu { flex-wrap: wrap; }
.tt-menu li { position: relative; }
.tt-menu a { display: block; overflow-wrap: anywhere; padding: .55rem .3rem; color: var(--tt-deep); font-weight: 600; text-decoration: none; }
.tt-menu a:hover, .tt-menu .current-menu-item > a, .tt-menu .current_page_item > a { text-decoration: underline; }
.tt-menu .sub-menu {
    position: absolute;
    inset: 100% 0 auto auto;
    min-width: 13rem;
    background: var(--tt-bg);
    border: 1px solid var(--tt-line);
    border-radius: .7rem;
    padding: .4rem .75rem;
    visibility: hidden;
}
.tt-menu li:hover > .sub-menu, .tt-menu li:focus-within > .sub-menu { visibility: visible; }
.tt-toggle, .tt-search-link, .tt-search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 2rem;
    padding: .5rem 1rem;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.tt-toggle, .tt-search-link { background: var(--tt-soft); color: var(--tt-deep); }

.tt-footer { background: var(--tt-deep); color: white; padding: clamp(2rem, 5vw, 4rem) 0 1.25rem; }
.tt-footer-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 2rem; }
.tt-footer-grid > div { min-width: 0; }
.tt-footer h2 { margin: 0 0 .65rem; font-size: 1rem; }
.tt-footer a { color: white; overflow-wrap: anywhere; }
.tt-footer p, .tt-footer li { margin-block: .4rem; }
.tt-footer .tt-copyright { border-top: 1px solid #ffffff50; padding-top: 1rem; margin-top: 2rem; font-size: .875rem; }

.tt-prose, .tt-error, .tt-listing { padding-block: clamp(2rem, 6vw, 4.5rem); }
.tt-after-entry { padding-bottom: 3rem; }
.tt-prose, .tt-listing, .tt-error { overflow-wrap: anywhere; }
.tt-title { color: var(--tt-deep); font-size: var(--tt-display); line-height: 1.15; margin: 0 0 1rem; font-weight: 700; text-wrap: balance; }
.tt-prose :where(h2, h3, h4) { line-height: 1.3; color: var(--tt-deep); margin: 1.8em 0 .5em; }
.tt-prose :where(pre, .wp-block-table) { overflow-x: auto; }
.tt-prose iframe { max-width: 100%; }
.tt-prose .alignwide { width: min(var(--tt-shell), calc(100vw - 2 * var(--tt-gutter))); max-width: none; margin-inline: 50%; transform: translateX(-50%); }
.tt-prose .alignleft { float: left; margin: .5rem 1rem .5rem 0; }
.tt-prose .alignright { float: right; margin: .5rem 0 .5rem 1rem; }
.tt-prose .aligncenter { display: block; margin-inline: auto; }
.tt-prose::after { content: ""; display: table; clear: both; }
.tt-meta { color: var(--tt-muted); font-size: .875rem; margin: 0 0 .6rem; }
.tt-cover { width: 100%; border-radius: var(--tt-radius); margin-block: 1rem; }
.tt-listing-heading { margin-bottom: 2rem; }
.tt-archive-description { max-width: var(--tt-reading); }
.tt-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 1.75rem); }
.tt-post-card { overflow: hidden; border: 1px solid var(--tt-line); border-radius: var(--tt-radius); }
.tt-post-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tt-post-card-content { padding: 1.2rem; }
.tt-post-card h2 { font-size: 1.18rem; line-height: 1.35; margin: .25rem 0 .75rem; }
.tt-post-card h2 a { color: var(--tt-deep); }
.tt-post-card p:last-child { margin-bottom: 0; }
.tt-listing .pagination { margin-top: 2rem; }
.tt-listing .page-numbers, .tt-prose .post-page-numbers { display: inline-block; padding: .35rem .55rem; }
.tt-search-form { display: flex; flex-wrap: wrap; gap: .65rem; max-width: 32rem; }
.tt-search-form input, .tt-comments :where(input:not([type=checkbox]):not([type=submit]), textarea) {
    min-width: 0; max-width: 100%; padding: .55rem .85rem; border: 1px solid #748f87; border-radius: .65rem; font: inherit;
}
.tt-search-form input { flex: 1 1 11rem; }
.tt-search-form button { background: var(--tt-primary); color: white; }
.tt-search-form button:hover { background: var(--tt-deep); }
.tt-search-form button:focus-visible { outline-color: var(--tt-deep); }
.tt-footer .tt-search-form button:focus-visible { outline-color: white; }
.tt-comments { clear: both; margin-top: 2rem; }
.tt-comments .comment-list { padding-inline-start: 1.25rem; overflow-wrap: anywhere; }

/* Styles limited to the companion Elementor template. */
.tt-home-section { scroll-margin-top: 2rem; }
.tt-hero-heading .elementor-heading-title,
.tt-section-heading .elementor-heading-title { text-wrap: balance; overflow-wrap: anywhere; }
.tt-home-section .elementor-button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.tt-home-section .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.tt-topic-card { min-width: 0; overflow-wrap: anywhere; }
.tt-demo-label { color: var(--tt-muted); }

@media (max-width: 960px) {
    .tt-primary-panel { flex: 0 0 100%; display: block; padding-bottom: .6rem; }
    .tt-menu { display: block; }
    .tt-menu .sub-menu { position: static; visibility: visible; min-width: 0; border: 0; padding: 0 0 0 1.25rem; }
    .tt-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .tt-footer-grid, .tt-post-grid { grid-template-columns: minmax(0, 1fr); }
}