/* ==========================================================================
   comicfan.de — Joomla 6 site template
   Pop-art in the colours of the logo: red, yellow, blue, black outlines, halftone dots.
   The comic catalogue (com_comickatalog) reads the --cf-* variables below.
   ========================================================================== */

:root {
    --cf-red: #e8101a;
    --cf-yellow: #fcd116;
    --cf-blue: #0a8ff0;
    --cf-ink: #111111;
    --cf-paper: #fffdf5;
    --cf-muted: #5b564e;
    --cf-font-display: "Bangers", "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;

    --cfn-red-dark: #b00910;
    --cfn-yellow-light: #fff4b8;
    --cfn-blue-dark: #0a5bc4;
    --cfn-white: #ffffff;
    --cfn-font-text: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --cfn-line: 3px solid var(--cf-ink);
    --cfn-shadow: 5px 5px 0 var(--cf-ink);
    --cfn-shadow-sm: 3px 3px 0 var(--cf-ink);
    --cfn-radius: 14px;
    --cfn-max: 1320px;
    --cfn-gutter: clamp(16px, 3vw, 32px);
    --cfn-dots: radial-gradient(rgba(17, 17, 17, .13) 1.1px, transparent 1.4px);
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

body {
    margin: 0;
}

.cfn-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--cfn-font-text);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--cf-ink);
    background-color: var(--cf-paper);
    background-image: radial-gradient(rgba(252, 209, 22, .45) 1.3px, transparent 1.6px);
    background-size: 16px 16px;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--cfn-blue-dark);
    text-decoration-thickness: 2px;
    text-underline-offset: .18em;
}

a:hover,
a:focus-visible {
    color: var(--cf-red);
}

:focus-visible {
    outline: 3px solid var(--cf-blue);
    outline-offset: 2px;
}

h1,
h2,
h3,
h4,
.page-header h1,
.page-header h2 {
    font-family: var(--cf-font-display);
    font-weight: 400;
    letter-spacing: .03em;
    line-height: 1.1;
    margin: 0 0 .6em;
}

h1 {
    font-size: clamp(2rem, 4vw, 2.9rem);
    color: var(--cf-red);
    text-shadow: 2px 2px 0 var(--cf-ink);
    -webkit-text-stroke: 1px var(--cf-ink);
}

h2 {
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    color: var(--cfn-blue-dark);
}

h3 {
    font-size: 1.45rem;
}

h4 {
    font-size: 1.2rem;
}

p,
ul,
ol,
dl,
table,
figure {
    margin: 0 0 1em;
}

hr {
    border: 0;
    border-top: var(--cfn-line);
    margin: 2rem 0;
}

blockquote {
    position: relative;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--cfn-white);
    border: var(--cfn-line);
    border-radius: 22px;
    box-shadow: var(--cfn-shadow-sm);
    font-style: italic;
}

code,
pre {
    font-family: ui-monospace, Consolas, monospace;
    font-size: .92em;
    background: var(--cfn-yellow-light);
    border-radius: 6px;
    padding: .1em .35em;
}

pre {
    padding: 1rem;
    overflow: auto;
    border: 2px solid var(--cf-ink);
}

.cfn-container {
    width: 100%;
    max-width: var(--cfn-max);
    margin-inline: auto;
    padding-inline: var(--cfn-gutter);
}

.cfn-visually-hidden,
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.cfn-skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 1000;
    padding: .6rem 1rem;
    background: var(--cf-yellow);
    color: var(--cf-ink);
    border: var(--cfn-line);
    border-radius: 10px;
    font-weight: 800;
}

.cfn-skip:focus {
    top: 1rem;
}

/* ---------- Top bar ---------- */

.cfn-topbar {
    background: var(--cf-ink);
    color: var(--cfn-white);
    font-size: .9rem;
}

.cfn-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem 1.5rem;
    min-height: 38px;
}

.cfn-topbar a {
    color: var(--cf-yellow);
    font-weight: 700;
    text-decoration: none;
}

.cfn-topbar a:hover,
.cfn-topbar a:focus-visible {
    color: var(--cfn-white);
}

.cfn-topbar ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cfn-topbar p {
    margin: 0;
}

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

.cfn-header {
    position: relative;
    z-index: 50;
    background-color: var(--cf-yellow);
    background-image: radial-gradient(rgba(232, 16, 26, .28) 1.5px, transparent 1.8px);
    background-size: 12px 12px;
    border-bottom: 5px solid var(--cf-ink);
}

.cfn-sticky .cfn-header {
    position: sticky;
    top: 0;
}

.cfn-header__rays {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: repeating-conic-gradient(from 0deg at 11% 50%, rgba(255, 255, 255, .5) 0deg 7deg, transparent 7deg 18deg);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 25%, transparent 55%);
    mask-image: linear-gradient(90deg, #000 0%, #000 25%, transparent 55%);
}

