which browsers auto-close,
so the actual DOM is: .l-box > (empty p) + div.pure-u-* cards.
Only apply CSS Grid when the container actually has card wrappers,
so article pages with normal paragraphs are not affected. */
#extended > .l-box:has(> div[class*="pure-u-sm-"]) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
gap: 1rem;
}
/* Reset Pure grid widths on card wrappers */
#extended > .l-box:has(> div[class*="pure-u-sm-"]) > .pure-u-1[class*="pure-u-sm-"],
#extended > .l-box:has(> div[class*="pure-u-sm-"]) > .pure-u-1.pure-u-sm-11-24,
#extended > .l-box:has(> div[class*="pure-u-sm-"]) > .pure-u-1.pure-u-md-7-24,
#extended > .l-box:has(> div[class*="pure-u-sm-"]) > div[class*="pure-u-"] {
display: contents;
}
/* Pagination must NOT become a grid item — span full width */
#extended > .l-box:has(> div[class*="pure-u-sm-"]) > #pagination,
#extended > .l-box:has(> div[class*="pure-u-sm-"]) > div#pagination {
display: block !important;
grid-column: 1 / -1;
}
/* Hide the empty/whitespace
the browser auto-closes before
.
Only on containers with the card grid. */
#extended > .l-box:has(> div[class*="pure-u-sm-"]) > p:has(+ div[class*="pure-u-sm-"]) {
display: none;
}
.l-box2 {
padding: 1.25em;
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
border: 1px solid var(--border);
transition: box-shadow .2s ease, transform .2s ease;
/* Equal height cards */
display: flex;
flex-direction: column;
width: 100%;
}
.l-box2:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.l-box2 h3 {
margin-bottom: .4em;
}
.l-box2 h3 a {
color: var(--dark);
text-decoration: none;
}
.l-box2 h3 a:hover {
color: var(--green);
}
.l-box2 .pure-img {
border-radius: var(--radius-sm);
margin-top: .75em;
}
/* Push "weiterlesen" links to bottom for consistent card height */
.l-box2 a[href$="weiterlesen..."],
.l-box2 > a:last-child:not(:has(img)) {
display: inline-block;
margin-top: auto;
padding-top: .75em;
color: var(--green);
font-weight: 600;
font-size: .9rem;
}
.l-box2 > a:last-child:not(:has(img)):hover {
color: var(--green-dark);
}
/* ============================================================
SIDEBAR
============================================================ */
#sidebar .l-box {
background: var(--surface);
border: 1px solid var(--border);
}
#sidebar h3 {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--dark);
border-bottom: 2px solid var(--green);
padding-bottom: .4em;
margin-bottom: .6em;
}
/* --- Search form --- */
#search-form {
margin-top: .5em;
}
#search-form input[type="search"] {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: .9rem;
background: var(--bg);
transition: border-color .15s ease;
}
#search-form input[type="search"]:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px var(--green-light);
}
#search-form .button,
#search-form input[type="submit"] {
margin-top: .5em;
padding: 8px 20px;
background: var(--green);
color: #fff;
border: none;
border-radius: var(--radius-sm);
font-size: .85rem;
font-weight: 600;
cursor: pointer;
transition: background .15s ease;
}
#search-form .button:hover,
#search-form input[type="submit"]:hover {
background: var(--green-dark);
}
/* ============================================================
PAGINATION
============================================================ */
#pagination {
text-align: center;
padding: 1.5em 0 .5em;
font-size: .9rem;
}
#pagination a {
display: inline-block;
min-width: 2em;
padding: .3em .6em;
margin: 0 2px;
border-radius: var(--radius-sm);
transition: background .15s ease, color .15s ease;
}
#pagination a:hover {
background: var(--green);
color: #fff;
}
/* ============================================================
FOOTER
============================================================ */
#footer {
text-align: center;
padding: 2em 1em;
color: var(--text-muted);
font-size: .85rem;
border-top: 1px solid var(--border);
margin-top: 2rem;
}
#footer a {
color: var(--text-muted);
font-weight: 500;
}
#footer a:hover {
color: var(--green);
}
/* ============================================================
SOCIAL SHARING
============================================================ */
#share_plugin {
padding: 1.5em 0;
text-align: center;
}
#share_plugin img {
width: 32px !important;
height: 32px !important;
display: inline !important;
opacity: .5;
transition: opacity .15s ease, transform .15s ease;
margin: 0 4px;
}
#share_plugin img:hover {
opacity: 1;
transform: scale(1.15);
}
/* ============================================================
TABLES
============================================================ */
table {
width: 100%;
border-collapse: collapse;
margin: 1em 0;
font-size: .9rem;
}
th, td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border);
}
th {
background: var(--bg);
font-weight: 600;
color: var(--dark);
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .03em;
}
tr:hover {
background: var(--green-light);
}
/* ============================================================
CODE
============================================================ */
code {
background: var(--bg);
padding: 2px 6px;
border-radius: 4px;
font-family: var(--font-mono);
font-size: .88em;
}
pre {
background: var(--dark);
color: #e8eaee;
padding: 1em 1.25em;
border-radius: var(--radius-sm);
overflow-x: auto;
font-size: .88em;
line-height: 1.5;
}
pre code {
background: none;
padding: 0;
color: inherit;
}
/* ============================================================
BLOCKQUOTE
============================================================ */
blockquote {
border-left: 3px solid var(--green);
margin: 1em 0;
padding: .5em 1em;
background: var(--green-light);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--text);
font-style: italic;
}
/* ============================================================
MISC
============================================================ */
hr {
border: none;
border-top: 1px solid var(--border);
margin: 2em 0;
}
::selection {
background: var(--green);
color: #fff;
}
/* --- HalkaBox overrides --- */
.halkaBox-overlay {
background: rgba(0,0,0,.92) !important;
}
/* --- Responsive --- */
@media (max-width: 48em) {
#innerHeader {
height: 220px;
}
#logo {
left: 16px;
bottom: 16px;
padding: 12px 20px;
}
#logo h1 {
font-size: 1.2rem;
}
#nav ul li a:link,
#nav ul li a:visited {
padding: 10px 12px;
font-size: .78rem;
}
.l-box, .l-box2 {
padding: 1em;
}
}
/* Charity/sidebar images */
#charity > a > img {
max-width: 100%;
border-radius: var(--radius-sm);
}