/*
   Ergänzungen zum Original-Skin (skin/skin.css, skin/portal.css):
   Header mit Sternen, Inhaltsbausteine, Slider, Inplace-Editing und Anpassungen für Handys.
*/

/* Comic Sans MS ist auf Handys (Android, iOS) nicht installiert und darf nicht als Webfont ausgeliefert werden.
   Diese Einträge unter demselben Namen nehmen zuerst die installierte Comic Sans (PC, Mac) und sonst
   die freie Nachbildung "Comic Neue" (SIL Open Font License, siehe fonts/ComicNeue-OFL.txt). */
@font-face {
    font-family: "Comic Sans MS";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Comic Sans MS"), local("ComicSansMS"), url('../fonts/comic-neue-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: "Comic Sans MS";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Comic Sans MS Bold"), local("ComicSansMS-Bold"), url('../fonts/comic-neue-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: "Comic Sans MS";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local("Comic Sans MS Italic"), local("ComicSansMS-Italic"), url('../fonts/comic-neue-latin-400-italic.woff2') format('woff2');
}

@font-face {
    font-family: "Comic Sans MS";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: local("Comic Sans MS Bold Italic"), local("ComicSansMS-BoldItalic"), url('../fonts/comic-neue-latin-700-italic.woff2') format('woff2');
}

:root {
    --sheet: #F9EDD2;
    --sidebar: #F9E2AC;
    --accent: #953734;
    --text: #3D4F52;
    --head: #425866;
}

/* ---------- Header ---------- */

.art-header .art-headerobject {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../skin/images/header-object.png') no-repeat 0 0 / 100% 100%;
    margin: 0;
}

/* Funkelnde Sterne im Schriftzug (früher Flash-Animation).
   --x gilt für das 886 px breite Original-Kopfbild; --sx rechnet auf das breite Kopfbild um,
   --ox verschiebt mit dem dort mittig gesetzten Schriftzug. */
.sparkle {
    position: absolute;
    left: calc(var(--x) * var(--sx, 1) + var(--ox, 0%));
    top: var(--y);
    width: calc(4.2% * var(--sx, 1));
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.4);
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle, #fff 0 6%, rgba(255, 255, 255, .55) 14%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(90deg, transparent 0 47%, rgba(255, 255, 255, .9) 49% 51%, transparent 53%) center / 100% 12% no-repeat,
        linear-gradient(0deg, transparent 0 47%, rgba(255, 255, 255, .9) 49% 51%, transparent 53%) center / 12% 100% no-repeat;
    border-radius: 50%;
    animation: twinkle 4.2s ease-in-out infinite;
    animation-delay: var(--d);
}

.sparkle.small {
    width: calc(2.8% * var(--sx, 1));
}

@keyframes twinkle {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0deg); }
    45% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(20deg); }
    60% { opacity: .85; transform: translate(-50%, -50%) scale(.85) rotate(25deg); }
}

/* Bei "Animationen aus" (z. B. Windows-Einstellung) nur sanftes Auf- und Abblenden ohne Bewegung */
@keyframes twinkle-fade {
    0%, 100% { opacity: 0; }
    45% { opacity: 1; }
    60% { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
    .sparkle {
        transform: translate(-50%, -50%) scale(.85);
        animation-name: twinkle-fade;
    }
}

.menu-toggle {
    display: none;
}

/* ---------- Seitenleiste ---------- */

ul.art-vmenu a.active:before { background-position: bottom left; }
ul.art-vmenu a.active:after { background-position: bottom right; }

ul.art-vmenu > li > a::before,
ul.art-vmenu > li > a::after {
    /* Pfeil-Symbol aus der Menügrafik liegt im linken Teil */
    background-repeat: no-repeat;
}

.translate-box {
    margin-top: 18px;
    min-height: 26px;
}

.translate-activate {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: #fff;
    border: 1px solid #d5d5d5;
    border-radius: 2px;
    font: 12px Arial, sans-serif;
    color: #444;
    cursor: pointer;
}

.translate-activate:hover {
    border-color: #aaa;
}

.translate-g {
    font-weight: bold;
    color: #4285F4;
}

.translate-box.loaded .translate-activate {
    display: none;
}

.sidebar-content .art-post {
    margin: 0;
}

.sidebar-content .art-postcontent,
.sidebar-content .Normal {
    font-size: 14px;
}

/* ---------- Inhalt ---------- */

.art-postcontent .Normal,
.art-postcontent .Normal p {
    font-size: 20px;
    line-height: 29px;
}

.art-postcontent img {
    max-width: 100%;
}

.art-postheader {
    margin-bottom: 8px;
}

/* Überschrift mit Linien links und rechts (früher mit Unterstrichen gesetzt) */
.title-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .15em;
}