.cfn-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 104px;
}

.cfn-brand {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex: 0 0 auto;
    color: var(--cf-ink);
    text-decoration: none;
}

.cfn-brand picture {
    display: block;
}

.cfn-brand__logo {
    display: block;
    width: 138px;
    height: auto;
    margin: 8px 0 -34px;
    filter: drop-shadow(4px 4px 0 rgba(17, 17, 17, .85));
    transform: rotate(-3deg);
    transition: transform .2s ease, width .2s ease, margin .2s ease;
}

.cfn-brand:hover .cfn-brand__logo,
.cfn-brand:focus-visible .cfn-brand__logo {
    transform: rotate(0deg) scale(1.04);
}

.cfn-brand__claim {
    display: inline-block;
    max-width: 16rem;
    padding: .35rem .8rem;
    background: var(--cfn-white);
    border: var(--cfn-line);
    border-radius: 18px 18px 18px 4px;
    box-shadow: var(--cfn-shadow-sm);
    font-weight: 800;
    font-size: .85rem;
    line-height: 1.25;
    transform: rotate(-1.5deg);
}

.cfn-scrolled.cfn-sticky .cfn-header__inner {
    min-height: 72px;
}

.cfn-scrolled.cfn-sticky .cfn-brand__logo {
    width: 84px;
    margin: 4px 0 -14px;
}

/* ---------- Main navigation (mod_menu) ---------- */

.cfn-nav {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.cfn-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cfn-nav__menu > ul,
.cfn-nav__menu .mod-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
}

.cfn-nav__menu li {
    position: relative;
}

/* 2.2.2, desktop row only (mobile menu stays as it is – it already stacks each <li> on its own full-width line):
   without this, the core mod_menu submenu-toggle <button> (added after the <a> for a top-level item with a dropdown,
   e.g. "Katalog") stacks below the link and makes that one <li> taller than its siblings – the whole row then
   centers the shorter items lower, so "Katalog" no longer lines up with "Tauschbörse"/"Meine Sammlung". */
@media (min-width: 992px) {
    .cfn-nav__menu li {
        display: flex;
        align-items: center;
    }
}

.cfn-nav__menu a,
.cfn-nav__menu .nav-header,
.cfn-nav__menu .mod-menu__separator,
.cfn-nav__menu .mod-menu__heading {
    display: block;
    padding: .38rem .9rem .3rem;
    font-family: var(--cf-font-display);
    font-size: 1.28rem;
    letter-spacing: .05em;
    line-height: 1.2;
    color: var(--cf-ink);
    background: var(--cfn-white);
    border: var(--cfn-line);
    border-radius: 10px;
    box-shadow: var(--cfn-shadow-sm);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.cfn-nav__menu a:hover,
.cfn-nav__menu a:focus-visible {
    color: var(--cfn-white);
    background: var(--cf-blue);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--cf-ink);
}

.cfn-nav__menu .current > a,
.cfn-nav__menu .active > a {
    color: var(--cfn-white);
    background: var(--cf-red);
}

/* Sub menus */
.cfn-nav__menu .mod-menu__sub,
.cfn-nav__menu li ul {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 60;
    min-width: 220px;
    display: none;
    flex-direction: column;
    gap: .35rem;
    padding: .7rem;
    background: var(--cf-yellow);
    border: var(--cfn-line);
    border-radius: 12px;
    box-shadow: var(--cfn-shadow);
}

.cfn-nav__menu li ul::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.cfn-nav__menu li:hover > ul,
.cfn-nav__menu li:focus-within > ul,
.cfn-nav__menu li.cfn-sub-open > ul {
    display: flex;
}

.cfn-nav__menu li ul a {
    font-size: 1.12rem;
}

/* Only inside a dropdown (nested item): a top-level item shows the same arrow via its own .mod-menu__toggle-sub
   button instead (2.2.2) – both at once looked like two arrows once the button sits next to the link (see
   ".cfn-nav__menu li" above). */
.cfn-nav__menu li ul li.parent > a::after,
.cfn-nav__menu li ul li.deeper > a::after {
    content: " ▾";
    font-size: .8em;
}

/* Search module in the header */
.cfn-nav__search form,
.cfn-nav__search .mod-finder,
.cfn-nav__search .search {
    display: flex;
    gap: .35rem;
    margin: 0;
}

.cfn-nav__search input[type="search"],
.cfn-nav__search input[type="text"] {
    width: 11rem;
}

