/* seo-basics.com — clean professional editorial theme */

:root {
    --seo-ink: #111318;
    --seo-muted: #5f6873;
    --seo-line: #e6e9ed;
    --seo-soft: #f7f9fa;
    --seo-sky: #69c9f2;
    --seo-sky-soft: #eaf8fe;
    --seo-radius-sm: 14px;
    --seo-radius-md: 20px;
    --seo-radius-lg: 28px;
    --seo-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04), 0 5px 16px rgb(15 23 42 / 0.04);
    --seo-shadow-sm: 0 2px 5px rgb(15 23 42 / 0.04), 0 14px 34px rgb(15 23 42 / 0.07);
    --seo-shadow-md: 0 4px 10px rgb(15 23 42 / 0.05), 0 24px 58px rgb(15 23 42 / 0.1);
    --color-primary-text: var(--seo-ink);
    --color-secondary-text: var(--seo-muted);
    --color-border: var(--seo-line);
}

body {
    background: #fff;
    color: var(--seo-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-feature-settings: "kern" 1, "liga" 1;
}

.is-title,
.gh-card-title,
.gh-container-title,
.gh-header-title,
.gh-article-title,
.gh-content :is(h1, h2, h3, h4, h5, h6) {
    font-family: Poppins, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

::selection {
    background: var(--seo-sky);
    color: var(--seo-ink);
}

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

.gh-navigation:not(.has-accent-color) {
    background: rgb(255 255 255 / 0.82);
    border-bottom: 1px solid rgb(17 19 24 / 0.07);
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.025), 0 8px 30px rgb(15 23 42 / 0.035);
    -webkit-backdrop-filter: blur(24px) saturate(175%);
    backdrop-filter: blur(24px) saturate(175%);
}

.gh-navigation:not(.has-accent-color) .gh-navigation-actions {
    background: transparent;
}

.gh-navigation-inner {
    min-height: 82px;
}

.gh-navigation-logo,
.gh-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.gh-brand-mark {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
}

.gh-brand-wordmark {
    color: var(--seo-ink);
    font-family: Poppins, Inter, sans-serif;
    font-size: clamp(1.8rem, 2.2vw, 2.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
    white-space: nowrap;
}

.gh-brand-wordmark > span {
    color: #2d9dcd;
    font-weight: 650;
}

.gh-navigation-logo .gh-site-logo {
    width: auto;
    max-width: min(46vw, 320px);
    max-height: 48px;
}

.gh-footer-logo .gh-site-logo {
    width: auto;
    max-width: min(52vw, 260px);
    max-height: 36px;
}

.gh-navigation-menu,
.gh-navigation-actions,
.gh-footer-menu {
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.gh-navigation-menu .nav a {
    font-weight: 900;
}

.gh-navigation a:hover,
.gh-footer a:hover {
    color: #187fa9;
    opacity: 1;
}

.gh-navigation:not(.has-accent-color) .gh-icon-button {
    position: relative;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(17 19 24 / 0.06);
    border-radius: 13px;
    background: rgb(247 249 250 / 0.86);
    box-shadow: var(--seo-shadow-xs);
    pointer-events: auto;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gh-navigation:not(.has-accent-color) .gh-icon-button:hover {
    background: #fff;
    box-shadow: var(--seo-shadow-sm);
    opacity: 1;
    transform: translateY(-1px);
}

.gh-header.is-classic {
    background: #fff;
    border-bottom: 1px solid var(--seo-line);
}

.gh-header.is-classic .gh-header-inner {
    padding-block: clamp(68px, 10vw, 132px);
}

.gh-header.is-classic .gh-header-title {
    max-width: 950px;
    color: var(--seo-ink);
    font-size: clamp(4.2rem, 7vw, 8.2rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.02;
}

.gh-header.is-classic .gh-header-title::after {
    display: block;
    width: clamp(72px, 10vw, 132px);
    height: 7px;
    margin-top: 30px;
    border-radius: 999px;
    background: var(--seo-sky);
    content: "";
}

.gh-form {
    max-width: 720px;
    margin-top: 38px;
}

.gh-form-input {
    min-height: 58px;
    border: 1px solid #cfd5db;
    border-radius: 18px;
    background: var(--seo-soft);
    color: var(--seo-muted);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), var(--seo-shadow-xs);
}

.gh-form:hover .gh-form-input {
    border-color: #9edcf5;
    background: #fff;
}

.gh-form:focus-within .gh-form-input {
    border-color: var(--seo-sky);
    box-shadow: 0 0 0 4px rgb(105 201 242 / 0.18), var(--seo-shadow-sm);
}

.gh-container {
    background: #fff;
}

.gh-container-title {
    color: var(--seo-ink);
    font-weight: 700;
    letter-spacing: -0.03em;
}

.gh-card {
    border-radius: var(--seo-radius-md);
}

.gh-container.is-grid .gh-card {
    padding: 16px;
    border: 1px solid var(--seo-line);
    background: #fff;
    box-shadow: var(--seo-shadow-xs);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.gh-container.is-grid .gh-card:hover {
    transform: translateY(-3px);
    border-color: #a8def4;
    box-shadow: var(--seo-shadow-md);
}

.gh-card-image {
    overflow: hidden;
    border-radius: 16px;
    background: var(--seo-soft);
    box-shadow: inset 0 0 0 1px rgb(17 19 24 / 0.04);
}

.gh-card-title,
.gh-article-title {
    color: var(--seo-ink);
    font-weight: 700;
    letter-spacing: -0.04em;
}

.gh-card-title.is-title {
    font-weight: 900;
}

.gh-card-excerpt,
.gh-article-excerpt.is-body {
    color: var(--seo-muted);
}

.gh-card-tag,
.gh-article-tag {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--seo-sky-soft);
    color: #187fa9;
    font-size: 0.72em;
    font-weight: 760;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.gh-card-meta,
.gh-article-meta-content {
    color: #737c86;
}

.gh-button,
.gh-subscribe-input .gh-button {
    min-height: 42px;
    border: 1px solid var(--seo-ink);
    border-radius: var(--seo-radius-sm);
    background: var(--seo-ink);
    color: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.12), 0 8px 20px rgb(15 23 42 / 0.12);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.gh-button:not(.gh-button-secondary) {
    background: var(--seo-ink);
    color: #fff;
}

.gh-button:hover,
.gh-button:not(.gh-button-secondary):hover {
    border-color: #2d9dcd;
    background: var(--seo-sky);
    color: var(--seo-ink);
    box-shadow: 0 2px 5px rgb(24 127 169 / 0.12), 0 12px 26px rgb(24 127 169 / 0.16);
    opacity: 1;
    transform: translateY(-1px);
}

.gh-article-header {
    padding-top: clamp(28px, 4vw, 58px);
}

.gh-article-title.is-title {
    max-width: 1050px;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.06;
}

.gh-meta-share {
    align-items: center;
    gap: 24px;
}

.gh-article-meta {
    margin-left: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.gh-article-author-image {
    overflow: visible;
    margin-right: 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.gh-article-author-image a {
    width: 46px;
    height: 46px;
    margin: 0;
    border: 1px solid rgb(17 19 24 / 0.08);
    background: #f1f4f6;
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.08);
}

.gh-article-meta-wrapper {
    gap: 2px;
}

.gh-article-author-name {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.gh-article-meta-content {
    font-size: 1.25rem;
}

.gh-button-share {
    min-height: 40px;
    padding-inline: 16px;
    border-radius: 12px;
}

.gh-article-image,
.gh-content .kg-image-card {
    overflow: hidden;
    border-radius: var(--seo-radius-lg);
    background: var(--seo-soft);
    box-shadow: var(--seo-shadow-md);
}

.gh-article-image img,
.gh-content .kg-image {
    border-radius: inherit;
}

.gh-content {
    color: #252a31;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(1.7rem, 0.2vw + 1.62rem, 1.85rem);
    line-height: 1.75;
}

.gh-content :is(h1, h2, h3, h4) {
    color: var(--seo-ink);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.18;
}

.gh-content a {
    color: #126f96;
    text-decoration-color: var(--seo-sky);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.gh-content blockquote {
    padding: 1.15em 1.35em;
    border: 1px solid #dceaf0;
    border-left: 5px solid var(--seo-sky);
    border-radius: var(--seo-radius-md);
    background: #fbfdfe;
    color: #303740;
    box-shadow: var(--seo-shadow-xs);
}

.gh-content :is(code, pre) {
    border-radius: var(--seo-radius-sm);
}

.gh-content hr {
    height: 1px;
    border: 0;
    background: linear-gradient(90deg, transparent, #d8dfe5 12%, #d8dfe5 88%, transparent);
}

.gh-content li::marker {
    color: #258db9;
}

.gh-content > img,
.gh-content > p > img,
.gh-content > a > img {
    display: block;
    border-radius: var(--seo-radius-md);
    box-shadow: var(--seo-shadow-sm);
}

.gh-content :is(.kg-callout-card, .kg-file-card, .kg-toggle-card),
.gh-content .kg-bookmark-card .kg-bookmark-container {
    overflow: hidden;
    border-radius: var(--seo-radius-md);
    box-shadow: var(--seo-shadow-xs);
}

.gh-content .ki-widget {
    margin: 1.4em 0 !important;
    padding: 14px 17px !important;
    border: 1px solid #dce6ec !important;
    border-left: 5px solid var(--seo-sky) !important;
    border-radius: 18px !important;
    background: #f8fcfe !important;
    color: var(--seo-muted) !important;
    box-shadow: var(--seo-shadow-xs) !important;
    font-size: 0.84em !important;
    line-height: 1.55 !important;
}

.gh-content .ki-widget > p:first-child,
.gh-content .ki-widget-details > summary {
    color: var(--seo-ink) !important;
    font-weight: 720;
}

.gh-content .ki-widget-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    list-style: none;
}

.gh-content .ki-widget-details > summary::-webkit-details-marker {
    display: none;
}

.gh-content .ki-widget-details > summary::after {
    content: "Details anzeigen";
    flex: 0 0 auto;
    color: #187fa9;
    font-size: 0.9em;
}

.gh-content .ki-widget-details[open] > summary::after {
    content: "Schließen";
}

.gh-content .ki-widget-details-content {
    margin-top: 9px;
}

.gh-footer {
    padding-block: 18px;
    border-top: 1px solid var(--seo-line);
    background: #fff;
    color: var(--seo-muted);
    box-shadow: none;
}

.gh-social-links a {
    border-radius: 12px;
    box-shadow: var(--seo-shadow-xs);
}

.gh-footer-bar {
    border-color: var(--seo-line);
}

.gh-footer a:not(.gh-button) {
    color: var(--seo-muted);
    font-size: 0.82em;
    font-weight: 580;
}

.gh-footer .gh-brand-mark {
    width: 28px;
    height: 28px;
}

.gh-footer .gh-brand-wordmark {
    font-size: 1.85rem;
}

@media (max-width: 767px) {
    .gh-navigation-inner {
        min-height: 68px;
    }

    .gh-brand-mark {
        width: 30px;
        height: 30px;
    }

    .gh-header.is-classic .gh-header-inner {
        padding-block: 54px 64px;
    }

    .gh-header.is-classic .gh-header-title::after {
        height: 5px;
        margin-top: 22px;
    }

    .gh-container.is-grid .gh-card {
        padding: 12px;
    }

    .gh-article-image,
    .gh-content .kg-image-card,
    .gh-content > img,
    .gh-content > p > img,
    .gh-content > a > img {
        border-radius: 18px;
    }

    .gh-article-meta {
        min-width: 0;
    }

    .gh-meta-share {
        gap: 16px;
    }

    .gh-article-author-image a {
        width: 42px;
        height: 42px;
    }

    .gh-article-meta-length .bull {
        display: none;
    }

    .gh-article-meta-length {
        display: none;
    }

    .gh-article-meta-content {
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gh-navigation .gh-icon-button,
    .gh-container.is-grid .gh-card,
    .gh-button {
        transition: none;
    }
}