.title-line::before,
.title-line::after {
    content: '';
    flex: 1 1 0;
    max-width: 210px;
    border-bottom: 2px solid currentColor;
}

.separator {
    text-align: center;
    margin: 4px 0;
}

.separator img {
    max-width: 100%;
    height: auto;
}

/* Steckbrief einer Katze */
.catbox {
    display: flex;
    gap: 16px;
    width: auto;
    max-width: 600px;
    box-sizing: border-box;
    margin: 16px auto 16px 5px;
    line-height: 1.45;
}

.catbox-image {
    flex: 0 0 294px;
}

.catbox-image img {
    display: block;
    width: 294px;
    max-width: 100%;
    height: auto;
}

.catbox-data {
    flex: 1;
    min-width: 0;
}

.catbox-name,
.catbox-name a,
.art-postcontent .catbox-name a {
    color: var(--accent);
    font-size: inherit;
    line-height: 1.3;
    margin-bottom: 12px;
}

.catbox dl {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 14px 0;
    margin: 0;
}

.catbox dt {
    font-weight: bold;
}

.catbox dd {
    margin: 0;
}

.catbox a,
.art-postcontent .catbox a {
    font-size: 16px;
}

.clickable {
    cursor: pointer;
}

.animal-item.clickable:hover .catbox {
    border-color: var(--accent);
}

/* Würfe */
.litterbox {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 500px;
    box-sizing: border-box;
    margin: 0 0 16px 50px;
    padding: 5px;
    border: 1px dotted gray;
    background: #fff;
    text-align: center;
    font-size: 16px;
}

.litterbox-image {
    flex: 0 0 200px;
}

.litterbox-image img {
    display: block;
    width: 200px;
    max-width: 100%;
    height: auto;
}

.litterbox-text {
    flex: 1;
}

.art-postcontent a.litterbox-name {
    font-size: 32px;
    color: var(--accent);
    line-height: 1.4;
}

.catbox.litter-head,
.catbox.litter-image {
    display: block;
    text-align: center;
}

.litter-title {
    font-size: 30px;
    color: var(--accent);
    line-height: 1.5;
}

.litter-head p {
    font-size: 16px;
    margin: 8px 0;
}

.catbox.litter-image img {
    width: 500px;
    max-width: 100%;
    height: auto;
}

.litter-image-caption {
    font-size: 20px;
    color: var(--accent);
}

.litter-image-text {
    font-size: 16px;
}

/* ---------- Slider (Galerie, Baby-Galerie) ---------- */

.slider {
    position: relative;
    max-width: 600px;
    margin: 10px auto;
    outline: none;
}

.slider-window {
    overflow: hidden;
}

.slider-track {
    display: flex;
    transition: transform .6s ease;
}

.slide {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 1;
    margin: 0;
    box-sizing: border-box;
    background: var(--sheet);
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 !important;
}

.slider-baby .slide {
    background: var(--sidebar);
    padding: 30px;
}

.slide figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 30px;
    font-size: 15px;
    color: var(--head);
    text-align: left;
}

.slider-prev,
.slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 48px;
    padding: 0;
    border: 1px solid #c8c8c8;
    background: rgba(240, 240, 240, .85);
    color: #777;
    font-size: 28px;
    line-height: 44px;
    cursor: pointer;
    z-index: 2;
}