.cfn-nav__search label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Right of the main menu: points and place of the logged-in user (mod_comickatalog_ranking, layout "score"). */
.cfn-nav__user .mod-ck-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
    padding: .25rem .6rem;
    color: var(--cf-ink);
    background: var(--cf-yellow);
    border: 2px solid var(--cf-ink);
    border-radius: 9px;
    box-shadow: 2px 2px 0 var(--cf-ink);
    white-space: nowrap;
}

.mod-ck-score__points {
    font-family: var(--cf-font-display);
    font-size: 1.1rem;
    letter-spacing: .03em;
}

.mod-ck-score__place {
    font-size: .8rem;
}

/* Message counter at the menu item "Nachrichten" (html/mod_menu/default.php). */
.ck-menu-count {
    display: inline-block;
    margin-left: .3rem;
    padding: 0 .35rem;
    font-size: .75em;
    line-height: 1.4;
    border: 1px solid currentColor;
    border-radius: 999px;
}

.ck-menu-count.has-new {
    color: var(--cfn-white);
    background: var(--cf-red);
    border-color: var(--cf-red);
}

/* Block "Benutzerranking" (mod_comickatalog_ranking, layout "default"). */
.mod-ck-ranking__list {
    margin: 0 0 .6rem;
    padding: 0;
    list-style: none;
}

.mod-ck-ranking__item {
    display: grid;
    grid-template-columns: 1.8rem 1fr auto;
    gap: .35rem;
    padding: .2rem 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
}

.mod-ck-ranking__item.is-me {
    font-weight: 700;
}

.mod-ck-ranking__place {
    font-family: var(--cf-font-display);
}

.mod-ck-ranking__points {
    white-space: nowrap;
}

.mod-ck-ranking__own,
.mod-ck-ranking__settings {
    margin: .3rem 0 0;
    font-size: .9rem;
}

/* Burger */
.cfn-nav-toggle {
    display: none;
    margin-left: auto;
    width: 52px;
    height: 48px;
    padding: 10px 11px;
    flex-direction: column;
    justify-content: space-between;
    /* 2.2.4: explicit, because the WHATWG HTML rendering spec gives <button> a UA-stylesheet
       default of align-items: flex-start as soon as the author turns it into a flex container
       (https://html.spec.whatwg.org/multipage/rendering.html#button-layout) — without this,
       .cfn-nav-toggle__bar below stretches to width:0 instead of the button's content width. */
    align-items: center;
    background: var(--cfn-white);
    border: var(--cfn-line);
    border-radius: 10px;
    box-shadow: var(--cfn-shadow-sm);
    cursor: pointer;
}

.cfn-nav-toggle__bar {
    display: block;
    /* 2.2.4: explicit width as a second, independent safeguard against the align-items issue
       above — align-self: stretch would only re-fix the cross axis, while the bars must have a
       width regardless of which flex property a future change touches. */
    width: 100%;
    height: 4px;
    background: var(--cf-ink);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

.cfn-nav-open .cfn-nav-toggle__bar:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.cfn-nav-open .cfn-nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.cfn-nav-open .cfn-nav-toggle__bar:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
}

/* 2.2.2: below ~1060px the main menu (Katalog/Tauschbörse/Meine Sammlung) plus the logged-in user's points no longer
   fit next to brand + claim on one line, so the menu's own flex-wrap silently pushed single items onto a second,
   differently centered row ("Meine Sammlung" no longer level with "Katalog"/"Tauschbörse"). The claim bubble is the
   one piece that can go without losing anything functional, well before the 991.98px breakpoint below switches to
   the mobile (hamburger) menu, which is unrelated and stays as it is. */
@media (max-width: 1100px) {
    .cfn-brand__claim {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .cfn-header__inner {
        min-height: 84px;
        flex-wrap: wrap;
        gap: .75rem 1rem;
    }

    .cfn-brand__logo {
        width: 96px;
        margin: 6px 0 -18px;
    }

    .cfn-nav-toggle {
        display: flex;
    }

    .cfn-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        padding: 1.4rem 0 1rem;
    }

    .cfn-nav-open .cfn-nav {
        display: flex;
    }

    .cfn-nav__menu > ul,
    .cfn-nav__menu .mod-menu {
        flex-direction: column;
        align-items: stretch;
    }

    .cfn-nav__menu .mod-menu__sub,
    .cfn-nav__menu li ul {
        position: static;
        display: flex;
        margin: .45rem 0 0 1.2rem;
        box-shadow: var(--cfn-shadow-sm);
    }

    .cfn-nav__search input[type="search"],
    .cfn-nav__search input[type="text"] {
        width: 100%;
    }

    .cfn-sticky .cfn-header {
        position: relative;
    }
}

/* ---------- Hero ---------- */

.cfn-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--cf-red);
    background-image:
        var(--cfn-dots),
        repeating-conic-gradient(from 0deg at 82% 60%, rgba(255, 255, 255, .12) 0deg 8deg, transparent 8deg 20deg);
    background-size: 10px 10px, auto;
    border-bottom: 5px solid var(--cf-ink);
}

