/* Gemeinsame Hero-Sprache für alle Knobelhelden-Seitentypen. */
:root {
    --kh-app-content-width: 1380px;
    --kh-app-content-gutter: 32px;
    --kh-page-hero-ink: #173b73;
    --kh-page-hero-copy: #334e72;
    --kh-page-hero-accent: #ef6c4d;
    --kh-page-hero-card: rgba(255, 255, 255, .9);
    --kh-page-hero-border: rgba(166, 202, 230, .72);
    --kh-page-hero-shadow: 0 18px 42px rgba(38, 107, 151, .13);
    --kh-page-hero-image: url("../images/ah-home-hero-background.webp");
    --kh-page-hero-mascot: url("../images/ah-hero-wave.webp");
}

/* GeneratePress setzt oberhalb des Seiteninhalts einen eigenen Containerabstand. */
body:has(.kh-home-app-header) #page,
body:has(.kh-home-app-header) .site-content,
body:has(.kh-home-app-header) .site-content > .content-area,
body:has(.kh-home-app-header) #primary,
body:has(.kh-home-app-header) .site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ein gemeinsames Inhaltsraster für Header, Hero und alle Seitenbereiche. */
body:has(.kh-home-app-header) .kh-container,
body:has(.kh-home-app-header) .kh-thinking-shell,
body:has(.kh-home-app-header) .kh-profile-page-shell,
body:has(.kh-home-app-header) .kh-about-shell,
body:has(.kh-home-app-header) .kh-contact-shell,
body:has(.kh-home-app-header) .kh-legal-shell,
body:has(.kh-home-app-header) .kh-search-shell,
body:has(.kh-home-app-header) .kh-game-detail-page .kh-thinking-shell,
body:has(.kh-home-app-header) .kh-thinking-overview-page .kh-thinking-shell {
    box-sizing: border-box;
    width: min(var(--kh-app-content-width), calc(100% - var(--kh-app-content-gutter))) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.kh-thinking-hero,
.kh-c4-intro,
.kh-raetsel .kh-hero-panel,
.kh-landing-page .kh-landing-hero-panel,
.kh-search-hero-panel,
.kh-profile-page-hero,
.kh-about-hero,
.kh-contact-hero,
.kh-legal-hero {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    border: 1px solid var(--kh-page-hero-border);
    border-radius: 26px;
    background-color: #def4ff;
    background-image: linear-gradient(90deg, rgba(239, 250, 255, .9), rgba(255, 255, 255, .18)), var(--kh-page-hero-image);
    background-position: center, center 60%;
    background-repeat: no-repeat;
    background-size: cover, cover;
    color: var(--kh-page-hero-ink);
    box-shadow: var(--kh-page-hero-shadow);
}

.kh-thinking-hero > *,
.kh-c4-intro > *,
.kh-raetsel .kh-hero-panel > *,
.kh-landing-page .kh-landing-hero-panel > *,
.kh-search-hero-panel > *,
.kh-profile-page-hero > *,
.kh-about-hero > *,
.kh-contact-hero > *,
.kh-legal-hero > * { position: relative; z-index: 1; }

.kh-thinking-hero h1,
.kh-c4-intro h1,
.kh-raetsel .kh-hero-content h1,
.kh-landing-page .kh-landing-hero h1,
.kh-search-hero-panel h1,
.kh-profile-page-hero h1,
.kh-about-hero h1,
.kh-contact-hero h1,
.kh-legal-hero h1 { color: var(--kh-page-hero-ink) !important; }

.kh-thinking-hero p,
.kh-c4-intro p,
.kh-raetsel .kh-hero-content .kh-intro,
.kh-landing-page .kh-landing-hero .kh-intro,
.kh-search-hero-panel p,
.kh-profile-page-hero p,
.kh-about-hero p,
.kh-contact-hero p,
.kh-legal-hero p { color: var(--kh-page-hero-copy) !important; }

.kh-thinking-eyebrow,
.kh-raetsel .kh-hero-content .kh-eyebrow,
.kh-landing-page .kh-landing-hero .kh-eyebrow,
.kh-profile-page-kicker,
.kh-about-kicker,
.kh-contact-kicker,
.kh-legal-kicker { color: var(--kh-page-hero-accent) !important; }

/* Denkspielübersicht: dieselbe runde Heldenfigur wie auf der Startseite. */
.kh-thinking-hero { grid-template-columns: minmax(0, 1fr) 230px; }
.kh-thinking-hero::after,
.kh-c4-intro::after { display: none; }
.kh-thinking-hero-art {
    width: 220px;
    height: 220px;
    justify-self: end;
    border: 5px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    background: rgba(255, 255, 255, .68) var(--kh-page-hero-mascot) center top / 230px 230px no-repeat;
    box-shadow: 0 22px 45px rgba(38, 107, 151, .18);
    transform: none;
}
.kh-thinking-hero-art i { display: none; }

/* Spielhelden nutzen die bestehende Profilkarte als rechte Hero-Karte. */
.kh-c4-intro { grid-template-columns: minmax(0, 1fr) minmax(270px, 330px); }
.kh-c4-profile-note,
.kh-landing-hero-note {
    border-color: var(--kh-page-hero-border) !important;
    background: var(--kh-page-hero-card) !important;
    color: var(--kh-page-hero-ink) !important;
    box-shadow: 0 14px 30px rgba(38, 107, 151, .1);
    backdrop-filter: blur(10px);
}
.kh-c4-profile-note strong,
.kh-landing-hero-note strong { color: var(--kh-page-hero-ink) !important; }
.kh-c4-profile-note small,
.kh-landing-hero-note small { color: var(--kh-page-hero-copy) !important; }

/* Rätsel- und Landing-Hero behalten Vorschau bzw. Infokarte, wechseln aber in das gemeinsame Erscheinungsbild. */
.kh-raetsel .kh-hero-panel,
.kh-landing-page .kh-landing-hero-panel {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    padding-top: 52px;
    padding-bottom: 52px;
}
.kh-raetsel .kh-hero-panel::after,
.kh-landing-page .kh-landing-hero-panel::after { display: none; }
.kh-raetsel .kh-chip,
.kh-landing-page .kh-chip {
    border-color: rgba(23, 59, 115, .2) !important;
    background: rgba(255, 255, 255, .72) !important;
    color: var(--kh-page-hero-ink) !important;
}
.kh-raetsel .kh-preview-card { border-color: var(--kh-page-hero-border); background: rgba(255,255,255,.94); }
.kh-raetsel .kh-button-light { border-color: rgba(23,59,115,.22); background: rgba(255,255,255,.88); color: var(--kh-page-hero-ink) !important; }
.kh-raetsel .kh-hero-instruction-link { color: var(--kh-page-hero-ink) !important; }

/* Profil und Über-uns verwenden das neue hochauflösende Heldenmotiv im Kreis. */
.kh-profile-page-hero::after,
.kh-about-hero::after { display: none; }
.kh-profile-page-hero-visual {
    border: 1px solid var(--kh-page-hero-border) !important;
    border-radius: 22px !important;
    background: var(--kh-page-hero-card) !important;
    box-shadow: 0 14px 30px rgba(38, 107, 151, .1) !important;
}
.kh-profile-page-hero-visual img,
.kh-about-hero > img {
    border: 5px solid rgba(255, 255, 255, .92) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .68) !important;
    box-shadow: 0 18px 40px rgba(38, 107, 151, .17) !important;
}
.kh-profile-page-hero-visual img,
.kh-about-hero > img {
    content: url("../images/ah-hero-draw.webp");
    object-fit: contain;
    image-rendering: auto;
}
.kh-profile-page-hero-visual small { color: var(--kh-page-hero-copy) !important; }
.kh-about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    text-align: left;
}
.kh-about-hero > :not(img) { grid-column: 1; }
.kh-about-hero > img {
    width: 190px;
    height: 190px;
    margin: 0;
    grid-column: 2;
    grid-row: 1 / 6;
    align-self: center;
    justify-self: end;
}