.slider-prev { left: 0; border-radius: 0 4px 4px 0; }
.slider-next { right: 0; border-radius: 4px 0 0 4px; }

.slider-prev:hover,
.slider-next:hover {
    background: #fff;
    color: var(--head);
}

.slider-count {
    text-align: right;
    font-size: 12px;
    color: var(--head);
    padding: 2px 4px;
}

/* ---------- Anmeldung & Bearbeitung ---------- */

.admin-bar {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: flex-end;
    padding: 4px 12px;
    background: #2f3e48;
    color: #fff;
    font: 13px Arial, sans-serif;
}

.admin-bar a,
.admin-bar button {
    color: #fff;
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.admin-bar form {
    display: inline;
}

/* Umschalter Bearbeitungs-/Ansichtsmodus */
.admin-bar .mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    text-decoration: none;
}

.mode-switch {
    position: relative;
    width: 34px;
    height: 18px;
    border-radius: 9px;
    background: #6b7c87;
    transition: background .2s;
}

.mode-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s;
}

.mode-toggle[aria-pressed="true"] .mode-switch {
    background: #e0a050;
}

.mode-toggle[aria-pressed="true"] .mode-switch::after {
    transform: translateX(16px);
}

/* Ansichtsmodus: Seite so zeigen, wie Besucher sie sehen */
.view-mode .edit-toolbar,
.view-mode .hidden-badge,
.view-mode .removed-block,
.view-mode .editable.block-hidden,
.view-mode .editable[data-empty="true"],
.view-mode .art-postheader:has(> [data-edit-title]:empty) {
    display: none;
}

.view-mode .editable,
.view-mode .editable:hover {
    outline: none;
}

.view-mode .editable [data-edit-html]:empty::after {
    content: none;
}

.login-form {
    display: grid;
    gap: 12px;
    max-width: 320px;
    margin: 20px auto;
    font-size: 16px;
}

.login-form label {
    display: grid;
    gap: 4px;
}

.login-form input {
    padding: 6px;
    font-size: 16px;
}

.form-error,
.validation-message {
    color: #b00020;
    font-size: 14px;
}

.btn {
    padding: 6px 16px;
    font: 15px "Comic Sans MS", Tahoma, Arial, sans-serif;
    color: #fff;
    background: #4a6a80;
    border: 1px solid #3b5566;
    border-radius: 3px;
    cursor: pointer;
}

.btn:hover {
    background: #3b5566;
}

.btn.secondary {
    background: #fff;
    color: #3b5566;
}

.editable {
    position: relative;
    outline: 1px dashed transparent;
    transition: outline-color .2s;
}

.editable:hover {
    outline-color: #7491A4;
}

.edit-toolbar {
    position: absolute;
    top: -16px;
    right: 4px;
    z-index: 20;
    display: flex;
    gap: 6px;
}

.edit-toolbar {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: calc(100% - 8px);
}

.edit-toolbar .btn {
    font-size: 13px;
    padding: 3px 10px;
}

.btn.danger {
    color: #a33;
}

/* Entfernter, fest eingebauter Abschnitt (nur für den Administrator sichtbar) */
.removed-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 7px;
    padding: 6px 10px;
    border: 1px dashed #b06a3b;
    color: #8a5a3a;
    font: 13px Arial, sans-serif;
}

.removed-block .btn {
    font-size: 13px;
    padding: 3px 10px;
}

.editable.editing {
    outline: 2px solid #4a6a80;
    background: rgba(255, 255, 255, .35);
}

.editable.editing [data-edit-title] {
    outline: 1px dashed #4a6a80;
    min-width: 200px;
}

[data-edit-title]:empty::after {
    content: attr(data-placeholder);
    color: #999;
    font-size: 16px;
}

.editable.editing [data-edit-html] {
    min-height: 60px;
    outline: none;
}

.editable [data-edit-html]:empty::after {
    content: '(leer – zum Bearbeiten auf „Bearbeiten“ klicken)';
    color: #999;
    font-size: 14px;
}