.cfn-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
}

.cfn-hero__bubble {
    position: relative;
    max-width: 44rem;
    padding: 1.6rem 1.9rem 1.8rem;
    background: var(--cfn-white);
    border: 4px solid var(--cf-ink);
    border-radius: 34px;
    box-shadow: 8px 8px 0 var(--cf-ink);
}

.cfn-hero__bubble::after {
    content: "";
    position: absolute;
    left: 3.2rem;
    bottom: -31px;
    width: 42px;
    height: 32px;
    background: var(--cfn-white);
    border-right: 4px solid var(--cf-ink);
    border-bottom: 4px solid var(--cf-ink);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    transform: skewX(-18deg);
}

.cfn-hero__title {
    margin: 0 0 .4rem;
    font-size: clamp(2rem, 5vw, 3.4rem);
    color: var(--cf-red);
    text-shadow: 3px 3px 0 var(--cf-ink);
    -webkit-text-stroke: 1.2px var(--cf-ink);
}

.cfn-hero__text {
    margin: 0 0 1.2rem;
    font-size: 1.15rem;
    font-weight: 600;
}

.cfn-hero__burst {
    display: grid;
    place-items: center;
    width: clamp(150px, 18vw, 220px);
    aspect-ratio: 1;
    background: var(--cf-yellow);
    clip-path: polygon(50% 0%, 61% 18%, 82% 7%, 80% 30%, 100% 36%, 85% 52%, 98% 72%, 75% 74%, 70% 97%, 52% 84%, 32% 100%, 27% 77%, 3% 78%, 15% 58%, 0% 40%, 21% 31%, 16% 8%, 38% 18%);
    filter: drop-shadow(0 0 0 var(--cf-ink));
    transform: rotate(8deg);
}

.cfn-hero__burst span {
    font-family: var(--cf-font-display);
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    letter-spacing: .04em;
    color: var(--cf-red);
    text-shadow: 3px 3px 0 var(--cf-ink);
    -webkit-text-stroke: 1.2px var(--cf-ink);
}

.cfn-hero--modules {
    padding-block: 2rem;
    color: var(--cfn-white);
}

@media (max-width: 767.98px) {
    .cfn-hero__inner {
        grid-template-columns: 1fr;
    }

    .cfn-hero__burst {
        display: none;
    }
}

/* ---------- Buttons ---------- */

.cfn-button,
.btn,
button.button,
.cfn-panel button[type="submit"]:not(.ck-btn),
.cfn-panel input[type="submit"],
.cfn-card button[type="submit"]:not(.ck-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem 1.15rem .42rem;
    font-family: var(--cf-font-display);
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: .05em;
    line-height: 1.2;
    color: var(--cf-ink);
    background: var(--cfn-white);
    border: var(--cfn-line);
    border-radius: 10px;
    box-shadow: var(--cfn-shadow-sm);
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.cfn-button:hover,
.cfn-button:focus-visible,
.btn:hover,
.btn:focus-visible,
.cfn-panel button[type="submit"]:not(.ck-btn):hover,
.cfn-panel input[type="submit"]:hover {
    color: var(--cf-ink);
    background: var(--cf-yellow);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--cf-ink);
}

.cfn-button:active,
.btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--cf-ink);
}

.cfn-button--primary,
.btn-primary,
.cfn-panel button[type="submit"]:not(.ck-btn),
.cfn-panel input[type="submit"] {
    color: var(--cfn-white);
    background: var(--cf-red);
}

.cfn-button--primary:hover,
.cfn-button--primary:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
    color: var(--cfn-white);
    background: var(--cfn-red-dark);
}

.btn-secondary,
.btn-info {
    color: var(--cfn-white);
    background: var(--cf-blue);
}

.btn-success {
    color: var(--cfn-white);
    background: #198754;
}

.btn-danger {
    color: var(--cfn-white);
    background: var(--cfn-red-dark);
}

.btn-sm {
    font-size: 1rem;
    padding: .3rem .75rem .25rem;
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
select,
textarea,
.form-control,
.form-select {
    width: 100%;
    max-width: 100%;
    padding: .55rem .75rem;
    font: inherit;
    font-size: 1rem;
    color: var(--cf-ink);
    background: var(--cfn-white);
    border: 2px solid var(--cf-ink);
    border-radius: 9px;
    box-shadow: inset 2px 2px 0 rgba(17, 17, 17, .08);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    outline: 3px solid var(--cf-blue);
    outline-offset: 1px;
    border-color: var(--cf-ink);
}

label,
.form-label,
.control-label {
    font-weight: 800;
}

.control-group,
.mb-3 {
    margin-bottom: 1rem;
}

fieldset {
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 2px dashed var(--cf-ink);
    border-radius: var(--cfn-radius);
}

legend {
    padding: 0 .4rem;
    font-family: var(--cf-font-display);
    font-size: 1.35rem;
    letter-spacing: .03em;
}

.form-check {
    display: flex;
    align-items: center;
    gap: .5rem;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--cf-red);
}

