/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Description: Twenty Twenty-Five Child Theme
Version: 1.0
*/
:root {
/*colors*/
/* Hex-Farben */
--yellow: #FFEE58;
--black: #111111;
--white: #ffffff;
/* RGB-Basiswerte (für rgba-Nutzung) */
--yellow-rgb: 255, 238, 88;
--black-rgb: 17, 17, 17;
--white-rgb: 255, 255, 255;
/* Encodage direct du SVG (Attention à bien remplacer les doubles guillemets par des simples ' à l'intérieur du SVG) */
--icon-newsletter: url("data:image/svg+xml;utf8,");
--icon-insta: url("data:image/svg+xml;utf8,");
--icon-checked: url("data:image/svg+xml;utf8,");
--icon-previous: url("data:image/svg+xml;utf8,");
--icon-next: url("data:image/svg+xml;utf8,");
--icon-top: url("data:image/svg+xml;utf8,");
--icon-external-link: url("data:image/svg+xml;utf8,");
--icon-pdf: url("data:image/svg+xml;utf8,");
--icon-link: url("data:image/svg+xml;utf8,");
--icon-photographer: url("data:image/svg+xml;utf8,");
--icon-collaboration: url("data:image/svg+xml;utf8,");
--icon-price: url("data:image/svg+xml;utf8,");
--icon-goal: url("data:image/svg+xml;utf8,");
--icon-location: url("data:image/svg+xml;utf8,");
--icon-year: url("data:image/svg+xml;utf8,");
--icon-refresh: url("data:image/svg+xml;utf8,");
--icon-gallery-list: url("data:image/svg+xml;utf8,");
--icon-titel-list: url("data:image/svg+xml;utf8,");
}
/* ==========================================================================
1. GLOBALS & TYPOGRAFIE
========================================================================== */
::selection {
color: var(--yellow);
background: var(--black);
}
html {
scroll-behavior: smooth;
}
#info {
scroll-margin-top: 6rem;
}
figure {
display: block;
position: relative;
}
figure figcaption {
font-family: var(--wp--preset--font-family--open-sans) !important;
letter-spacing: .04rem;
text-orientation: sideways;
transform: rotate(180deg);
writing-mode: vertical-lr;
margin: .5rem -1.5rem .5rem .1rem !important;
bottom: 0;
right: 0;
position: absolute;
}
sub.project-year {
margin-left: -1rem;
font-size: 1.25rem;
font-weight: 500;
}
blockquote {
padding: 60px 0 0;
position: relative;
font-family: var(--wp--preset--font-family--fira-code);
font-size: var(--wp--preset--font-size--x-large);
border: none !important;
}
blockquote.wp-block-quote {
position: relative;
font-family: var(--wp--preset--font-family--fira-code);
font-size: var(--wp--preset--font-size--x-large);
border: none !important;
}
blockquote::before {
position: absolute;
z-index: 1;
font-family: Georgia, "Times New Roman", serif;
top: 0;
content:"“";
font-size: 24rem;
line-height: 1;
left: 1rem;
top: 1rem;
color: var(--yellow);
}
.info blockquote::before {
color: var(--white)
}
blockquote p {
position: relative;
z-index: 2;
}
/* ==========================================================================
2. HEADER & NAVIGATION (SPRACHWECHSLER)
========================================================================== */
.wpml-language-switcher-block ul.horizontal-list {
display: inline-flex !important;
align-items: center !important;
position: fixed;
right: var(--wp--preset--spacing--50);
z-index: 10;
width: max-content !important;
pointer-events: none;
}
.wpml-language-switcher-block ul.horizontal-list li,
.wpml-language-switcher-block ul.horizontal-list li div {
pointer-events: auto;
margin: 0 !important;
padding: 0 !important;
display: inline-block !important;
}
.wpml-language-switcher-block [data-wpml="language-item"] a.wp-block-navigation-item__content {
width: 48px;
height: 48px;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 50%;
font-family: inherit;
text-decoration: none;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
background-color: var(--yellow);
color: var(--black);
}
.wpml-language-switcher-block [data-wpml="language-item"] a.wp-block-navigation-item__content:hover {
transform: scale(1.05);
}
.wpml-language-switcher-block [data-wpml="current-language-item"] .wp-block-navigation-item__label,
.wpml-language-switcher-block [data-wpml="current-language-item"] div {
width: 48px;
height: 48px;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 50%;
font-family: inherit;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
background-color: var(--black) !important;
color: var(--yellow) !important;
pointer-events: none;
}
.wpml-language-switcher-block ::before,
.wpml-language-switcher-block ::after {
content: "" !important;
display: none !important;
}
.wpml-language-switcher-block ul.horizontal-list.hasSpacing.isHorizontal {
gap: 1rem !important;
}
/* ==========================================================================
3. TOOLBAR (FILTER & VIEW-TOGGLE)
========================================================================== */
.filter-row-container {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 2rem;
}
#view-toggle.view-toggle {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--yellow);
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0;
color: transparent;
transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
#view-toggle.view-toggle::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background-color: var(--black);
-webkit-mask: var(--icon-titel-list) no-repeat center / contain;
mask: var(--icon-titel-list) no-repeat center / contain;
}
#view-toggle.view-toggle.is-text-active::before {
-webkit-mask-image: var(--icon-gallery-list);
mask-image: var(--icon-gallery-list);
}
#filter {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: .75rem;
padding: 0 .75rem;
}
.wp-container-3 {
top: calc(var(--wp--preset--spacing--30) + var(--wp-admin--admin-bar--position-offset, 0px));
}
/* ==========================================================================
4. FILTER-KAPSELN (PILLS) & OPTISCHE INLINE-ICONS
========================================================================== */
.taxonomy-workgroup {
display: flex;
gap: 0.75rem;
}
span.wp-block-post-terms__separator {
display: none;
}
#filter .filter-button,
.taxonomy-workgroup.wp-block-post-terms a {
display: inline-flex;
align-items: center;
justify-content: center;
height: 2rem !important;
padding: 0 1rem !important;
border-radius: 50px;
background-color: var(--yellow);
color: var(--black);
text-decoration: none;
font-family: var(--wp--preset--font-family--fira-code);
font-size: var(--wp--preset--font-size--small);
font-weight: 400;
border: none;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease;
box-sizing: border-box !important;
}
#filter .filter-button:hover,
.taxonomy-workgroup.wp-block-post-terms a:hover {
transform: scale(1.03);
}
#filter .filter-button sup {
font-size: 0.85rem;
font-weight: 500;
line-height: 1;
vertical-align: baseline;
transform: translateY(-0.35rem);
margin-left: 0.15rem;
display: inline-block;
}
#filter .filter-button::before {
content: "";
display: inline-block;
width: 0;
height: 16px;
background-color: var(--black);
transition: width 0.2s ease, margin-right 0.2s ease, opacity 0.2s ease;
opacity: 0;
flex-shrink: 0;
}
#filter .filter-button.is-active::before {
width: 16px;
margin-right: 8px;
opacity: 1;
-webkit-mask: var(--icon-checked) no-repeat center / contain;
mask: var(--icon-checked) no-repeat center / contain;
}
#filter .filter-button.btn-refresh::before {
width: 16px;
margin-right: 8px;
opacity: 1;
-webkit-mask: var(--icon-refresh) no-repeat center / contain;
mask: var(--icon-refresh) no-repeat center / contain;
}
#filter .filter-button.is-active {
background-color: var(--black);
color: var(--yellow);
}
#filter .filter-button.is-active::before {
background-color: var(--yellow);
}
/* ==========================================================================
5. PROJEKT-PRODUKTIONEN & VISUELLE TEXTANSICHT (TEXT VIEW)
========================================================================== */
#projects-view .wp-block-post-title {
display: none;
}
#projects-view.is-text-view {
max-width: 60vw;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.is-text-view .wp-block-post-template.is-layout-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 1.5rem !important;
}
.is-text-view .wp-block-post {
display: inline-flex !important;
margin: 0 !important;
width: auto !important;
}
.is-text-view .wp-block-post-title {
display: inline !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.is-text-view .wp-block-post-featured-image {
display: none !important;
}
/* --- GELBES HOVER-OVERLAY FÜR THUMBNAILS (NUR IM KACHELMODUS) --- */
#projects-view:not(.is-text-view) .wp-block-post-featured-image a {
position: relative;
display: block;
overflow: hidden;
}
#projects-view:not(.is-text-view) .wp-block-post-featured-image a::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(var(--yellow-rgb), 0.1);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 1;
}
#projects-view:not(.is-text-view) .wp-block-post-featured-image a:hover::after {
opacity: 1;
}
/* ==========================================================================
6. MAIN LINKS & VISUELLE UNDERLINES (LINK-TEPPICHE)
========================================================================== */
a:hover {
text-decoration: none;
}
/* --------------------------------------------------------------------------
TEIL A: NAVIGATION & FOOTER (Bleiben bei ::before / ::after für absolute Stabilität)
-------------------------------------------------------------------------- */
/* GEMEINSAMER GELBER HINTERGRUND-MARKER (NUR NAV/FOOTER) */
a[aria-current="page"]::before,
.current-menu-item > a::before,
.current_page_parent > a::before,
footer a.wp-block-navigation-item__content::before {
content: "";
position: absolute;
left: 6px;
right: -4px;
bottom: -.005rem;
height: .55rem;
background-color: var(--yellow);
z-index: -1;
}
/* SCHWARZE LINIE AKTIVER ZUSTAND (NUR NAV/FOOTER) */
a[aria-current="page"]::after,
.current-menu-item > a::after,
.current_page_parent > a::after {
content: "";
position: absolute;
left: 6px;
right: -4px;
bottom: 0;
height: .1rem;
background-color: var(--black);
transform: scaleX(1);
}
/* --------------------------------------------------------------------------
TEIL B: MAIN LINKS (Multi-Line Lösung per animiertem Background-Gradient)
-------------------------------------------------------------------------- */
main p a, main p span a,
.is-text-view ul li.hentry .wp-block-post-title a, main ul.wp-block-list li a, .field-text p a, .field-text ul li a {
text-decoration: none !important;
color: var(--black);
display: inline;
background-color: transparent;
background-image:
linear-gradient(var(--black), var(--black)),
linear-gradient(var(--yellow), var(--yellow));
background-position:
6px calc(100% - 3px),
6px calc(100% - 3px);
background-repeat: no-repeat, no-repeat;
background-size:
0% .1rem,
calc(100% - 6px) .55rem;
transition: background-size 0.3s ease;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
main p a:hover, main p span a:hover,
.is-text-view ul li.hentry .wp-block-post-title a:hover, main ul.wp-block-list li a:hover,
.field-text p a:hover, .field-text ul li a:hover {
background-size:
calc(100% - 3px) .1rem,
calc(100% - 3px) .55rem;
}
main div.info a {
text-decoration: none !important;
color: var(--black);
display: inline;
background-image:
linear-gradient(var(--black), var(--black)),
linear-gradient(var(--yellow), var(--yellow));
background-position: 3px 100%, 3px 100%;
background-repeat: no-repeat, no-repeat;
background-size: calc(100% - 3px) .1rem, calc(100% - 3px) .55rem;
transition: background-size 0.3s ease;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
main div.info a:hover {
background-size: 0% .1rem, calc(100% - 3px) .55rem;
}
/* --------------------------------------------------------------------------
TEIL C: BESONDERHEITEN FÜR TITEL
-------------------------------------------------------------------------- */
.wp-block-post-title a {
display: inline;
white-space: normal;
}
.wp-block-post-title a sub.project-year {
display: inline-block;
white-space: nowrap;
vertical-align: baseline;
position: relative;
top: 0.35rem;
}
/* ==========================================================================
EXTERNE LINKS MIT ICON MARKIEREN (UNIVERSAL: INKL. ACF-BLÖCKE)
========================================================================== */
main a:not([href*="ricardamieth.de"]):not([href^="/"]):not([href^="#"]):not(.wp-block-button__link),
.acf-block a:not([href*="ricardamieth.de"]):not([href^="/"]):not([href^="#"]):not(.wp-block-button__link),
[class*="wp-block-acf-"] a:not([href*="ricardamieth.de"]):not([href^="/"]):not([href^="#"]):not(.wp-block-button__link) {
display: inline !important;
padding-right: 1.5rem !important;
background-image:
var(--icon-external-link),
linear-gradient(var(--black), var(--black)),
linear-gradient(var(--yellow), var(--yellow)) !important;
background-position:
right center,
3px 100%,
3px 100% !important;
background-size:
1.25rem 1.25rem,
0% .1rem,
calc(100% - 1.5rem - 3px) .55rem !important;
background-repeat: no-repeat, no-repeat, no-repeat !important;
transition: background-size 0.3s ease !important;
}
main a:not([href*="ricardamieth.de"]):not([href^="/"]):not([href^="#"]):not(.wp-block-button__link):hover,
.acf-block a:not([href*="ricardamieth.de"]):not([href^="/"]):not([href^="#"]):not(.wp-block-button__link):hover,
[class*="wp-block-acf-"] a:not([href*="ricardamieth.de"]):not([href^="/"]):not([href^="#"]):not(.wp-block-button__link):hover {
background-size:
1.25rem 1.25rem,
calc(100% - 1.5rem - 3px) .1rem, /* Schwarze Linie ist ausgefahren */
calc(100% - 1.5rem - 3px) .55rem !important;
}
/* ==========================================================================
7. SINGLE-PROJEKTE: ACF METADATEN-LISTE
========================================================================== */
aside.features {
display: flex;
flex-direction: column;
align-items: flex-start;
}
aside.features > p[class^="field-"] {
display: inline-flex;
align-items: center;
margin: 0 !important;
font-family: var(--wp--preset--font-family--fira-code), monospace;
font-size: var(--wp--preset--font-size--small), 0.9rem;
padding: .5rem 0 .5rem 1.25rem;
border-left: 2px solid var(--yellow);
}
aside.features > p[class^="field-"]::before,
aside.features > .wp-block-acf-field-blocks-acf-button::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 12px;
background-color: var(--black);
flex-shrink: 0;
}
/* MASKEN FÜR ACF-FIELDS */
aside.features > .field-year::before { -webkit-mask: var(--icon-year) no-repeat center / contain; mask: var(--icon-year) no-repeat center / contain; }
aside.features > .field-years::before { -webkit-mask: var(--icon-year) no-repeat center / contain; mask: var(--icon-year) no-repeat center / contain; }
aside.features > .field-location::before { -webkit-mask: var(--icon-location) no-repeat center / contain; mask: var(--icon-location) no-repeat center / contain; }
aside.features > .field-status::before { -webkit-mask: var(--icon-goal) no-repeat center / contain; mask: var(--icon-goal) no-repeat center / contain; }
aside.features > .field-award::before { -webkit-mask: var(--icon-price) no-repeat center / contain; mask: var(--icon-price) no-repeat center / contain; }
aside.features > .field-external_link::before { -webkit-mask: var(--icon-link) no-repeat center / contain; mask: var(--icon-link) no-repeat center / contain; }
aside.features > .field-collaboration::before { -webkit-mask: var(--icon-collaboration) no-repeat center / contain; mask: var(--icon-collaboration) no-repeat center / contain; }
aside.features > .field-copyright::before { -webkit-mask: var(--icon-photographer) no-repeat center / contain; mask: var(--icon-photographer) no-repeat center / contain; }
/* ACF PDF-BUTTON */
aside.features > .wp-block-acf-field-blocks-acf-button {
display: inline-flex;
align-items: center;
margin: .5rem 0 !important;
}
aside.features > .wp-block-acf-field-blocks-acf-button::before {
display: none !important;
}
.wp-block-group.is-layout-flow .wp-block-acf-field-blocks-acf-button__link {
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: .35rem 1.25rem .3rem;
border-radius: 50px;
background-color: var(--yellow);
color: var(--black);
font-weight: 400;
text-decoration: none;
border: none;
transition: transform 0.2s ease, background-color 0.2s ease;
cursor: pointer;
}
.wp-block-group.is-layout-flow .wp-block-acf-field-blocks-acf-button__link:hover {
transform: scale(1.03);
}
.wp-block-group.is-layout-flow .wp-block-acf-field-blocks-acf-button__link::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-right: 12px;
margin-left: 1px;
background-color: var(--black);
flex-shrink: 0;
-webkit-mask: var(--icon-pdf) no-repeat center / contain;
mask: var(--icon-pdf) no-repeat center / contain;
}
/* ==========================================================================
8. PROJECT NAVIGATION (PREV / NEXT FIXED GRID)
========================================================================== */
.project-nav {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 1rem;
padding-left: var(--wp--preset--spacing--40);
}
.project-nav a {
width: 48px !important;
height: 48px !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 50% !important;
background-color: var(--yellow);
color: transparent !important;
font-size: 0 !important;
position: relative;
cursor: pointer;
transition: transform 0.2s ease;
}
.project-nav a:hover {
transform: scale(1.05);
}
#prev-project {
justify-self: start;
}
#next-project {
grid-column: 2 !important;
justify-self: end;
}
#prev-project[style*="display: none"],
#next-project[style*="display: none"],
#prev-project.is-hidden,
#next-project.is-hidden,
#prev-project:not([href]),
#next-project:not([href]) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
.project-nav a::before {
content: "";
width: 48px;
height: 48px;
background-color: var(--black);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
}
#prev-project::before { -webkit-mask-image: var(--icon-previous); mask-image: var(--icon-previous); }
#next-project::before { -webkit-mask-image: var(--icon-next); mask-image: var(--icon-next); }
/* ==========================================================================
9. HOME-ANNOUNCEMENT & SPECIAL BLOCKS
========================================================================== */
.wp-block-cover__inner-container .wp-block-buttons.is-content-justification-center {
display: flex;
justify-content: center;
align-items: center;
margin: 0 !important;
}
.home-announcement .wp-block-button__link {
display: inline-flex !important;
align-items: center;
justify-content: center;
text-align: center;
width: 15rem !important;
height: 15rem !important;
border-radius: 50% !important;
padding: 1.5rem !important;
box-sizing: border-box !important;
background-color: var(--yellow) !important;
color: var(--black) !important;
font-family: var(--wp--preset--font-family--fira-code), monospace !important;
line-height: 1.2 !important;
font-weight: 500 !important;
text-decoration: none !important;
border: none !important;
font-size: 2rem;
letter-spacing: -.1rem;
transition: transform 0.2s ease, background-color 0.2s ease;
cursor: pointer;
}
.home-announcement .wp-block-button__link:hover {
transform: scale(1.05);
}
.home-announcement .wp-block-button__link::before,
.home-announcement .wp-block-button__link::after {
display: none !important;
content: none !important;
}
.cover .cover-text {
background-color: var(--yellow);
border-radius: 2rem;
padding: var(--wp--preset--spacing--50);
}
.info {
background-color: var(--yellow);
padding: var(--wp--preset--spacing--50);
}
/* ==========================================================================
10. FOOTER & BARRIEREFREIHEIT
========================================================================== */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
footer nav {
text-transform: uppercase;
font-weight: 500;
letter-spacing: .05rem;
}
.footer-fix {
gap: 1rem;
position: fixed;
z-index: 100;
bottom: var(--wp--preset--spacing--40);
right: var(--wp--preset--spacing--50);
}
.footer-socials {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 1rem;
width: 100%;
}
.btn-yellow-disk .wp-block-button__link {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 50% !important;
background-color: var(--yellow) !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border: none !important;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.btn-yellow-disk .wp-block-button__link:hover {
transform: scale(1.05);
background-color: var(--yellow) !important;
}
.btn-yellow-disk .wp-block-button__link::before {
content: "";
width: 24px;
height: 24px;
background-color: var(--black);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
.btn-newsletter .wp-block-button__link::before { -webkit-mask-image: var(--icon-newsletter); mask-image: var(--icon-newsletter); }
.btn-insta .wp-block-button__link::before { -webkit-mask-image: var(--icon-insta); mask-image: var(--icon-insta); }
footer .wp-block-navigation-item:not([aria-current="page"]):not(.current-menu-item) a.wp-block-navigation-item__content::before {
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
footer .wp-block-navigation-item:not([aria-current="page"]):not(.current-menu-item) a:hover.wp-block-navigation-item__content::before {
transform: scaleX(1);
}
/* ==========================================================================
11. MEDIA QUERIES (RESPONSIVE STYLES)
========================================================================== */
@media (max-width: 600px) {
blockquote, blockquote.wp-block-quote, h2 {
font-size: 1.5rem;
}
#projects-view.is-text-view {
max-width: 95vw;
}
}
@media (max-width: 960px) {
.wp-container-3.is-position-sticky {
position: relative;
z-index: inherit;
}
}
@media (min-width: 960px) {
.header-vertical {
position: fixed;
left: 0;
top: 2rem;
height: auto;
width: 80px;
display: flex;
flex-direction: row;
z-index: 100;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: right;
}
.header-vertical a::before {
content: "";
position: absolute;
left: .15rem !important;
right: auto !important;
bottom: -4px !important;
top: 6px !important;
width: .55rem !important;
background-color: var(--yellow);
z-index: -1;
height: 0 !important;
transform-origin: top;
transition: height 0.3s ease;
}
.header-vertical a::after {
display: none !important;
}
.header-vertical a:hover::before {
height: calc(100% - 2px) !important;
}
.header-vertical a[aria-current="page"]::before {
height: calc(100% - 2px) !important;
display: block !important;
}
.header-vertical a[aria-current="page"]::after {
display: block !important;
left: 1px !important;
right: auto !important;
bottom: -4px !important;
top: 6px !important;
width: .125rem !important;
height: calc(100% - 2px) !important;
transform: none !important;
}
}
/* =====================================================
* LISTEN
* ===================================================== */
/* 1. Den alten Standard-Punkt komplett löschen */
.entry-content ul, .field-news ul, .field-text ul {
list-style: none;
padding-left: 0;
}
/* 2. Platz für den langen Strich schaffen */
.entry-content li, .field-news li, .field-text li {
position: relative;
padding-left: 1.8em;
margin-bottom: 0.6em;
line-height: 1.5;
}
/* 3. Den langen Strich perfekt einsetzen */
.entry-content li::before, .field-news li::before, .field-text li::before {
content: "—";
position: absolute;
left: 0;
top: 0;
color: currentColor;
opacity: 0.8;
}
/* =====================================================
* MASONRY GRID FÜR PROJEKTE (Nur in der Bild-Ansicht)
* ===================================================== */
#projects-view:not(.is-text-view) ul.wp-block-post-template {
display: block !important;
grid-template-columns: none !important;
column-count: 3;
column-gap: var(--wp--preset--spacing--40);
width: 100%;
margin: 0;
padding: 0;
}
#projects-view:not(.is-text-view) li.wp-block-post {
break-inside: avoid;
display: inline-block;
width: 100%;
margin-bottom: var(--wp--preset--spacing--40);
}
#projects-view:not(.is-text-view) .wp-block-post-featured-image {
margin: 0;
width: 100%;
}
#projects-view:not(.is-text-view) .wp-block-post-featured-image img {
width: 100%;
height: auto !important;
object-fit: contain !important;
display: block;
}
/* =====================================================
* RESPONSIVE ANPASSUNG (Mobil & Tablet)
* ===================================================== */
/* Tablet: 2 Spalten */
@media (max-width: 991px) {
#projects-view:not(.is-text-view) ul.wp-block-post-template {
column-count: 2;
}
}
/* Smartphone: 1 Spalte */
@media (max-width: 600px) {
#projects-view:not(.is-text-view) ul.wp-block-post-template {
column-count: 1;
}
}
/* ==========================================================================
KEILA NEWSLETTER FORM STYLES
========================================================================== */
/* Hauptcontainer des Formulars */
.keila-newsletter-form {
display: flex;
flex-direction: column;
}
.keila-form-intro {
padding-bottom: 1.25rem;
}
.keila-newsletter-form .keila-input-group {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding-bottom: 1.25rem;
}
.keila-newsletter-form .keila-input-group label {
font-weight: 500;
}
.keila-newsletter-form .keila-input-group input {
background-color: #ffffff !important;
border: 1px solid #6b7280 !important;
color: var(--black, #111111) !important;
padding: 0.65rem 1rem !important;
font-family: inherit;
font-size: 1rem;
border-radius: 4px !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
width: 100%;
box-sizing: border-box;
}
.keila-newsletter-form .keila-input-group input:focus {
border-color: var(--black, #111111) !important;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05) !important;
outline: none !important;
}
/* Captcha-Container */
.keila-newsletter-form .keila-captcha-group {
margin: 0.5rem 0;
}
.keila-newsletter-form .keila-submit-group {
display: flex;
justify-content: flex-start;
}
.keila-newsletter-form .keila-submit-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 3rem !important;
padding: 0 2.5rem !important;
border-radius: 50px !important;
background-color: var(--yellow, #ffee58) !important;
color: var(--black, #111111) !important;
font-family: var(--wp--preset--font-family--fira-code), monospace !important;
font-size: 1rem !important;
font-weight: 500 !important;
border: none !important;
cursor: pointer;
transition: transform 0.2s ease, background-color 0.2s ease;
box-shadow: none !important;
}
.keila-newsletter-form .keila-submit-button:hover {
transform: scale(1.03);
}
.keila-newsletter-form .keila-form-required-info {
opacity: 0.6;
margin-top: 0.75rem;
}
/* =====================================================
* TOUCHSCREENS
* ===================================================== */
.wp-block-navigation__responsive-container a:focus:not(:focus-visible) {
outline: none;
background-image: none;
background-color: transparent;
}
.wp-block-navigation__responsive-container a:focus-visible {
outline: 2px solid var(--black);
}