/* small fixes on top of the original theme CSS */
/* WPML legacy-dropdown behaviour (the plugin's own CSS, which the theme assumes) */
.wpml-ls-legacy-dropdown{position:relative}
.wpml-ls-legacy-dropdown ul{list-style:none;margin:0;padding:0}
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu{display:none}
.wpml-ls-legacy-dropdown li:hover>.wpml-ls-sub-menu,
.wpml-ls-legacy-dropdown li:focus-within>.wpml-ls-sub-menu{display:flex}
.wpml-ls-legacy-dropdown a{text-decoration:none;color:inherit;display:block}
.cc-link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
/* the original theme turns on a 27px hero strip at 768px, which overflows
between roughly 768px and 1500px — clamp it so it always fits */
@media (min-width:768px){
.front-section__info-category--desktop p{font-size:clamp(13px,1.9vw,27px)}
}
/* styleB.css hides #footer; style.css re-shows it via display:flex (load order
main -> styleB -> style). Keep that, and keep styleB's dark palette. */
#footer{display:flex;padding:48px 0 24px}
#footer,.footer-copyright a,.cc-link-btn{color:#fff}
.cc-link-btn{background:none;border:0;padding:0;font-family:'SpotMonoRegular',sans-serif;font-size:15px;text-decoration:none;cursor:pointer}
.footer-copyright a,.cc-link-btn{margin-right:1.5rem}
/* Homepage project rows. WordPress renders these as a 3-column grid via CSS that
is generated at request time and is absent from a static export, so the fixed
613px images end up side by side and overflow the viewport. Values below are
measured from cne.eu at the same viewport width. */
.hp-projekte-wrapper,.hp__project{padding:0 16px}
.hp__project{margin:0 0 32px}
.hp__project > .wp-block-group__inner-container{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:768px){
.hp__project > .wp-block-group__inner-container{grid-template-columns:repeat(3,1fr)}
}
.hp__project img,.hp__project figure{max-width:100%;height:auto}
.hp__project figure{margin:0}
/* The theme hardcodes the navbar to five columns (grid-template-columns:
repeat(5, 20%)) and only drops the right border on the fifth item, because
the German menu happens to have five entries. A shorter menu — the
Vietnamese one has four — leaves an empty bordered cell on the right.
nav.html sets --nav-cols to the actual item count; 5 stays the fallback so
DE and EN are untouched. */
@media (min-width:768px){
.navbar-expand-md .navbar-nav{
grid-template-columns:repeat(var(--nav-cols,5),calc(100% / var(--nav-cols,5)));
}
.navbar-nav > *:last-child .nav-link{border-right:0}
}
/* Contact form. The theme styles CF7's classes, so the rebuilt form reuses
them; these rules only cover what CF7's own stylesheet used to provide. */
.cne-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.wpcf7-form-control-wrap.cne-invalid input,
.wpcf7-form-control-wrap.cne-invalid textarea{outline:2px solid #c00;outline-offset:2px}
.cne-form-response{font-family:'SpotMonoLight',sans-serif;font-size:20px;margin-top:16px}
.cne-form-response--error{color:#c00}
.cne-form-response--success{color:#0a7d28}
.wpcf7-submit[disabled]{opacity:.5;cursor:progress}
.cf-turnstile{margin:16px 0}
/* ---------------------------------------------------------------------------
Jobs page (/vi/jobs/ only — everything is scoped under .jobs-vi so the
German /jobs-hamburg/ page keeps the theme's original look).
THREE type sizes, and no more:
55px .service-title page title
34px .job-content-title role headings (theme ships 55px)
25px everything else intro paragraphs, list items, AND the labels
Labels are separated from body text by typeface, uppercase and letter
spacing — not by size. The theme gives them 27px and .service-desc 35px,
both close enough to the 25px body to read as extra sizes without earning
anything. Don't reintroduce them.
Spacing scale: 8 / 16 / 32 / 64. Nothing else.
.job-content is display:none in styleB.css (the accordion), so the
always-visible intro block needs its own wrapper, .jobs-intro.
--------------------------------------------------------------------------- */
.jobs-vi .jobs-intro {
margin: 32px 0 0;
padding-bottom: 48px;
border-bottom: 3px solid #000;
}
.jobs-vi .jobs-intro > .wp-block-group__inner-container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 32px;
gap: 32px;
}
@media (min-width: 1024px) {
.jobs-vi .jobs-intro > .wp-block-group__inner-container {
grid-template-columns: 1fr 1fr;
grid-gap: 64px;
gap: 64px;
}
}
/* One size everywhere below the role headings. */
.jobs-vi .service-desc,
.jobs-vi .job-content__box-title,
.jobs-vi .job-content-subtitle {
font-size: 25px;
}
@media (max-width: 1023px) {
.jobs-vi .service-desc { font-size: 20px; }
.jobs-vi .job-content__box-title,
.jobs-vi .job-content-subtitle { font-size: 15px; }
}
/* Lists: the theme's 16px row gap is set for short label-style items. These
items wrap to two lines, so the gap between items stopped reading as
different from the gap between lines. 8px, with the label 16px above. */
.jobs-vi .job-content__box ul {
gap: 8px;
}
.jobs-vi .job-content__box-title {
margin: 32px 0 16px;
}
.jobs-vi .job-content__box > .wp-block-group__inner-container > *:first-child {
margin-top: 0;
}
/* ...and the panel carries the gap instead, so the first label doesn't hug
the role heading. Padding, not margin: the panel is display:none when
collapsed, so this cannot affect the spacing of the collapsed list. */
.jobs-vi .job-content {
padding-top: 32px;
}
/* Role headings: 55px is a page-title size, so five of them in a column read
as five pages rather than a list of five jobs. */
@media (min-width: 1024px) {
.jobs-vi .job-content-title {
font-size: 34px;
}
}
/* The headings are accordion triggers — cne.js slideToggles the next
.job-content on click — but nothing said so: no cursor, no marker, no rule.
Read as five dead headings with one of them mysteriously expanded.
Each role is now a row: a hairline above it, the title left, a +/- right.
flex + baseline rather than absolute positioning, so the marker stays on
the first line when a long title wraps at mobile. The class is toggled by
assets/js/jobs.js; the content itself is still the theme's slideToggle. */
.jobs-vi .job-content-title {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 32px;
cursor: pointer;
border-top: 1px solid #000;
margin: 0;
padding: 32px 0 0;
}
.jobs-vi .job-content-title::after {
content: "+";
flex: 0 0 auto;
font-weight: 400;
padding: 0 8px;
transition: background-color .2s;
}
.jobs-vi .job-content-title.is-open::after {
content: "\2013";
}
/* Lime only on hover. Five permanent lime markers would compete with the two
in the intro block; on hover it is the accent doing one job — saying this
line is a button. */
.jobs-vi .job-content-title:hover::after {
background: #D8FF00;
}
/* Labels are labels: a black hairline under the words, nothing more. They
were lime blocks, which put the loudest thing on the page on the two
quietest pieces of content.
NOT on "Open positions" — the first role row's own border-top runs a few
pixels below it, and the two together read as a doubled line. That row
hairline already does the underlining there. */
.jobs-vi .jobs-intro .job-content__box-title {
display: inline-block;
padding-bottom: 8px;
border-bottom: 1px solid #000;
}
/* "Open positions" is the section people came for, so it is promoted out of
the label rank: 34px in a black block with lime type. That pairing is the
theme's own — style.css uses lime on black for nav hover and the footer —
and solid black reads as structure rather than decoration, marking a
section break the way the 3px rules do. Lime on white was the alternative
and is too weak to carry a header; it has almost no contrast.
Mono uppercase keeps it distinct from the 34px Helvetica role titles that
follow, so the two sit at the same size without competing. */
.jobs-vi .jobs-label {
font-size: 34px;
background: #000;
color: #D8FF00;
padding: 6px 14px;
margin-left: -14px;
}
@media (max-width: 1023px) {
.jobs-vi .jobs-label {
font-size: 20px;
padding: 4px 10px;
margin-left: -10px;
}
}
/* How to apply is stated once per role, at the foot of the open panel, where
someone has just finished reading the job and is deciding — not next to the
"Open positions" label, where it addressed a reader who had not yet chosen
one (Adam, 13 Aug 2026). It is the last item in the role's grid, so the
32px panel gap places it; plain text, since the mail address is the link
and that is emphasis enough.
`.jobs-apply` (the label-row span) is kept as a rule because the class may
come back if the line is ever restored up there. */
.jobs-vi .jobs-apply,
.jobs-vi .jobs-apply-role {
text-transform: none;
letter-spacing: 0;
}
.jobs-vi .jobs-apply-role {
margin: 0;
font-size: 25px;
}
@media (max-width: 1023px) {
.jobs-vi .jobs-apply-role { font-size: 20px; }
}
/* "Open positions" heads the list rather than captioning the rule above it,
so the space is asymmetric: a gap above that separates it from the intro
block, and almost none below, binding it to the roles. 32px, down from 96
then 64: the 3px rule above already separates the intro block, and every
extra pixel on top of it was dead band, not breathing room. */
.jobs-vi .job-content-subtitle {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 16px 32px;
margin: 32px 0 8px;
}
/* No page-level closing "Submit your CV" paragraph: it now lives inside each
role instead. No rule closes the list either — the footer's black block
already ends the page, and a hairline immediately above it just reads as a
second, weaker edge. Space is enough. */
.jobs-vi {
padding-bottom: 64px;
}
/* Each role carries five boxes in a fixed order — description, requirements,
benefits, salary, working conditions — stacked in ONE column, so they read
in that order top to bottom. (The theme's flex row sizes boxes to content
and wraps unpredictably with five of them; a two-column grid fixed the
shape but split the reading order into two tracks.)
One column at full container width would run ~110 characters a line, so the
panel is capped at a readable measure. The cap sits on the panel, not on
each box, so every label starts on the same left edge. */
.jobs-vi .job-content > .wp-block-group__inner-container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 32px;
gap: 32px;
align-items: start;
max-width: 860px;
}
/* ---------------------------------------------------------------------------
WordPress core block-library CSS for wp:columns — missing from the static export.
`.wp-block-columns` / `.wp-block-column` get their flex layout from
wp-includes/css/dist/block-library/style.min.css, which WordPress core
enqueues on every front-end request. The cne theme never contained it
(functions.php enqueues only main.css, styleB.css, style.css), so the Hugo
replica has no rule making the columns sit side by side.
Symptom on /kontakt/ and /en/contact/: the map column stacks full width and
the form drops underneath at 50% width, right-aligned — because style.css
(>=768px) already sets `.contact-form { display:block; width:50%;
margin-left:auto }`. The form markup was never the problem; the columns
wrapper was.
Also affects the other published pages using wp:columns:
/leistungen/, /en/services/, /blog/.
Values copied verbatim from WordPress core 6.x. Nothing else is added —
on the live site `.contact-form { width:50%; margin-left:auto }` is inert
inside the flex row (flex-basis:0 wins over width; flex-grow leaves no free
space for the auto margin), so it needs no override here either.
--------------------------------------------------------------------------- */
.wp-block-columns {
display: flex;
box-sizing: border-box;
align-items: normal;
flex-wrap: wrap;
gap: 2em;
margin-bottom: 1.75em;
}
@media (min-width: 782px) {
.wp-block-columns {
flex-wrap: nowrap;
}
}
.wp-block-columns.are-vertically-aligned-top { align-items: flex-start; }
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end; }
.wp-block-column {
flex-grow: 1;
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
}
@media (max-width: 781px) {
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
flex-basis: 100% !important;
}
}
@media (min-width: 782px) {
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
flex-basis: 0;
flex-grow: 1;
}
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] {
flex-grow: 0;
}
}
.wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap; }
.wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
flex-basis: 0;
flex-grow: 1;
}
/* ------------------------------------------------------------------
CTA buttons — client feedback, 14 Aug 2026
------------------------------------------------------------------
"Our services" and "Open positions" on /vi/ were plain anchors inside
.hp__description. style.css sets those to `color:#000` with the only
affordance a 3px underline that animates in on :hover (and only above
1024px) — so at rest they are 55px black text sitting in a column of
55px black text, indistinguishable from the sentence above. The client
marked both as invisible.
Treatment is the theme's own pairing: solid black block, lime #D8FF00
mono uppercase — the same pairing style.css uses for nav hover and the
footer, and the same one already carrying "Open positions" on
/vi/jobs/. So the button on the home page and the section header it
lands on look like the same object.
Two deliberate differences from .jobs-label:
- the box edge aligns with the text column, not the glyphs. The jobs
label is outdented 14px so its letters keep the optical edge, which
is right for a highlight; a button should read as an object sitting
in the layout, and aligning the box is what makes that read.
- the arrow. It is what separates "goes somewhere" from "labels the
thing below". Drawn as a mask so it inherits currentColor and comes
along for free on the hover invert.
Sized at 27px — the .hp__header-title label size — not at the 55px of
the body copy around it. A 55px button is a wall; at label size it is
clearly a different kind of element, and the black block is what does
the work of standing out. */
.hp-cta {
margin: 32px 0 0;
}
a.cne-btn,
.lang-vi .wp-block-button__link {
display: inline-flex;
align-items: center;
font-family: 'SpotMonoMedium', sans-serif;
font-size: 27px;
line-height: 1;
letter-spacing: 0.02em;
text-transform: uppercase;
text-decoration: none;
color: #D8FF00;
background: #000;
border: 0;
border-radius: 0;
padding: 16px 24px;
transition: background 0.2s ease, color 0.2s ease;
}
a.cne-btn::after,
.lang-vi .wp-block-button__link::after {
content: "";
display: inline-block;
width: 0.8em;
height: 0.8em;
margin-left: 0.7em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4 5.6-5.6H4z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4 5.6-5.6H4z'/%3E%3C/svg%3E") no-repeat center / contain;
transition: transform 0.2s ease;
}
a.cne-btn:hover,
a.cne-btn:focus-visible,
.lang-vi .wp-block-button__link:hover,
.lang-vi .wp-block-button__link:focus-visible {
background: #D8FF00;
color: #000;
}
a.cne-btn:hover::after,
.lang-vi .wp-block-button__link:hover::after {
transform: translateX(4px);
}
/* The theme's animated hover underline is for inline links in body copy;
on a filled block it draws a stray lime bar under the words. */
a.cne-btn::before,
.hp__description a.cne-btn:after {
display: none;
}
@media (max-width: 1023px) {
a.cne-btn,
.lang-vi .wp-block-button__link {
font-size: 20px;
padding: 12px 18px;
}
.hp-cta {
margin-top: 24px;
}
}
/* ------------------------------------------------------------------
.cne-btn--back — the secondary variant
------------------------------------------------------------------
Sits at the foot of each /vi/services/* page. It is a way back up, not
the next thing to do, so it must not carry the same weight as the
filled buttons that sent the reader here — two solid black blocks in
the same colour would read as two equal choices. Outline instead:
same box, same type, black on white, filling to the primary treatment
on hover. Arrow flips to point back at the parent.
The rule above it is what stops it reading as the end of the last
paragraph. 1px, not the 3px the jobs page uses between sections —
this closes a page rather than dividing one. */
.page-back {
margin: 64px 0 0;
/* 64px below as well — without it the button sits flush against the top
of the black footer and reads as part of it. */
padding: 32px 12px 64px;
border-top: 1px solid #2B2E34;
}
a.cne-btn--back {
background: transparent;
color: #2B2E34;
box-shadow: inset 0 0 0 2px #2B2E34;
}
a.cne-btn--back:hover,
a.cne-btn--back:focus-visible {
background: #000;
color: #D8FF00;
box-shadow: inset 0 0 0 2px #000;
}
a.cne-btn--back::after {
margin-left: 0;
margin-right: 0.7em;
order: -1;
transform: scaleX(-1);
}
a.cne-btn--back:hover::after {
transform: scaleX(-1) translateX(4px);
}
@media (max-width: 1023px) {
.page-back {
margin-top: 48px;
padding-top: 24px;
padding-bottom: 48px;
}
}
/* ------------------------------------------------------------------
.about-photo — placeholder blocks on /vi/about/ (14 Aug 2026)
------------------------------------------------------------------
The client is supplying photographs of the office, the team and the
trips. These blocks mark where they go. They are deliberately obvious
— a dashed frame in the brand lime's absence, mono type, no images —
so nobody mistakes the page for finished.
DELETE THIS RULE, and the .about-photo divs in
content/vi/about/index.md, when the real photographs land. */
.about-photo {
margin: 48px 12px;
padding: 64px 24px;
border: 2px dashed #8B8E94;
text-align: center;
font-family: 'SpotMonoRegular', sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #8B8E94;
}
.about-photo p {
margin: 0;
font-size: 20px;
line-height: 1.6;
}
@media (max-width: 1023px) {
.about-photo {
margin: 32px 12px;
padding: 40px 16px;
}
.about-photo p { font-size: 16px; }
}
/* Pages whose last block is body copy end flush against the footer's black
block, which reads as the text running into it. .page-back supplies its own
64px; a page without one needs this. */
.page-tail {
height: 64px;
}
/* ------------------------------------------------------------------
Hero claims strip — linked on /vi/ (client, 14 Aug 2026)
------------------------------------------------------------------
The four claims now name the four service pages exactly, so each is a
link to its page. The anchor sits INSIDE the existing
— see claims.html for
why — so it must not introduce a colour of its own: the strip is white
over the hero image on mobile and #000 on the white band above 768px,
and the
already carries both. Hence `color: inherit`.
Hover has to work on both backgrounds, which rules out a single
colour: lime on the dark image, an underline on the white band. */
.front-section__info-category-item a {
color: inherit;
text-decoration: none;
}
.front-section__info-category .front-section__info-category-item a:hover,
.front-section__info-category .front-section__info-category-item a:focus-visible {
color: #D8FF00;
}
.front-section__info-category--desktop .front-section__info-category-item a:hover,
.front-section__info-category--desktop .front-section__info-category-item a:focus-visible {
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-thickness: 2px;
}
/* ------------------------------------------------------------------
Footer address + phone links (client, 14 Aug 2026)
------------------------------------------------------------------
The address block opens Google Maps, the number dials. Both must look
exactly like the text they replaced — the footer is a block of
addresses, not a list of links, and underlining five of them would
turn it into one. So: inherit the white, no decoration, and hover
carries the whole affordance in the theme's own footer pairing, lime
on black. */
#footer a.footer-map,
#footer a.footer-tel {
color: inherit;
text-decoration: none;
}
#footer a.footer-map:hover,
#footer a.footer-map:focus-visible,
#footer a.footer-tel:hover,
#footer a.footer-tel:focus-visible {
color: #D8FF00;
}
/* ------------------------------------------------------------------
.ct-mark — the marked email and phone on /vi/contact/
------------------------------------------------------------------
Client, 14 Aug 2026: "could you bold the phone number, address and
email or do something else to make the info stand out".
Bolding was not the fix. Everything in .contact-box-first is already
55px in the heavy weight — the site's largest type — so the reason
nothing stands out is that the intro line is set exactly as loud as
the details, and the eye has nowhere to land. More weight would only
make the wall heavier.
So: lime `#D8FF00` behind the two values, at the size they already
were. Same accent as the jobs label and the buttons, and the only
colour on an otherwise black-and-white page.
Outdented 14px like `.jobs-vi .jobs-label`, not aligned like
`.cne-btn` — this is a highlight over running text, so the LETTERS
should keep the optical left edge, not the box.
The address is left plain on purpose. Five marked lines would be a
lime panel rather than an accent, and it is already a link to Maps. */
.contact-box-first a.ct-mark {
background: #D8FF00;
color: #000;
/* 12px = the container's own side padding, so the block stops exactly
at the viewport edge and the glyphs still line up with the
paragraphs above. 14px put 2px of lime off-canvas. */
padding: 2px 12px;
margin-left: -12px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background 0.2s ease, color 0.2s ease;
}
/* style.css hangs an animated 3px black underline off every link in this
box. Under a filled block it reads as a stray rule, so it is dropped
here and the hover inverts instead — the same language as .cne-btn. */
.contact-box-first a.ct-mark:after,
.contact-box-first a.ct-mark:hover:after {
display: none;
}
.contact-box-first a.ct-mark:hover,
.contact-box-first a.ct-mark:focus-visible {
background: #000;
color: #D8FF00;
}
@media (max-width: 1023px) {
.contact-box-first a.ct-mark {
padding: 2px 12px;
margin-left: -12px;
}
}
/* ------------------------------------------------------------------
Apply now — /vi/jobs/ buttons and the /vi/apply/ form (14 Aug 2026)
------------------------------------------------------------------
Client: "with all job positions, please remove 'Submit your CV to
ppd@cne.eu', change into an 'Apply now' button leading to the form to
fill in like the contact form, which they can upload also their CVs".
The button is the primary `.cne-btn`, not the outlined `--back` variant:
at the foot of an open role panel it IS the next thing to do, which is
the distinction those two variants exist to make.
`.jobs-apply-role` above is kept, unused, for the same reason
`.jobs-apply` was kept when that line moved — the plain-text version is
one revert away if the client changes their mind. */
.jobs-vi .jobs-apply-cta {
/* Last item in the role panel's grid; the panel's own 32px gap places
it, exactly as it placed the text line this replaces. */
margin: 0;
}
/* ------------------------------------------------------------------
The form itself
------------------------------------------------------------------
Capped at 860px — the same cap as the role panels on /vi/jobs/, so the
page someone lands on from those panels holds its text to the same
measure. Without it the fields run the full 75% of a 1470px viewport
and a name field becomes a metre wide. */
.apply-form-wrap {
max-width: 860px;
padding: 0 12px;
margin-top: 32px;
}
/* styleB.css sizes `.wpcf7-form > p` at 27px SpotMonoLight, which is the
theme's form voice — inherited deliberately. Everything below only adds
the controls CF7 never had here: a select, two file inputs, and the
labels those two need because a placeholder cannot stand in for them. */
.cne-apply .wpcf7-form-control-wrap {
display: block;
}
.cne-apply .wpcf7-text,
.cne-apply .wpcf7-textarea,
.cne-apply .wpcf7-select {
width: 100%;
box-sizing: border-box;
}
/* A