.invalid,
.form-control-danger {
    border-color: var(--cf-red) !important;
}

/* ---------- Layout ---------- */

.cfn-top {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 2.2rem;
}

.cfn-breadcrumb {
    margin-top: 2rem;
}

.cfn-main {
    flex: 1 0 auto;
    display: grid;
    gap: 2rem;
    align-items: start;
    padding-block: 2.2rem 3.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
    .cfn-layout-right .cfn-main {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .cfn-layout-left .cfn-main {
        grid-template-columns: 280px minmax(0, 1fr);
    }

    .cfn-layout-both .cfn-main {
        grid-template-columns: 250px minmax(0, 1fr) 280px;
    }
}

.cfn-content {
    min-width: 0;
}

.cfn-content__top,
.cfn-content__bottom {
    display: grid;
    gap: 1.5rem;
}

.cfn-content__top {
    margin-bottom: 1.8rem;
}

.cfn-content__bottom {
    margin-top: 2rem;
}

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

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

.cfn-sidebar {
    display: grid;
    gap: 1.6rem;
}

/* The comic panel around the component output */
.cfn-panel {
    position: relative;
    padding: clamp(1.1rem, 3vw, 2.2rem);
    background: var(--cfn-white);
    border: 4px solid var(--cf-ink);
    border-radius: var(--cfn-radius);
    box-shadow: 8px 8px 0 var(--cf-ink);
}

.cfn-panel--standalone {
    margin: 1rem;
    box-shadow: none;
}

.cfn-panel > :last-child {
    margin-bottom: 0;
}

/* ---------- Module chrome cfnCard ---------- */

.cfn-card {
    position: relative;
    background: var(--cfn-white);
    border: var(--cfn-line);
    border-radius: var(--cfn-radius);
    box-shadow: var(--cfn-shadow);
}

.cfn-card__title {
    position: relative;
    margin: -3px -3px 0;
    padding: .55rem 1rem .45rem;
    font-family: var(--cf-font-display);
    font-size: 1.45rem;
    font-weight: 400;
    letter-spacing: .05em;
    color: var(--cf-ink);
    background: var(--cf-yellow);
    border: var(--cfn-line);
    border-radius: var(--cfn-radius) var(--cfn-radius) 0 0;
    text-shadow: none;
    -webkit-text-stroke: 0;
}

.cfn-card__body {
    padding: 1rem 1.1rem 1.1rem;
}

.cfn-card__body > :last-child {
    margin-bottom: 0;
}

.cfn-sidebar .cfn-card:nth-child(3n+2) .cfn-card__title {
    color: var(--cfn-white);
    background: var(--cf-blue);
}

.cfn-sidebar .cfn-card:nth-child(3n+3) .cfn-card__title {
    color: var(--cfn-white);
    background: var(--cf-red);
}

.cfn-card ul.mod-menu,
.cfn-card ul.mod-list,
.cfn-card ul.latestnews,
.cfn-card ul.mostread {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cfn-card ul.mod-menu li,
.cfn-card ul.mod-list li,
.cfn-card ul.latestnews li,
.cfn-card ul.mostread li {
    padding: .45rem 0;
    border-bottom: 2px dotted rgba(17, 17, 17, .35);
}

.cfn-card ul.mod-menu li:last-child,
.cfn-card ul.mod-list li:last-child,
.cfn-card ul.latestnews li:last-child,
.cfn-card ul.mostread li:last-child {
    border-bottom: 0;
}

.cfn-card ul.mod-menu a,
.cfn-card ul.mod-list a,
.cfn-card ul.latestnews a,
.cfn-card ul.mostread a {
    font-weight: 700;
    text-decoration: none;
}

.cfn-card ul.mod-menu .current > a {
    color: var(--cf-red);
}

/* ---------- Breadcrumbs ---------- */

.breadcrumb,
.mod-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    list-style: none;
    margin: 0;
    padding: .5rem 1rem;
    font-weight: 700;
    font-size: .95rem;
    background: var(--cfn-white);
    border: var(--cfn-line);
    border-radius: 999px;
    box-shadow: var(--cfn-shadow-sm);
}

.breadcrumb-item + .breadcrumb-item::before,
.mod-breadcrumbs__item + .mod-breadcrumbs__item::before {
    content: "»";
    margin-right: .5rem;
    color: var(--cf-red);
}

.breadcrumb a,
.mod-breadcrumbs a {
    text-decoration: none;
}

.mod-breadcrumbs__here {
    color: var(--cf-muted);
}

/* ---------- Messages ---------- */

#system-message-container {
    margin-bottom: 1.5rem;
}