/* Für Besucher ausgeblendeter Block (nur der Administrator sieht ihn) */
.editable.block-hidden {
    outline: 2px dashed #b06a3b;
}

.editable.block-hidden > .art-box-body {
    opacity: .45;
}

.hidden-badge {
    position: absolute;
    top: -12px;
    left: 8px;
    z-index: 20;
    padding: 2px 8px;
    background: #b06a3b;
    color: #fff;
    font: 12px Arial, sans-serif;
    border-radius: 2px;
}

.editable:not(.block-hidden) > .hidden-badge {
    display: none;
}

.edit-status {
    font: 13px Arial, sans-serif;
    color: #2e7d32;
    align-self: center;
    background: #fff;
    padding: 2px 6px;
}

/* ---------- PC: breitere Seite (1140 statt 900 px) ----------
   Die Rahmengrafiken des Skins sind nur 900 px breit; die *-wide-Fassungen erzeugt tools/widen-skin.ps1. */

@media (min-width: 921px) {
    .art-sheet {
        width: auto;
        max-width: 1140px;
    }

    .art-sheet:before, .art-sheet:after {
        content: url('../skin/images/sheet_t-wide.png');
        background-image: url('../skin/images/sheet_b-wide.png');
    }

    .art-sheet:after {
        clip: rect(auto, auto, auto, 1357px);
    }

    .art-sheet-body:before, .art-sheet-body:after {
        background-image: url('../skin/images/sheet-wide.png');
    }

    .art-footer:before, .art-footer:after {
        background-image: url('../skin/images/footer_b-wide.png');
    }

    /* Menüspalte behält ihre bisherige Breite, der Inhalt bekommt den Platz */
    .art-content-layout .art-sidebar1,
    .art-content-layout .art-sidebar1:before {
        width: 222px;
    }

    /* Steckbriefe und Wurfkästen im breiteren Inhaltsbereich mittig */
    .catbox {
        max-width: 680px;
        margin: 16px auto;
    }

    .litterbox {
        margin: 0 auto 16px;
    }

    /* Kopfbild: Schriftzug mittig im blauen Bereich (um 116 px versetzt, siehe tools/widen-skin.ps1), Katzenfoto rechts */
    div.art-header {
        --sx: calc(886 / 1126);
        --ox: calc(116 / 1126 * 100%);
        height: auto;
        aspect-ratio: 1126 / 250;
    }

    .art-header:after {
        height: 100%;
        background-size: cover;
    }

    .art-header .art-headerobject {
        background-image: url('../skin/images/header-wide.jpg');
    }
}

/* ---------- Tablet & Handy ---------- */

@media (max-width: 920px) {
    #Body {
        min-width: 0;
        background-attachment: fixed;
    }

    .art-sheet {
        width: auto;
        max-width: none;
        margin: 0 6px -7px;
    }

    .art-sheet:before, .art-sheet:after,
    .art-sheet-body:before, .art-sheet-body:after {
        display: none;
    }

    .art-sheet-body {
        background: var(--sheet);
        padding: 0;
        border-radius: 0 0 6px 6px;
        box-shadow: 0 0 8px rgba(0, 0, 0, .25);
    }

    div.art-header {
        height: auto;
        aspect-ratio: 886 / 250;
    }

    .art-header:after {
        height: 100%;
        background-size: cover;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 44px;
        height: 40px;
        padding: 0 10px;
        background: rgba(47, 62, 72, .75);
        border: 1px solid rgba(255, 255, 255, .5);
        border-radius: 4px;
        cursor: pointer;
        z-index: 5;
    }

    .menu-toggle span {
        display: block;
        height: 2px;
        background: #fff;
        border-radius: 1px;
        transition: transform .2s, opacity .2s;
    }

    .menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
    .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .art-content-layout,
    .art-content-layout-row,
    .art-layout-cell {
        display: block;
        width: auto !important;
    }

    .art-content-layout .art-sidebar1 {
        display: none;
        background: var(--sidebar);
    }

    .art-content-layout .art-sidebar1:before {
        display: none;
    }

    .menu-open .art-content-layout .art-sidebar1 {
        display: block;
    }

    .art-post {
        margin: 4px;
    }

    .art-post-body {
        padding: 6px;
    }

    .art-postheader,
    .art-postheader .Head {
        font-size: 22px;
    }

    .art-postcontent .Normal,
    .art-postcontent .Normal p,
    .art-postcontent li {
        font-size: 17px;
        line-height: 1.55;
    }

    .art-postcontent .Normal img {
        height: auto !important;
    }

    .art-postcontent .Normal table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        height: auto !important;
    }

    .art-postcontent .Normal [style*="width"] {
        max-width: 100%;
    }

    .art-postcontent .Normal [style*="margin-left"] {
        margin-left: 0 !important;
    }

    .catbox {
        margin: 12px 0;
    }

    .litterbox {
        margin-left: 0;
    }

    .art-footer-text {
        font-size: 13px;
    }
}