/* Service-, Such- und Rechteseiten erhalten dieselbe Landschaft und Typografie. */
.kh-contact-hero-icon { border-color: rgba(23,59,115,.14) !important; background: rgba(255,255,255,.8) !important; color: #1769e7 !important; }
.kh-legal-hero { padding: 42px clamp(24px, 5vw, 60px); }
.kh-search-hero-panel { padding: clamp(32px, 5vw, 58px); }

/* Ein leiser Breadcrumb für alle Seitentypen: keine Karten- oder Pillenoptik. */
:where(.kh-breadcrumbs,.kh-thinking-breadcrumb,.kh-profile-page-breadcrumb,.kh-about-breadcrumb,.kh-contact-breadcrumb,.kh-legal-breadcrumb) {
    display: flex !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 28px !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 10px 0 0 !important;
    padding: 0 2px !important;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #7488a4 !important;
    font-size: .73rem !important;
    line-height: 1.25;
    white-space: nowrap;
    scrollbar-width: none;
}
:where(.kh-breadcrumbs,.kh-profile-page-breadcrumb) ol {
    display: flex !important;
    min-width: max-content;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    list-style: none;
}
:where(.kh-breadcrumbs,.kh-thinking-breadcrumb,.kh-profile-page-breadcrumb,.kh-about-breadcrumb,.kh-contact-breadcrumb,.kh-legal-breadcrumb)::-webkit-scrollbar,
:where(.kh-breadcrumbs,.kh-profile-page-breadcrumb) ol::-webkit-scrollbar { display: none; }
:where(.kh-breadcrumbs,.kh-thinking-breadcrumb,.kh-profile-page-breadcrumb,.kh-about-breadcrumb,.kh-contact-breadcrumb,.kh-legal-breadcrumb) a {
    padding: 3px 2px !important;
    border-radius: 5px;
    background: transparent !important;
    color: #7488a4 !important;
    font-weight: 500;
    text-decoration: none;
}
:where(.kh-breadcrumbs,.kh-thinking-breadcrumb,.kh-profile-page-breadcrumb,.kh-about-breadcrumb,.kh-contact-breadcrumb,.kh-legal-breadcrumb) a:hover {
    background: transparent !important;
    color: #1769e7 !important;
}
:where(.kh-breadcrumbs,.kh-thinking-breadcrumb,.kh-profile-page-breadcrumb,.kh-about-breadcrumb,.kh-contact-breadcrumb,.kh-legal-breadcrumb) strong,
:where(.kh-breadcrumbs,.kh-profile-page-breadcrumb) [aria-current="page"] {
    color: #425b7d !important;
    font-weight: 700 !important;
}
:where(.kh-thinking-breadcrumb,.kh-about-breadcrumb,.kh-contact-breadcrumb,.kh-legal-breadcrumb) > span[aria-hidden="true"] {
    margin: 0 7px;
    color: #b2bfd0 !important;
}
:where(.kh-breadcrumbs,.kh-profile-page-breadcrumb) li:not(:last-child)::after {
    margin: 0 7px !important;
    color: #b2bfd0 !important;
    content: '\203A' !important;
    font-size: 1em !important;
}

@media (max-width: 920px) {
    .kh-thinking-hero,
    .kh-c4-intro { grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; padding: 38px; }
    .kh-thinking-hero-art { width: 170px; height: 170px; background-size: 180px 180px; }
    .kh-c4-profile-note { width: 100%; min-width: 0; }
}

@media (max-width: 700px) {
    .kh-thinking-hero,
    .kh-c4-intro,
    .kh-profile-page-hero,
    .kh-contact-hero { grid-template-columns: 1fr; padding: 28px 22px; }
    .kh-thinking-hero-art { width: 142px; height: 142px; justify-self: center; background-size: 152px 152px; }
    .kh-thinking-hero h1,
    .kh-c4-intro h1 { font-size: clamp(2rem, 11vw, 3rem); }
    .kh-raetsel .kh-hero-panel,
    .kh-landing-page .kh-landing-hero-panel { padding: 34px 20px; background-position: center, 36% bottom; }
    .kh-profile-page-hero-visual { justify-self: center; }
    .kh-about-hero,
    .kh-legal-hero,
    .kh-search-hero-panel { padding: 30px 22px; background-position: center, 36% bottom; }
    .kh-about-hero { grid-template-columns: 1fr; text-align: center; }
    .kh-about-hero > :not(img),
    .kh-about-hero > img { grid-column: 1; }
    .kh-about-hero > img { width: 126px; height: 126px; grid-row: 1; justify-self: center; margin-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .kh-thinking-hero-art,
    .kh-profile-page-hero-visual,
    .kh-about-hero > img { animation: none !important; }
}

/* Hero-Geometrie: desktop dieselbe kompakte Höhe und volle Breite wie die Startseite. */
@media (min-width: 701px) {
    .kh-thinking-hero,
    .kh-c4-intro,
    .kh-raetsel .kh-hero-panel,
    .kh-landing-page .kh-landing-hero-panel,
    .kh-search-hero-panel,
    .kh-profile-page-hero,
    .kh-about-hero,
    .kh-contact-hero,
    .kh-legal-hero {
        width: 100vw;
        height: 276px;
        min-height: 276px;
        margin-left: calc(50% - 50vw);
        padding: 30px max(16px, calc((100vw - var(--kh-app-content-width)) / 2));
        align-items: center;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
    .kh-thinking-hero h1,
    .kh-c4-intro h1,
    .kh-raetsel .kh-hero-content h1,
    .kh-landing-page .kh-landing-hero h1 { font-size: clamp(2.55rem, 3.7vw, 3.45rem); }
    .kh-raetsel .kh-hero-content h1,
    .kh-landing-page .kh-landing-hero h1 { margin-bottom: 8px; font-size: clamp(2.25rem, 3.2vw, 3rem); }
    .kh-raetsel .kh-hero-content .kh-intro,
    .kh-landing-page .kh-landing-hero .kh-intro { margin-bottom: 10px; line-height: 1.45; }
    .kh-raetsel .kh-taxonomy-list,
    .kh-landing-page .kh-taxonomy-list { flex-wrap: nowrap; gap: 7px; margin-bottom: 10px; }
    .kh-raetsel .kh-chip,
    .kh-landing-page .kh-chip { padding: 7px 10px; font-size: .8rem; white-space: nowrap; }
    .kh-raetsel .kh-hero-actions { gap: 8px; }
    .kh-raetsel .kh-hero-actions .kh-button { min-height: 42px; padding: 9px 15px; }
    .kh-raetsel .kh-preview-card { max-height: 224px; }
    .kh-raetsel .kh-preview-image { max-height: 210px; object-fit: contain; }
    .kh-raetsel .kh-hero-panel,
    .kh-landing-page .kh-landing-hero-panel { padding-top: 16px; padding-bottom: 16px; }
    .kh-raetsel .kh-hero-content .kh-eyebrow,
    .kh-landing-page .kh-landing-hero .kh-eyebrow { margin-bottom: 4px; }
    .kh-raetsel .kh-hero-content h1,
    .kh-landing-page .kh-landing-hero h1 { margin-bottom: 5px; line-height: 1.02; }
    .kh-raetsel .kh-hero-content .kh-intro,
    .kh-landing-page .kh-landing-hero .kh-intro { margin-bottom: 6px; }
    .kh-raetsel .kh-taxonomy-list,
    .kh-landing-page .kh-taxonomy-list { margin-bottom: 6px; }
    .kh-raetsel .kh-hero-actions { margin-top: 0; }
}

/* Breadcrumb steht nach dem Hero und beeinflusst die Kopfzeile nicht mehr. */
.kh-thinking-shell,
.kh-profile-page-shell,
.kh-about-shell,
.kh-contact-shell,
.kh-legal-shell,
.kh-raetsel .kh-hero > .kh-container,
.kh-landing-page .kh-landing-hero > .kh-container,
.kh-search-hero > .kh-container {
    display: flex;
    flex-direction: column;
}
.kh-thinking-shell > *,
.kh-profile-page-shell > *,
.kh-about-shell > *,
.kh-contact-shell > *,
.kh-legal-shell > * { order: 3; }
.kh-thinking-shell > .kh-thinking-hero,
.kh-thinking-shell > .kh-c4-intro,
.kh-profile-page-shell > .kh-profile-page-hero,
.kh-about-shell > .kh-about-hero,
.kh-contact-shell > .kh-contact-hero,
.kh-legal-shell > .kh-legal-hero,
.kh-raetsel .kh-hero-panel,
.kh-landing-page .kh-landing-hero-panel,
.kh-search-hero-panel { order: 1; }
.kh-thinking-shell > .kh-thinking-breadcrumb,
.kh-profile-page-shell > .kh-profile-page-breadcrumb,
.kh-about-shell > .kh-about-breadcrumb,
.kh-contact-shell > .kh-contact-breadcrumb,
.kh-legal-shell > .kh-legal-breadcrumb,
.kh-raetsel .kh-hero .kh-breadcrumbs,
.kh-landing-page .kh-landing-hero .kh-breadcrumbs,
.kh-search-hero .kh-breadcrumbs {
    order: 2;
    align-self: flex-start;
    margin: 15px 0 0 !important;
}

.kh-raetsel .kh-hero,
.kh-landing-page .kh-landing-hero,
.kh-search-hero {
    padding-top: 0 !important;
    padding-bottom: 14px !important;
}
.kh-thinking-page,
.kh-profile-page-main,
.kh-about-main,
.kh-contact-main,
.kh-legal-main { padding-top: 0 !important; }
.kh-thinking-shell > .kh-thinking-breadcrumb,
.kh-profile-page-shell > .kh-profile-page-breadcrumb,
.kh-about-shell > .kh-about-breadcrumb,
.kh-contact-shell > .kh-contact-breadcrumb,
.kh-legal-shell > .kh-legal-breadcrumb,
.kh-raetsel .kh-hero .kh-breadcrumbs,
.kh-landing-page .kh-landing-hero .kh-breadcrumbs,
.kh-search-hero .kh-breadcrumbs { margin-top: 10px !important; margin-bottom: 0 !important; }

/* Kontextbezogene Heldenmotive. Weiße Bildflächen werden im Kreis verborgen. */
.kh-thinking-hero-art {
    background-image: url("../images/ah-hero-run.webp");
    background-position: center;
    background-size: cover;
}
.kh-c4-intro::before {
    content: "";
    display: block;
    width: 188px;
    height: 188px;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    border: 5px solid rgba(255,255,255,.94);
    border-radius: 50%;
    background: #fff url("../images/ah-hero-wave.webp") center / cover no-repeat;
    box-shadow: 0 18px 40px rgba(38,107,151,.16);
}
.kh-c4-intro.kh-game-detail-hero::before { display: none; }
.kh-c4-intro > div:first-child { grid-column: 1; grid-row: 1; }
.kh-c4-intro > .kh-c4-profile-note { grid-column: 3; grid-row: 1; }
.kh-c4-intro { grid-template-columns: minmax(0,1fr) 200px minmax(250px,300px); gap: 24px; }
.kh-nim-page .kh-c4-intro::before { background-image: url("../images/ah-hero-draw.webp"); }
.kh-mm-page .kh-c4-intro::before { background-image: url("../images/ah-hero-thumbs.webp"); }
.kh-word-page .kh-c4-intro::before { background-image: url("../images/ah-hero-run.webp"); }
.kh-profile-page-hero-visual img { content: url("../images/ah-hero-wave.webp"); }
.kh-about-hero > img { content: url("../images/ah-hero-draw.webp"); }
.kh-contact-hero { grid-template-columns: 190px minmax(0,1fr); }
.kh-contact-hero-icon {
    width: 178px !important;
    height: 178px !important;
    overflow: hidden;
    border: 5px solid rgba(255,255,255,.94) !important;
    border-radius: 50% !important;
    background: #fff url("../images/ah-hero-thumbs.webp") center / cover no-repeat !important;
    box-shadow: 0 18px 40px rgba(38,107,151,.16);
}
.kh-contact-hero-icon svg { display: none; }
.kh-legal-hero { padding-right: max(270px, calc((100vw - var(--kh-app-content-width)) / 2 + 220px)) !important; }
.kh-legal-hero::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    right: max(16px, calc((100vw - var(--kh-app-content-width)) / 2));
    width: 188px;
    height: 188px;
    border: 5px solid rgba(255,255,255,.94);
    border-radius: 50%;
    background: #fff url("../images/ah-hero-wave.webp") center / cover no-repeat;
    box-shadow: 0 18px 40px rgba(38,107,151,.16);
    transform: translateY(-50%);
}

@media (max-width: 1120px) and (min-width: 701px) {
    .kh-c4-intro { grid-template-columns: minmax(0,1fr) 160px 250px; gap: 18px; }
    .kh-c4-intro::before { width: 148px; height: 148px; }
}

@media (max-width: 700px) {
    :root { --kh-app-content-gutter: 24px; }
    .kh-thinking-page { padding-top: 0; }
    .kh-thinking-hero,
    .kh-c4-intro,
    .kh-raetsel .kh-hero-panel,
    .kh-landing-page .kh-landing-hero-panel,
    .kh-search-hero-panel,
    .kh-profile-page-hero,
    .kh-about-hero,
    .kh-contact-hero,
    .kh-legal-hero {
        width: 100vw;
        min-height: 0;
        margin-left: calc(50% - 50vw);
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }
    .kh-c4-intro { grid-template-columns: minmax(0,1fr) 112px; }
    .kh-c4-intro > div:first-child { grid-column: 1; }
    .kh-c4-intro::before { width: 104px; height: 104px; grid-column: 2; }
    .kh-c4-intro > .kh-c4-profile-note { grid-column: 1 / -1; grid-row: 2; }
    .kh-contact-hero { grid-template-columns: 104px minmax(0,1fr); text-align: left; }
    .kh-contact-hero-icon { width: 98px !important; height: 98px !important; margin: 0 !important; }
    .kh-legal-hero { padding-right: 22px !important; }
    .kh-legal-hero::before { display: none; }
    .kh-thinking-shell > .kh-thinking-breadcrumb,
    .kh-profile-page-shell > .kh-profile-page-breadcrumb,
    .kh-about-shell > .kh-about-breadcrumb,
    .kh-contact-shell > .kh-contact-breadcrumb,
    .kh-legal-shell > .kh-legal-breadcrumb,
    .kh-raetsel .kh-hero .kh-breadcrumbs,
    .kh-landing-page .kh-landing-hero .kh-breadcrumbs,
    .kh-search-hero .kh-breadcrumbs { margin: 8px 0 0 !important; }
}

/* Heldenprofil im gemeinsamen Landschafts-Hero und App-Inhaltsraster. */
body:has(.kh-profile-page-main) #page,
body:has(.kh-profile-page-main) .site.grid-container,
body:has(.kh-profile-page-main) .site-content,
body:has(.kh-profile-page-main) .site-content>.content-area,
body:has(.kh-profile-page-main) #primary,
body:has(.kh-profile-page-main) .site-main{box-sizing:border-box;width:100%!important;max-width:none!important;margin-right:0!important;margin-left:0!important;padding-right:0!important;padding-left:0!important}
body:has(.kh-profile-page-main) .site-content{display:block!important;overflow:visible!important}
.kh-profile-page-main{width:100%;max-width:none;overflow-x:clip;padding:0 0 72px;background:#f4f8fe}
.kh-profile-page-hero{box-sizing:border-box;width:100vw;min-height:315px;margin-left:calc(50% - 50vw);padding:24px max(16px,calc((100vw - var(--kh-app-content-width,1380px))/2));grid-template-columns:minmax(0,1fr) 240px 340px;align-items:center;gap:28px;border:0;border-radius:0;background-position:center,center 64%;box-shadow:none}
.kh-profile-page-hero-copy{min-width:0}
.kh-profile-page-hero .kh-profile-page-kicker{display:block;margin-bottom:8px;color:#ef6c4d!important;font-size:.74rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.kh-profile-page-hero h1{max-width:650px;margin:0 0 14px;font-size:clamp(2.55rem,3.8vw,3.7rem);font-weight:900;line-height:1.02;letter-spacing:-.035em;text-transform:uppercase}
.kh-profile-page-hero p{max-width:650px;margin:0 0 20px;font-size:1rem;line-height:1.55}
.kh-profile-page-hero-copy>a{min-height:48px;margin-top:0;padding:11px 20px;border-radius:11px;background:linear-gradient(135deg,#ffb72f,#ff8a18);box-shadow:0 12px 24px rgba(236,126,24,.2);color:#fff!important;font-weight:900}
.kh-profile-page-hero-copy>a:hover{background:linear-gradient(135deg,#ffc24e,#ff962c);color:#fff!important}
.kh-profile-page-hero-visual{display:grid;width:220px;height:220px;min-width:0;place-items:center;justify-self:center;overflow:hidden;padding:0!important;border:5px solid rgba(255,255,255,.94)!important;border-radius:50%!important;background:rgba(255,255,255,.68)!important;box-shadow:0 22px 45px rgba(38,107,151,.18)!important}
.kh-profile-page-hero-visual img{width:245px!important;height:245px!important;max-width:none;object-fit:cover!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;filter:none}
.kh-profile-page-hero-card{box-sizing:border-box;padding:20px 22px;border:1px solid var(--kh-page-hero-border);border-radius:20px;background:var(--kh-page-hero-card);box-shadow:var(--kh-page-hero-shadow);backdrop-filter:blur(10px)}
.kh-profile-page-hero-card>span{display:block;color:#7650a7;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.kh-profile-page-hero-card h2{margin:4px 0 14px;color:#173b73;font-size:1.3rem}
.kh-profile-page-hero-card ul{margin:0;padding:0;list-style:none}
.kh-profile-page-hero-card li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:12px;padding:9px 0;border-top:1px solid #dbe6f1}
.kh-profile-page-hero-card li>b{display:grid;width:36px;height:36px;place-items:center;border-radius:11px;background:#eaf4ff;color:#2679d8;font-size:.85rem}
.kh-profile-page-hero-card li>span{display:flex;min-width:0;flex-direction:column}
.kh-profile-page-hero-card li strong{color:#173b73;font-size:.9rem}
.kh-profile-page-hero-card li small{color:#64748b;font-size:.73rem;line-height:1.35}
.kh-profile-page-hero-card>a{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:11px;border-top:1px solid #dbe6f1;color:#1769e7!important;font-size:.82rem;font-weight:900;text-decoration:none}
.kh-profile-page-shell>.kh-profile-page-breadcrumb{min-height:0!important;margin:0!important;padding:10px 2px!important}
.kh-profile-page-content{margin-top:0;padding-top:28px;scroll-margin-top:96px}

@media(max-width:1180px){.kh-profile-page-hero{grid-template-columns:minmax(0,1fr) 190px 310px;gap:20px}.kh-profile-page-hero-visual{width:180px;height:180px}.kh-profile-page-hero-visual img{width:205px!important;height:205px!important}}
@media(max-width:900px){.kh-profile-page-hero{grid-template-columns:minmax(0,1fr) 310px}.kh-profile-page-hero-visual{display:none}.kh-profile-page-hero-card{grid-column:2;grid-row:1}}
@media(max-width:700px){.kh-profile-page-main{padding-bottom:54px}.kh-profile-page-hero{grid-template-columns:minmax(0,1fr);gap:20px;padding:22px 20px 24px}.kh-profile-page-hero h1{font-size:clamp(2.2rem,11vw,3rem)}.kh-profile-page-hero p{font-size:.94rem}.kh-profile-page-hero-card{grid-column:auto;grid-row:auto;padding:18px}.kh-profile-page-shell>.kh-profile-page-breadcrumb{padding-top:8px!important;padding-bottom:8px!important}.kh-profile-page-content{padding-top:22px}}

/* Ausmalhelden: reine Designangleichung ohne Profil-, Level- oder Spielelemente. */
.kh-landing-page .kh-landing-hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    align-items: center;
    column-gap: 42px;
    padding-right: max(24px, calc((100vw - var(--kh-app-content-width)) / 2));
    padding-left: max(24px, calc((100vw - var(--kh-app-content-width)) / 2));
}
.kh-landing-page .kh-landing-hero-panel > * { grid-column: 1; }
.kh-landing-page .kh-landing-hero-panel::after,
.kh-search-hero-panel::after {
    display: block;
    width: 210px;
    height: 210px;
    grid-column: 2;
    grid-row: 1 / span 8;
    justify-self: center;
    border: 5px solid rgba(255,255,255,.94);
    border-radius: 50%;
    background: rgba(255,255,255,.7) url("../images/ah-hero-wave.webp") center / cover no-repeat;
    box-shadow: 0 18px 40px rgba(38,107,151,.16);
    content: "";
}
.kh-search-hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    align-items: center;
    gap: 38px;
}
.kh-search-hero-panel > * { grid-column: 1; }
.kh-search-hero-panel::after { background-image: url("../images/ah-hero-thumbs.webp"); }
.kh-raetsel .kh-hero-panel { background-position: center, center 48%; }
.kh-raetsel .kh-preview-card { box-shadow: 0 18px 36px rgba(23,59,115,.15); }

@media (max-width: 700px) {
    .kh-landing-page .kh-landing-hero-panel,
    .kh-search-hero-panel { display: block; padding: 28px 20px; }
    .kh-landing-page .kh-landing-hero-panel::after,
    .kh-search-hero-panel::after { display: none; }
}