joomla-alert,
.alert {
    display: block;
    position: relative;
    margin-bottom: 1rem;
    padding: .9rem 3rem .9rem 1.1rem;
    background: var(--cfn-white);
    border: var(--cfn-line) !important;
    border-radius: 18px;
    box-shadow: var(--cfn-shadow-sm);
    font-weight: 600;
}

joomla-alert[type="success"],
.alert-success {
    background: #e2f7e7;
}

joomla-alert[type="info"],
.alert-info {
    background: #e2f1fe;
}

joomla-alert[type="warning"],
.alert-warning {
    background: var(--cfn-yellow-light);
}

joomla-alert[type="danger"],
joomla-alert[type="error"],
.alert-danger,
.alert-error {
    background: #ffe3e4;
}

joomla-alert .alert-heading {
    font-family: var(--cf-font-display);
    font-size: 1.3rem;
    letter-spacing: .04em;
}

joomla-alert .joomla-alert--close,
joomla-alert button.joomla-alert--close {
    position: absolute;
    top: .5rem;
    right: .6rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.4rem;
    line-height: 1;
    background: var(--cfn-white);
    border: 2px solid var(--cf-ink);
    border-radius: 50%;
    cursor: pointer;
}

/* ---------- Tables ---------- */

.cfn-panel table:not([class*="ck-"]),
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: var(--cfn-line);
    border-radius: 12px;
    overflow: hidden;
}

.cfn-panel table:not([class*="ck-"]) th,
.table th {
    padding: .6rem .75rem;
    text-align: left;
    font-family: var(--cf-font-display);
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: .04em;
    color: var(--cf-yellow);
    background: var(--cf-ink);
}

.cfn-panel table:not([class*="ck-"]) td,
.table td {
    padding: .55rem .75rem;
    border-top: 2px solid rgba(17, 17, 17, .12);
}

.cfn-panel table:not([class*="ck-"]) tbody tr:nth-child(even) td,
.table-striped tbody tr:nth-child(even) td {
    background: #fffbe6;
}

/* ---------- Pagination ---------- */

.pagination,
.com-content-category-blog__pagination ul,
.pagination__wrapper ul {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
}

.page-link,
.pagination a,
.pagination > li > span {
    display: inline-block;
    min-width: 2.4rem;
    padding: .3rem .7rem .22rem;
    text-align: center;
    font-family: var(--cf-font-display);
    font-size: 1.15rem;
    letter-spacing: .04em;
    color: var(--cf-ink);
    background: var(--cfn-white);
    border: 2px solid var(--cf-ink);
    border-radius: 9px;
    box-shadow: 2px 2px 0 var(--cf-ink);
    text-decoration: none;
}

.page-item.active .page-link,
.pagination .active span {
    color: var(--cfn-white);
    background: var(--cf-red);
}

.page-item.disabled .page-link {
    opacity: .45;
    box-shadow: none;
}

.page-link:hover,
.pagination a:hover {
    color: var(--cfn-white);
    background: var(--cf-blue);
}

/* Start / previous / next / end (arrows from html/layouts/joomla/pagination/link.php): yellow, clearly not page numbers. */
.page-link--nav,
.pagination a.page-link--nav,
.pagination > li > span.page-link--nav {
    background: var(--cf-yellow);
    font-size: 1.35rem;
    line-height: 1;
    padding-top: .28rem;
}

.pagination a.page-link--nav:hover {
    color: var(--cfn-white);
    background: var(--cf-blue);
}

.page-link__arrow {
    display: inline;
    min-width: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: none;
}

/* ---------- Articles (com_content) ---------- */

.page-header {
    margin-bottom: 1rem;
}

.item-page .article-info,
.blog-item .article-info,
.article-info {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    margin: 0 0 1rem;
    font-size: .9rem;
    color: var(--cf-muted);
}

.article-info dt {
    display: none;
}

.article-info dd {
    margin: 0;
}

.blog-items {
    display: grid;
    gap: 1.6rem;
}

.blog-item {
    padding: 1.2rem 1.3rem;
    background: var(--cfn-white);
    border: var(--cfn-line);
    border-radius: var(--cfn-radius);
    box-shadow: var(--cfn-shadow-sm);
}

.blog-item h2 a {
    color: inherit;
    text-decoration: none;
}

.readmore a,
a.readmore {
    font-weight: 800;
}

.item-image img,
.blog-item .item-image img {
    border: var(--cfn-line);
    border-radius: 12px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    padding: 0;
}