@media (max-width: 600px) {
    .catbox,
    .litterbox {
        flex-direction: column;
        align-items: stretch;
    }

    .catbox-image,
    .litterbox-image {
        flex: none;
        text-align: center;
    }

    .catbox-image img,
    .litterbox-image img {
        width: 100%;
        margin: 0 auto;
    }

    .catbox dl {
        grid-template-columns: 95px 1fr;
        gap: 8px 0;
    }

    .slider-baby .slide {
        padding: 12px;
    }

    .slide figcaption {
        padding: 2px 12px;
    }

    .title-line::before,
    .title-line::after {
        max-width: 50px;
    }

    .art-postcontent a.litterbox-name {
        font-size: 26px;
    }
}

/* Blazor-Fehlerleiste: nur sichtbar, wenn Blazor einen Fehler meldet */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
    padding: 8px 40px 8px 16px;
    background: #ffffe0;
    color: #000;
    font: 14px/1.4 Arial, sans-serif;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .3);
}

#blazor-error-ui .reload {
    margin-left: 8px;
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 12px;
    top: 6px;
    cursor: pointer;
}

/* ---------- Farbrechner ---------- */

.colorcalc {
    --male: #4f86c6;
    --male-bg: #eaf2fb;
    --female: #d0688f;
    --female-bg: #fcedf2;
    --seal: #4b3326;
    --blue: #7d8ba1;
    --chocolat: #8a5a3b;
    --lilac: #bcaab8;
    --red: #d97f3e;
    --creme: #efd3a5;
    color: var(--text);
    line-height: 1.4;
    container-type: inline-size;
}

.cc-parents {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.cc-parent {
    min-width: 0;
    margin: 0;
    padding: 6px 14px 12px;
    border: 1px solid var(--male);
    border-top-width: 4px;
    border-radius: 8px;
    background: var(--male-bg);
}

.cc-parent.female {
    border-color: var(--female);
    background: var(--female-bg);
}

.cc-parent legend {
    padding: 0 6px;
    font-size: 17px;
    font-weight: bold;
    color: var(--head);
}

.cc-sex {
    display: inline-block;
    width: 1.3em;
    text-align: center;
    font-family: "Segoe UI Symbol", "DejaVu Sans", sans-serif;
    font-weight: bold;
}

.cc-sex.male { color: var(--male); }
.cc-sex.female { color: var(--female); }

.cc-label {
    margin: 10px 0 5px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7a8a90;
}

.cc-colors {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.cc-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.cc-choice:hover { border-color: rgba(0, 0, 0, .3); }

.cc-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cc-choice:has(input:checked) {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent) inset;
    font-weight: bold;
}

.cc-choice:has(input:focus-visible) { outline: 2px solid var(--head); outline-offset: 2px; }

/* Farbpunkt; Tortie = mit Rot/Creme gescheckt, Tabby = gestreift */
.cc-dot {
    --c: var(--seal);
    --o: var(--red);
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18) inset;
}