.tags a,
.badge,
.label {
    display: inline-block;
    padding: .12rem .55rem;
    font-size: .85rem;
    font-weight: 800;
    color: var(--cf-ink);
    background: var(--cf-yellow);
    border: 2px solid var(--cf-ink);
    border-radius: 999px;
    text-decoration: none;
}

/* ---------- Comic catalogue (com_comickatalog) fine tuning ---------- */

.cfn-panel .ck-title {
    color: var(--cf-red);
}

.cfn-panel .ck-card {
    transition: transform .15s ease;
}

.cfn-panel .ck-card:hover {
    transform: rotate(-1deg) translateY(-3px);
}

.cfn-panel .ck-cover {
    background-color: var(--cfn-white);
}

.cfn-panel .ck-cover--empty {
    background-color: var(--cf-yellow);
    background-image: radial-gradient(rgba(232, 16, 26, .3) 1.5px, transparent 1.8px);
    background-size: 10px 10px;
}

/* ---------- Footer ---------- */

.cfn-footer {
    margin-top: auto;
    color: var(--cfn-white);
}

.cfn-footer__skyline {
    line-height: 0;
    margin-bottom: -1px;
}

.cfn-footer__skyline svg {
    display: block;
    width: 100%;
    height: clamp(50px, 7vw, 110px);
}

.cfn-footer__band {
    padding: 2.4rem 0 1.6rem;
    background-color: var(--cfn-blue-dark);
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1.4px, transparent 1.7px);
    background-size: 12px 12px;
    border-top: 6px solid var(--cf-ink);
    box-shadow: inset 0 6px 0 var(--cf-yellow);
}

.cfn-footer a {
    color: var(--cf-yellow);
    font-weight: 700;
}

.cfn-footer a:hover,
.cfn-footer a:focus-visible {
    color: var(--cfn-white);
}

.cfn-footer__modules {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-bottom: 2rem;
}

.cfn-footer .cfn-card {
    color: var(--cf-ink);
}

.cfn-footer .cfn-card a {
    color: var(--cfn-blue-dark);
}

.cfn-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
}

.cfn-footer__burst {
    display: grid;
    place-items: center;
    width: 190px;
    height: 110px;
    background: var(--cf-yellow);
    clip-path: polygon(50% 0%, 60% 22%, 84% 6%, 78% 32%, 100% 40%, 80% 55%, 96% 80%, 70% 74%, 62% 100%, 48% 80%, 28% 98%, 26% 74%, 2% 82%, 16% 56%, 0% 36%, 22% 30%, 16% 4%, 38% 20%);
    transform: rotate(-6deg);
}

.cfn-footer__burst span {
    font-family: var(--cf-font-display);
    max-width: 120px;
    font-size: 1.2rem;
    line-height: 1;
    text-align: center;
    letter-spacing: .04em;
    color: var(--cf-red);
    -webkit-text-stroke: .6px var(--cf-ink);
}

.cfn-footer__menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cfn-footer__copy {
    margin: 0 0 0 auto;
    font-size: .92rem;
    font-weight: 600;
    opacity: .92;
}

@media (max-width: 767.98px) {
    .cfn-footer__copy {
        margin-left: 0;
    }
}

/* ---------- Back to top ---------- */

.cfn-backtop {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 80;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--cf-ink);
    background: var(--cf-yellow);
    border: var(--cfn-line);
    border-radius: 50%;
    box-shadow: var(--cfn-shadow-sm);
    text-decoration: none;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
}

.cfn-backtop.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.cfn-backtop:hover,
.cfn-backtop:focus-visible {
    color: var(--cfn-white);
    background: var(--cf-red);
}

/* ---------- 2.3.0: Hinweis „Zum Home-Bildschirm“ (iPhone/iPad) ---------- */

.cfn-ioshint {
    position: fixed;
    left: 50%;
    bottom: calc(.8rem + env(safe-area-inset-bottom, 0px));
    z-index: 90;
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    width: min(32rem, calc(100% - 1.6rem));
    padding: .8rem 3.2rem .8rem .8rem;
    color: var(--cf-ink);
    background: var(--cfn-white);
    border: var(--cfn-line);
    border-radius: var(--cfn-radius);
    box-shadow: var(--cfn-shadow);
    transform: translateX(-50%);
}

.cfn-ioshint[hidden] {
    display: none;
}

.cfn-ioshint__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 2px solid var(--cf-ink);
    border-radius: 11px;
}

.cfn-ioshint__body {
    min-width: 0;
}

.cfn-ioshint__title {
    margin: 0 0 .2rem;
    font-weight: 800;
    line-height: 1.25;
}

.cfn-ioshint__text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.4;
}

.cfn-ioshint__share {
    display: inline-block;
    vertical-align: -3px;
    color: var(--cfn-blue-dark);
}

.cfn-ioshint__close {
    position: absolute;
    top: .35rem;
    right: .35rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--cf-ink);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.cfn-ioshint__close:hover,
.cfn-ioshint__close:focus-visible {
    color: var(--cfn-white);
    background: var(--cf-red);
}

/* Solange der Hinweis sichtbar ist, verdeckt er nicht das Seitenende, und der „Nach oben“-Button rückt darüber. */
.cfn-ioshint-shown {
    padding-bottom: calc(var(--cfn-ioshint-h, 0px) + 1.6rem);
}

#cfn-content:focus {
    outline: none;
}

.cfn-ioshint-shown .cfn-backtop {
    bottom: calc(1.2rem + var(--cfn-ioshint-h, 0px));
}

/* ---------- Error / offline page ---------- */

.cfn-body--error {
    background-color: var(--cf-yellow);
    background-image: radial-gradient(rgba(232, 16, 26, .25) 1.5px, transparent 1.8px);
    background-size: 12px 12px;
}

.cfn-error {
    max-width: 38rem;
    margin: 0 auto;
    padding: 3rem 1.25rem;
    text-align: center;
}

.cfn-error__logo {
    width: 220px;
    height: auto;
    margin: 0 auto 1rem;
    filter: drop-shadow(5px 5px 0 rgba(17, 17, 17, .85));
}

.cfn-error__burst {
    display: inline-grid;
    place-items: center;
    width: 200px;
    height: 140px;
    margin-bottom: 1rem;
    background: var(--cfn-white);
    clip-path: polygon(50% 0%, 60% 22%, 84% 6%, 78% 32%, 100% 40%, 80% 55%, 96% 80%, 70% 74%, 62% 100%, 48% 80%, 28% 98%, 26% 74%, 2% 82%, 16% 56%, 0% 36%, 22% 30%, 16% 4%, 38% 20%);
}

.cfn-error__burst span {
    font-family: var(--cf-font-display);
    font-size: 3.4rem;
    color: var(--cf-red);
    text-shadow: 3px 3px 0 var(--cf-ink);
    -webkit-text-stroke: 1.2px var(--cf-ink);
}

.cfn-error__title {
    color: var(--cf-ink);
    text-shadow: none;
    -webkit-text-stroke: 0;
}

.cfn-error__message {
    font-weight: 700;
}

.cfn-error__debug {
    margin-top: 2rem;
    text-align: left;
    overflow: auto;
}

.cfn-offline-login {
    margin-top: 1.5rem;
    text-align: left;
}

/* ---------- Print ---------- */

@media print {
    .cfn-topbar,
    .cfn-header__rays,
    .cfn-nav,
    .cfn-nav-toggle,
    .cfn-hero,
    .cfn-sidebar,
    .cfn-footer__skyline,
    .cfn-backtop {
        display: none !important;
    }

    .cfn-body {
        background: none;
    }

    .cfn-header {
        position: static !important;
        background: none;
        border-bottom: 2px solid #000;
    }

    .cfn-panel {
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .cfn-footer__band {
        color: #000;
        background: none;
        box-shadow: none;
    }
}

/* 2.2.0 (release 5.0.0): no "get the app" links inside the comicfan app (class set by js/template.js) */
.cfn-in-app .cfn-app-link,
.cfn-in-app li:has(> .cfn-app-link),
.cfn-in-app [data-cfn-hide-in-app] {
    display: none !important;
}

/* ---------- 2.2.1: Joomla-Eingabegruppen mit Passwort-Umschalter bzw. Symbol (Login, Registrierung, Profil, Login-Modul)
   Nur diese Gruppen (tester 5.1.1 M1: Gruppen mit mehreren Buttons, z. B. Smart Search, bleiben unverändert). Feld und
   Button/Symbol in einer Zeile; wird es zu schmal, bricht der Button um statt das Feld zusammenzudrücken. */
.input-group:has(> .input-password-toggle),
.input-group:has(> .input-group-text) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .4rem;
    width: 100%;
}

.input-group:has(> .input-password-toggle) > input,
.input-group:has(> .input-group-text) > input {
    flex: 1 1 8rem;
    /* 1 % statt auto: sonst bestimmt das size-Attribut (z. B. size="30") die Mindestbreite des Felds, und ein
       umgebendes fieldset (min-width: min-content) wird breiter als der Bildschirm. */
    width: 1%;
    min-width: 8rem;
}

.input-group > .input-password-toggle,
.input-group > .input-group-text {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.input-group > .input-group-text {
    padding: 0 .6rem;
}

.input-group > .input-password-toggle {
    min-width: 3rem;
    padding: 0 .85rem;
}