.cc-dot.cc-blue { --c: var(--blue); --o: var(--creme); }
.cc-dot.cc-chocolat { --c: var(--chocolat); }
.cc-dot.cc-lilac { --c: var(--lilac); --o: var(--creme); }
.cc-dot.cc-red { --c: var(--red); }
.cc-dot.cc-creme { --c: var(--creme); }

.cc-dot.tortie {
    background: conic-gradient(var(--c) 0 25%, var(--o) 0 40%, var(--c) 0 62%, var(--o) 0 80%, var(--c) 0);
}

.cc-dot.tabby {
    background-image: repeating-linear-gradient(115deg, transparent 0 3px, rgba(255, 255, 255, .45) 3px 5px);
}

.cc-dot.tortie.tabby {
    background:
        repeating-linear-gradient(115deg, transparent 0 3px, rgba(255, 255, 255, .45) 3px 5px),
        conic-gradient(var(--c) 0 25%, var(--o) 0 40%, var(--c) 0 62%, var(--o) 0 80%, var(--c) 0);
}

.cc-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.cc-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    cursor: pointer;
}

.cc-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.cc-track {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: #c9cfd2;
    transition: background .15s;
}

.cc-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    transition: transform .15s;
}

.cc-toggle input:checked + .cc-track { background: var(--male); }
.female .cc-toggle input:checked + .cc-track { background: var(--female); }
.cc-toggle input:checked + .cc-track::after { transform: translateX(14px); }
.cc-toggle input:focus-visible + .cc-track { outline: 2px solid var(--head); outline-offset: 2px; }

.cc-toggle.disabled {
    cursor: default;
    opacity: .55;
}

.cc-toggle small {
    display: block;
    font-size: 11px;
    color: #7a8a90;
}

.cc-genotype {
    margin-top: 12px;
    font: 13px Consolas, "Courier New", monospace;
    letter-spacing: .03em;
    color: #6a7a80;
}

.cc-genotype sup { font-size: 9px; }

.cc-genotype::before {
    content: "Genotyp: ";
    font-family: "Comic Sans MS", Tahoma, sans-serif;
}

.cc-submit { text-align: center; }

.cc-result {
    margin-top: 18px;
    transition: opacity .15s;
}

.colorcalc.loading .cc-result { opacity: .5; }

.cc-result-title {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--accent);
}

.cc-result-title small {
    display: block;
    font-size: 13px;
    font-weight: normal;
    color: #7a8a90;
}

.cc-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}

.cc-table th {
    padding: 8px 10px;
    text-align: left;
    font-size: 14px;
    color: #fff;
    background: #3D4F52;
}

.cc-table th .cc-sex { color: inherit; }

.cc-table td {
    padding: 7px 10px;
    border-top: 1px solid #eee;
    font-size: 14px;
    vertical-align: middle;
}

.cc-table tbody tr:hover { background: #fdf8ec; }

.cc-color {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cc-table .cc-num { width: 32%; }

.cc-pct {
    position: relative;
    display: block;
    height: 22px;
    border-radius: 4px;
    background: #f1f1f1;
    overflow: hidden;
}

.cc-bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--male);
    opacity: .35;
}

.cc-bar.female { background: var(--female); }

.cc-val {
    position: relative;
    display: block;
    padding: 0 7px;
    line-height: 22px;
    font-weight: bold;
}

.cc-none {
    display: block;
    padding-left: 7px;
    color: #bbb;
}

.cc-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: #7a8a90;
}

/* Nebeneinander nur, wenn beide Kästen genug Platz für drei Farben je Zeile haben */
@container (max-width: 700px) {
    .cc-parents { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
    .cc-parent { padding: 4px 10px 10px; }
    .cc-table th, .cc-table td { padding: 6px; font-size: 13px; }
    .cc-table .cc-num { width: 28%; }
    .cc-color { gap: 6px; }
    .cc-dot { width: 16px; height: 16px; }
}

@container (max-width: 330px) {
    .cc-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}