/*
Theme Name: Bollwerk
Author: Christian Bolleininger
Author URI: https://bollwerk-it.de
Description: Bollwerk is a theme for trades, agencies and service businesses with a dark and a light colour scheme. Header, footer, colours and the front page hero are set in the Customizer, and header, footer and hero pick a readable text colour on their own. No external fonts or scripts are loaded. Services and projects come from the free companion plugin Bollwerk Content. No page builder required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v3.0 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: bollwerk
Tags: one-column, two-columns, left-sidebar, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, editor-style, wide-blocks, block-patterns, threaded-comments, translation-ready, blog, portfolio

Copyright (C) 2026 Christian Bolleininger, Bollwerk IT
Bollwerk is distributed under the terms of the GNU GPL v3 or later.
*/

/* ==========================================================================
   1. VARIABLES (overridden by the Customizer)
   ========================================================================== */
:root{
  --neon:#00FF41;
  --bg:#0a1428;
  --card:rgba(255,255,255,.04);
  --text:#c9d3e0;
  --heading:#ffffff;
  --header-bg:rgba(10,20,40,.55);
  --header-border:#00FF41;
  --header-border-w:1px;
  --header-radius:60px;
  --footer-bg:rgba(10,20,40,.75);
  --footer-border:#00FF41;
  --footer-border-w:1px;
  --footer-radius:32px;
  --logo-h:44px;
  --radius:24px;
  --maxw:1240px;

  /* Neutral tokens. These follow the colour scheme (dark or light) and are
     redefined inside the header, footer and hero whenever one of those areas
     is darker or lighter than the page around it. */
  --line:rgba(255,255,255,.1);
  --line-strong:rgba(255,255,255,.16);
  --hover:rgba(255,255,255,.07);
  --field:rgba(255,255,255,.05);
  --stripe:rgba(255,255,255,.025);
  --code-bg:rgba(0,0,0,.35);
  --shadow:rgba(0,0,0,.9);
  --neon-soft:rgba(0,255,65,.12);
  --neon-ring:rgba(0,255,65,.14);
  --btn-glow:0 0 28px -6px var(--neon);
  --ghost-bg:rgba(255,255,255,.06);

  /* Shape of buttons and controls (pill by default). */
  --btn-radius:999px;
  --btn-round:50%;
  --field-radius:14px;
  --menu-radius:16px;
  --menu-radius-lg:24px;
  --font:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}

html{scroll-behavior:smooth}

body{
  font-family:var(--font);
  background-color:var(--bg);
  color:var(--text);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

/* Fixed background image across the whole site */
body.has-bg-image::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:var(--bg-image);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
  z-index:-2;
}
body.has-bg-image::after{
  content:"";
  position:fixed;
  inset:0;
  background:var(--bg);
  opacity:var(--bg-overlay,.7);
  z-index:-1;
}

a{color:var(--neon);text-decoration:none;transition:.25s}
a:hover{color:var(--heading)}

h1,h2,h3,h4{color:var(--heading);font-weight:800;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.6rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:clamp(1.2rem,2vw,1.6rem)}
p+p{margin-top:1em}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding:clamp(60px,9vw,120px) 0}
.center{text-align:center}
.lead{font-size:1.15rem;max-width:680px;margin-inline:auto;color:var(--text)}
.accent{color:var(--neon)}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 38px;
  border-radius:var(--btn-radius);
  background:var(--neon);
  color:var(--btn-fg,#06101f);
  font-weight:700;font-size:.95rem;letter-spacing:.02em;
  border:2px solid var(--neon);
  cursor:pointer;
  transition:.25s;
}
.btn:hover{
  background:transparent;color:var(--neon);
  box-shadow:var(--btn-glow);
}
.btn-ghost{
  background:var(--ghost-bg);
  color:var(--heading);
  border-color:var(--line-strong);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:var(--neon);color:var(--btn-fg,#06101f);border-color:var(--neon)}
.btn-lg{padding:22px 56px;font-size:1.05rem}

/* ==========================================================================
   4. HEADER
   ========================================================================== */
.site-header{
  position:relative;z-index:900;
  padding:var(--header-gap,16px) clamp(10px,2vw,24px);
}
.site-header.is-sticky{position:sticky;top:0}
.admin-bar .site-header.is-sticky{top:32px}
@media (max-width:782px){.admin-bar .site-header.is-sticky{top:46px}}

.header-inner{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:var(--header-pad,10px) 12px var(--header-pad,10px) 22px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background-color:var(--header-base,transparent);
  background-image:var(--header-layer,linear-gradient(var(--header-bg),var(--header-bg)));
  background-size:cover;background-position:center;
  border:var(--header-border-w) solid var(--header-border);
  border-radius:var(--header-radius);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 40px -22px var(--shadow);
  transition:background .3s,padding .3s;
}
/* Full width bar instead of the floating pill */
.header-full .site-header{padding:0}
.header-full .header-inner{
  max-width:none;border-radius:0;border-left:0;border-right:0;border-top:0;
  padding:12px max(clamp(20px,4vw,48px),calc((100% - var(--maxw)) / 2 + 24px));
  box-shadow:none;
}
.header-full .header-inner > *:first-child{margin-left:0}
.header-full .site-header .wrap-limit{max-width:var(--maxw);margin-inline:auto;width:100%}

/* Slightly more compact and opaque while scrolling */
.site-header.is-scrolled .header-inner{
  background-image:var(--header-layer-solid,linear-gradient(var(--header-bg-solid),var(--header-bg-solid)));
  padding-block:calc(var(--header-pad,10px) * .7);
}

.site-branding{flex-shrink:0;display:flex;align-items:center}
.site-branding a{
  display:flex;align-items:center;gap:13px;
  color:var(--heading);text-decoration:none;line-height:1;
}
.site-branding img{
  height:var(--logo-h);width:auto;
  max-width:min(240px,42vw);object-fit:contain;
  flex-shrink:0;
}
.site-branding .custom-logo-link{display:block;line-height:0}
.site-name{
  font-size:var(--logo-text,22px);
  font-weight:800;letter-spacing:-.03em;
  white-space:nowrap;
}
.branding-both .site-name{max-width:min(320px,40vw);overflow:hidden;text-overflow:ellipsis}
.site-branding a:hover .site-name{color:var(--neon)}

.site-nav{display:flex;min-width:0}
.nav-menu{display:flex;align-items:center;flex-wrap:nowrap}
.nav-menu li{white-space:nowrap}
.nav-menu a{
  display:block;
  color:var(--text);
  font-weight:600;
  padding-block:9px;
  border-radius:var(--btn-radius);
  white-space:nowrap;
  transition:color .25s,background .25s;
}
/* Sub menus (dropdown) */
.nav-menu li{position:relative}
.nav-menu .sub-menu{
  position:absolute;top:calc(100% + 10px);left:0;
  min-width:210px;
  background-color:var(--bg);
  background-image:var(--header-layer-solid,linear-gradient(var(--header-bg-solid),var(--header-bg-solid)));
  border:1px solid var(--line);
  border-radius:var(--menu-radius);padding:8px;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 20px 44px -22px var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:.2s;display:block;
}
.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
.nav-menu .sub-menu a{text-transform:none;letter-spacing:0;font-size:.92rem;padding:10px 14px}
.menu-item-has-children > a::after{content:"\25BE";margin-left:7px;font-size:.7em;opacity:.6}

.header-cta{flex-shrink:0;display:flex;align-items:center;gap:8px}
/* custom.js copies the header buttons into the menu for small screens.
   They are only revealed inside the mobile menu (see the generated media query). */
.nav-menu .mobile-cta,.nav-menu .mobile-action{display:none}
.header-cta .btn{padding:12px 26px;font-size:.85rem}

/* Configurable action button (phone / WhatsApp / mail / link) */
.btn-action{gap:8px}
.btn-action svg{flex-shrink:0}
.btn-action-ghost{
  background:var(--ghost-bg);color:var(--heading);
  border-color:var(--line-strong);
}
.btn-action-ghost:hover{background:var(--neon);color:var(--btn-fg,#06101f);border-color:var(--neon)}
.btn-action-icon{
  width:46px;height:46px;padding:0;border-radius:var(--btn-round);
  justify-content:center;
}
.btn-action-icon svg{width:19px;height:19px}

.nav-toggle{
  display:none;
  width:46px;height:46px;border-radius:var(--btn-round);
  background:var(--hover);border:1px solid var(--line-strong);
  cursor:pointer;padding:0;position:relative;
}
.nav-toggle span{
  position:absolute;left:13px;width:20px;height:2px;background:var(--heading);
  transition:.25s;
}
.nav-toggle span:nth-child(1){top:17px}
.nav-toggle span:nth-child(2){top:23px}
.nav-toggle span:nth-child(3){top:29px}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:clamp(420px,var(--hero-h,78vh),900px);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:80px 24px;
  overflow:hidden;
}
.hero-left .hero{text-align:left;justify-content:flex-start}
/* Same left edge as .wrap: the hero has 24px side padding of its own. */
.hero-left .hero-inner{margin-left:max(0px,calc((100% + 48px - var(--maxw)) / 2))}
.hero-left .hero-actions{justify-content:flex-start}
.hero-left .hero-inner p{margin-inline:0}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
/* The veil that keeps the text readable over the image. Colour, strength
   and shape come from the Customizer (--hero-veil). It must stay partly
   transparent, otherwise the image disappears. */
.hero-media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--hero-veil,linear-gradient(rgba(10,20,40,.55),rgba(10,20,40,.55)));
}
.hero-inner{position:relative;z-index:3;max-width:900px}
.hero h1{margin-bottom:26px}
.hero h1 em{font-style:italic;color:var(--neon)}
.hero p{font-size:clamp(1rem,1.6vw,1.25rem);max-width:40em;margin:0 auto 40px;color:var(--text)}
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   6. CARDS AND GRID
   ========================================================================== */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
/* Fixed column counts, so six items give two full rows instead of 4 + 2. */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid-cols-2,.grid-cols-3,.grid-cols-4{grid-template-columns:1fr}}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 32px;
  transition:.3s;
  position:relative;overflow:hidden;
}
.card:hover{
  border-color:var(--neon);
  transform:translateY(-6px);
  box-shadow:0 22px 50px -25px var(--shadow);
}
.card h3{margin-bottom:12px}
.card p{font-size:.98rem}
.card .card-icon{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--neon-soft);color:var(--neon);
  font-size:1.4rem;font-weight:800;margin-bottom:22px;
}
.card-link{display:inline-block;margin-top:18px;font-weight:700;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase}

/* Portfolio */
.tile{
  border-radius:var(--radius);overflow:hidden;position:relative;
  aspect-ratio:4/3;background:var(--card);border:1px solid var(--line);
}
.tile img{width:100%;height:100%;object-fit:cover;transition:.5s}
.tile:hover img{transform:scale(1.07)}
.tile-cap{
  position:absolute;inset:auto 0 0 0;
  padding:26px 24px;
  background:linear-gradient(transparent,rgba(6,16,31,.94));
}
.tile-cap h3{font-size:1.15rem;margin:0;color:#fff}  /* always on a dark gradient over the photo */

/* Section heading */
.section-head{margin-bottom:56px}
.eyebrow{
  display:inline-block;margin-bottom:16px;
  font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--neon);
}

/* ==========================================================================
   7. POSTS AND SINGLE VIEWS
   ========================================================================== */
.entry{max-width:820px;margin-inline:auto}
.entry-header{margin-bottom:36px}
.entry-meta{font-size:.88rem;color:var(--text);opacity:.7;margin-top:12px}
.entry-content > * + *{margin-top:1.1em}
/* The same rhythm inside columns, groups and media-text, where the rule above
   does not reach. Without it a paragraph sticks to the heading above it. */
.entry-content :where(.wp-block-column,.wp-block-group,.wp-block-group__inner-container,.wp-block-media-text__content) > * + *{margin-top:1.1em}
.entry-content h2:not(:where(.elementor,.vce-row-container,.vc_row,.fl-builder-content,.et-l) *),.entry-content h3:not(:where(.elementor,.vce-row-container,.vc_row,.fl-builder-content,.et-l) *){margin-top:1.8em}
.entry-content img:not(:where(.elementor,.vce-row-container,.vc_row,.fl-builder-content,.et-l) *),.entry-content figure:not(:where(.elementor,.vce-row-container,.vc_row,.fl-builder-content,.et-l) *){border-radius:var(--radius);overflow:hidden}
.entry-content blockquote{
  border-left:3px solid var(--neon);padding-left:22px;font-size:1.15rem;color:var(--heading);
}
.entry-thumb{border-radius:var(--radius);overflow:hidden;margin-bottom:36px}

.pagination{margin-top:56px}
.pagination .nav-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.pagination .page-numbers{
  padding:12px 20px;border-radius:var(--btn-radius);border:1px solid var(--line-strong);color:var(--text);
}
.pagination .current,.pagination a:hover{background:var(--neon);color:var(--btn-fg,#06101f);border-color:var(--neon)}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
.site-footer{padding:0 clamp(10px,2vw,24px) 28px}
.footer-inner{
  max-width:var(--maxw);margin-inline:auto;
  background-color:var(--footer-base,transparent);
  background-image:var(--footer-layer,linear-gradient(var(--footer-bg),var(--footer-bg)));
  background-size:cover;background-position:center;
  border:var(--footer-border-w) solid var(--footer-border);
  border-radius:var(--footer-radius);
  padding:clamp(40px,6vw,70px) clamp(28px,5vw,60px);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.footer-grid{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:46px}
.footer-brand{font-size:1.6rem;font-weight:800;color:var(--heading);letter-spacing:-.03em;margin-bottom:14px;display:block}
.footer-col h4{
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--footer-accent,var(--neon));margin-bottom:18px;
}
.footer-col li{margin-bottom:10px}
.footer-col a{color:var(--text);font-size:.95rem}
.footer-col a:hover{color:var(--neon)}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:26px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  font-size:.88rem;opacity:.75;
}
/* Full width footer instead of the floating card */
.footer-full .site-footer{padding:0}
.footer-full .site-footer > .wrap{max-width:none}
.footer-full .footer-inner{
  max-width:none;border-radius:0;border-left:0;border-right:0;border-bottom:0;
  padding-inline:0;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.footer-full .footer-grid,.footer-full .footer-bottom{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
/* Align social plugin icons in the footer */
.footer-social ul,.footer-social .widget{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.footer-social a{
  width:42px;height:42px;border-radius:var(--btn-round);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--hover);border:1px solid var(--line-strong);color:var(--text);
}
.footer-social a:hover{background:var(--neon);color:var(--btn-fg,#06101f);border-color:var(--neon)}

/* ==========================================================================
   9. PAGE BUILDERS (Elementor, Visual Composer, WPBakery)
   ========================================================================== */
/* A page made with a builder gets the whole content width, not the reading
   width meant for plain text. */
.bollwerk-builder-page:not(.has-sidebar) .entry{max-width:none}

/* Elementor: while its global colours and fonts are still the ones it ships
   with, the theme's colours and font apply. Once they are changed in
   Elementor's site settings, Elementor's values win again. */
body.bollwerk-el-colors{
  --e-global-color-primary:var(--heading);
  --e-global-color-secondary:var(--heading);
  --e-global-color-text:var(--text);
  --e-global-color-accent:var(--neon);
}
body.bollwerk-el-fonts{
  --e-global-typography-primary-font-family:var(--font);
  --e-global-typography-primary-font-weight:800;
  --e-global-typography-secondary-font-family:var(--font);
  --e-global-typography-secondary-font-weight:600;
  --e-global-typography-text-font-family:var(--font);
  --e-global-typography-text-font-weight:400;
  --e-global-typography-accent-font-family:var(--font);
  --e-global-typography-accent-font-weight:700;
}
.bollwerk-el-colors .elementor-widget-button .elementor-button{color:var(--btn-fg,#06101f)}
.elementor-widget-button .elementor-button{border-radius:var(--btn-radius)}
/* Elementor 4 ("atomic" elements): buttons get a background from Elementor
   but no text style, so they would fall back to the browser's small default. */
.elementor :where(button,input,select,textarea){font-family:inherit;font-size:inherit}
.elementor .e-button-base{color:#fff;font-weight:600;line-height:1.3;cursor:pointer}

/* Text that a builder prints outside of .entry-content, for example on
   Elementor's "Canvas" and "Full Width" templates. */
.elementor-widget-text-editor ul,.elementor-widget-text-editor ol,
.vce-text-block ul,.vce-text-block ol,
.wpb_text_column ul,.wpb_text_column ol{padding-left:1.4em}
.elementor-widget-text-editor ul,.vce-text-block ul,.wpb_text_column ul{list-style:disc}
.elementor-widget-text-editor ol,.vce-text-block ol,.wpb_text_column ol{list-style:decimal}
.elementor-widget-text-editor li,.vce-text-block li,.wpb_text_column li{margin-bottom:.45em}
.elementor-widget-text-editor li::marker,.vce-text-block li::marker,.wpb_text_column li::marker{color:var(--neon)}

/* Rows of a builder sit flush on top of each other */
.entry-content > .vce-row-container,.entry-content > .vc_row,.entry-content > .vc_section{margin-top:0}

/* The theme sets no margins on text by itself, so text blocks of a builder
   get their paragraph and heading spacing here. */
.elementor-widget-text-editor :where(p,ul,ol,blockquote,table,pre,figure),
.vce-text-block :where(p,ul,ol,blockquote,table,pre,figure),
.wpb_text_column :where(p,ul,ol,blockquote,table,pre,figure){margin-top:0;margin-bottom:1.1em}
.elementor-widget-text-editor :where(h1,h2,h3,h4,h5,h6),
.vce-text-block :where(h1,h2,h3,h4,h5,h6),
.wpb_text_column :where(h1,h2,h3,h4,h5,h6){margin-top:1.4em;margin-bottom:.5em}
.elementor-widget-text-editor :where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote):first-child,
.vce-text-block :where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote):first-child,
.wpb_text_column :where(h1,h2,h3,h4,h5,h6,p,ul,ol,blockquote):first-child{margin-top:0}
.elementor-widget-text-editor :where(p,ul,ol,blockquote,table,pre,figure):last-child,
.vce-text-block :where(p,ul,ol,blockquote,table,pre,figure):last-child,
.wpb_text_column :where(p,ul,ol,blockquote,table,pre,figure):last-child{margin-bottom:0}

/* Elementor's "Canvas" template shows neither header nor footer */
.elementor-template-canvas .site-header,
.elementor-template-canvas .site-footer{display:none}

/* ==========================================================================
   10. FORMS (CF7, WPForms, native)
   ========================================================================== */
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],textarea,select{
  width:100%;padding:15px 18px;
  background:var(--field);
  border:1px solid var(--line-strong);
  border-radius:var(--field-radius);
  color:var(--heading);font-family:inherit;font-size:1rem;
  transition:.25s;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px var(--neon-ring)}
input[type=submit],button[type=submit],.wpcf7-submit{
  width:auto;background:var(--neon);color:var(--btn-fg,#06101f);border:2px solid var(--neon);
  border-radius:var(--btn-radius);padding:15px 40px;font-weight:700;cursor:pointer;
}
input[type=submit]:hover,.wpcf7-submit:hover{background:transparent;color:var(--neon)}
::placeholder{color:var(--text);opacity:.5}

/* ==========================================================================
   11. MOBILE
   ========================================================================== */
/* ==========================================================================
   12. ACCESSIBILITY
   ========================================================================== */
:focus-visible{outline:3px solid var(--neon);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline-offset:5px}
.screen-reader-text:focus{
  position:fixed!important;top:12px;left:12px;z-index:99999;
  width:auto;height:auto;clip:auto;
  padding:14px 24px;border-radius:var(--btn-radius);
  background:var(--neon);color:var(--btn-fg,#06101f);font-weight:700;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

@media (max-width:640px){
  body{font-size:16px}
  :root{--header-radius:32px;--footer-radius:24px;--radius:20px}
  .hero{min-height:auto;padding:64px 20px}
  .hero-media::after{background:var(--hero-veil-sm,var(--hero-veil,linear-gradient(rgba(10,20,40,.55),rgba(10,20,40,.55))))}
  .hero-left .hero-inner{margin-left:0}
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;justify-content:center}
  .card{padding:28px 24px}
  .footer-bottom{flex-direction:column;text-align:center}
  /* Disable fixed background on mobile (iOS rendering bug) */
  body.has-bg-image::before{background-attachment:scroll}
}

/* Required WordPress classes */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.alignleft{float:left;margin-right:1.5em}
.alignright{float:right;margin-left:1.5em}
.aligncenter{margin-inline:auto}
.alignleft{float:left;margin:.4em 1.6em 1em 0}
.alignright{float:right;margin:.4em 0 1em 1.6em}
.aligncenter{display:block;margin-inline:auto}
.alignnone{margin-block:1em}

/* Sticky posts */
.sticky{position:relative;border-color:var(--neon)}
.sticky::before{
  content:"\2605";
  position:absolute;top:16px;right:20px;
  color:var(--neon);font-size:1.1rem;line-height:1;
}

/* Author highlight in comments */
.bypostauthor > .comment-body{border-color:var(--neon)}
.bypostauthor > .comment-body .comment-author::after{
  content:attr(data-label);
}

/* Captions */
.wp-caption{max-width:100%;margin-bottom:1.6em}
.wp-caption img{border-radius:var(--radius)}
.wp-caption-text,.gallery-caption,figcaption,.wp-element-caption{
  margin-top:.7em;
  font-size:.86rem;line-height:1.5;
  color:var(--text);opacity:.75;
  text-align:center;
}

/* Long words and URLs must never break the layout */
h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,th,.card,.entry-content,.tile-cap{
  overflow-wrap:break-word;
  word-wrap:break-word;
}
.entry-content a{overflow-wrap:anywhere}

/* ==========================================================================
   13. ADDITIONS
   ========================================================================== */
.tile-empty{
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--hover),transparent 60%);
}
/* Same measure as the post the comments belong to. */
.comments{max-width:820px;margin:64px auto 0}
.comments-title{margin-bottom:28px}
.comment-list{list-style:none;padding:0;display:grid;gap:20px}
.comment-list .children{list-style:none;padding-left:26px;margin-top:16px;display:grid;gap:16px}
.comment-body{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:24px;
}
.comment-author{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.comment-author img{border-radius:50%}
.comment-metadata{font-size:.82rem;opacity:.6;margin-bottom:12px}
.comment-form{margin-top:44px;display:grid;gap:18px;max-width:640px}
.comment-form label{display:block;margin-bottom:8px;font-size:.9rem}
.comment-form .form-submit{margin:0}

/* ==========================================================================
   14. SIDEBAR
   ========================================================================== */
.layout{display:block}
.site-sidebar{display:none}

.has-sidebar .layout{
  display:grid;
  gap:clamp(32px,4vw,56px);
  align-items:start;
}
.has-sidebar .site-sidebar{display:grid;gap:22px;position:sticky;top:110px}
.has-sidebar .site-main{min-width:0}
.has-sidebar .grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

.sidebar-right .layout{grid-template-columns:minmax(0,1fr) var(--sidebar-w,320px)}
.sidebar-left  .layout{grid-template-columns:var(--sidebar-w,320px) minmax(0,1fr)}
.sidebar-left  .site-main{order:2}
.sidebar-left  .site-sidebar{order:1}

.site-sidebar .widget{padding:26px 24px}
.site-sidebar .widget-title{
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--neon);margin-bottom:16px;
}
.site-sidebar ul{display:grid;gap:10px}
.site-sidebar li a{color:var(--text);font-size:.95rem}
.site-sidebar li a:hover{color:var(--neon)}
.site-sidebar select{margin-top:6px}

@media (max-width:900px){
  .has-sidebar .layout{grid-template-columns:1fr}
  .sidebar-left .site-main,.sidebar-left .site-sidebar{order:0}
  .has-sidebar .site-sidebar{position:static}
}

/* Footer credit */
.footer-credit a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.footer-credit a:hover{color:var(--neon)}


/* ==========================================================================
   15. BLOCK EDITOR CONTENT
   ========================================================================== */

/* Wide and full alignment */
.entry-content > .alignwide{
  width:min(1100px,92vw);
  margin-inline:auto;
  max-width:none;
}
.entry-content > .alignfull{
  width:100vw;
  max-width:none;
  margin-inline:calc(50% - 50vw);
}
.has-sidebar .entry-content > .alignwide,
.has-sidebar .entry-content > .alignfull{
  width:auto;margin-inline:0;
}

/* Quote and pullquote */
.wp-block-quote,blockquote{
  margin-block:1.8em;
  padding:4px 0 4px 26px;
  border-left:3px solid var(--neon);
  font-size:1.12rem;line-height:1.6;
  color:var(--heading);
}
.wp-block-quote cite,blockquote cite,.wp-block-quote__citation{
  display:block;margin-top:.9em;
  font-size:.88rem;font-style:normal;
  color:var(--text);opacity:.75;
}
.wp-block-quote.is-style-large,.wp-block-quote.is-large{
  border-left:0;padding-left:0;text-align:center;font-size:1.4rem;
}
.wp-block-pullquote{
  margin-block:2.2em;padding:36px 28px;
  border-block:2px solid var(--neon);border-inline:0;
  text-align:center;background:var(--card);
}
.wp-block-pullquote blockquote{border:0;padding:0}
.wp-block-pullquote p{font-size:1.5rem;line-height:1.4;color:var(--heading)}

/* Tables */
.wp-block-table,table{
  width:100%;
  border-collapse:collapse;
  margin-block:1.8em;
  font-size:.95rem;
}
.wp-block-table{overflow-x:auto;display:block}
.wp-block-table table{margin:0}
th,td{
  padding:13px 16px;
  border:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
th{
  background:var(--hover);
  color:var(--heading);
  font-weight:700;
  letter-spacing:.02em;
}
tbody tr:nth-child(even) td{background:var(--stripe)}
/* The block library draws table lines in the text colour, which is far too
   heavy. Bring them back to the line colour. */
.wp-block-table td,.wp-block-table th{border-color:var(--line)}
.wp-block-table thead{border-bottom-color:var(--line-strong)}
.wp-block-table tfoot{border-top-color:var(--line-strong)}
.wp-block-table.is-style-stripes td{border:0}
.wp-block-table figcaption{text-align:left}

/* Code and preformatted text */
code,kbd,samp,tt,var{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
  background:var(--hover);
  padding:.15em .45em;border-radius:6px;
  color:var(--neon);
}
pre,.wp-block-code,.wp-block-preformatted,.wp-block-verse{
  background:var(--code-bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  margin-block:1.8em;
  overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9rem;line-height:1.6;
  color:var(--text);
  white-space:pre;
}
pre code,.wp-block-code code{background:none;padding:0;color:inherit;font-size:1em}

/* Galleries */
.wp-block-gallery,.blocks-gallery-grid,.gallery{
  display:grid;gap:14px;margin-block:1.8em;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.wp-block-gallery figure,.gallery-item{margin:0}
.wp-block-gallery img,.gallery-item img{
  width:100%;height:100%;object-fit:cover;border-radius:var(--radius);
}
.gallery-columns-2 .gallery-item{grid-column:span 1}

/* Media and text, cover, embeds, separators */
.wp-block-image img,.wp-block-media-text__media img,.wp-block-cover{border-radius:var(--radius)}
.wp-block-cover{overflow:hidden}
.wp-block-embed,.wp-block-video{margin-block:1.8em}
.wp-block-embed__wrapper,.wp-block-video video{border-radius:var(--radius);overflow:hidden}
.wp-block-separator,hr{
  border:0;height:1px;margin-block:2.4em;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.wp-block-separator.is-style-dots{background:none;text-align:center}

/* Lists and definition lists */
.entry-content ul,.entry-content ol{padding-left:1.4em;margin-block:1.1em}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content li{margin-bottom:.45em}
.entry-content li::marker{color:var(--neon)}
.entry-content ul ul,.entry-content ol ol,.entry-content ul ol,.entry-content ol ul{margin-block:.45em}
dt{font-weight:700;color:var(--heading);margin-top:1em}
dd{margin-left:1.4em}

/* Buttons and file block. Block editor buttons look like the theme buttons
   unless a colour was picked for them in the editor. */
.wp-block-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-block:1.8em}
.entry-content .wp-block-button__link{
  padding:14px 32px;border:2px solid var(--neon);border-radius:var(--btn-radius);
  font-weight:700;font-size:.95rem;letter-spacing:.02em;transition:.25s;
}
.entry-content .wp-block-button__link:not(.has-background){background:var(--neon)}
.entry-content .wp-block-button__link:not(.has-text-color){color:var(--btn-fg,#06101f)}
.entry-content .wp-block-button__link:not(.has-background):hover{background:transparent;color:var(--neon);box-shadow:var(--btn-glow)}
.entry-content .is-style-outline > .wp-block-button__link{border-color:var(--line-strong)}
.entry-content .is-style-outline > .wp-block-button__link:not(.has-background){background:var(--ghost-bg)}
.entry-content .is-style-outline > .wp-block-button__link:not(.has-text-color){color:var(--heading)}
.entry-content .is-style-outline > .wp-block-button__link:not(.has-background):hover{background:var(--neon);color:var(--btn-fg,#06101f);border-color:var(--neon);box-shadow:none}
.wp-block-file{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 22px;margin-block:1.6em;
}

/* Drop cap */
.has-drop-cap:not(:focus)::first-letter{
  font-size:3.2em;line-height:.85;font-weight:800;
  float:left;margin:.05em .12em 0 0;color:var(--neon);
}

/* ==========================================================================
   16. POST NAVIGATION, PAGINATED POSTS, PASSWORD FORM
   ========================================================================== */
.page-links{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-top:2.4em;font-size:.9rem;
}
.page-links a,.page-links > .post-page-numbers{
  padding:8px 15px;border-radius:var(--btn-radius);
  border:1px solid var(--line-strong);color:var(--text);
}
.page-links a:hover,.page-links > .current{
  background:var(--neon);color:var(--btn-fg,#06101f);border-color:var(--neon);
}

.post-navigation{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:56px;padding-top:36px;
  border-top:1px solid var(--line);
}
.post-navigation .nav-links{display:contents}
.post-navigation .nav-previous a,.post-navigation .nav-next a{
  display:block;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;
  color:var(--heading);font-weight:700;
}
.post-navigation .nav-previous a:hover,.post-navigation .nav-next a:hover{
  border-color:var(--neon);
}
.post-navigation .nav-next{text-align:right}
.post-navigation .nav-subtitle{
  display:block;margin-bottom:8px;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--neon);font-weight:600;
}

.post-password-form{
  display:grid;gap:14px;max-width:460px;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;
}
.post-password-form label{display:grid;gap:8px;font-size:.95rem}

.comment-navigation,.comments-pagination{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-block:28px;
}
.comment-navigation a,.comments-pagination a,.comments-pagination .current{
  padding:10px 18px;border-radius:var(--btn-radius);
  border:1px solid var(--line-strong);color:var(--text);font-size:.9rem;
}
.comments-pagination .current{background:var(--neon);color:var(--btn-fg,#06101f);border-color:var(--neon)}

/* Search form */
.search-form{display:flex;gap:10px;max-width:520px;margin-top:24px}
.search-form .search-field{flex:1}
.search-form .search-submit{flex-shrink:0}

/* Widget lists */
.widget ul{padding-left:0;list-style:none}
.widget_recent_comments li,.widget_recent_entries li,.widget_archive li,.widget_categories li,.widget_pages li,.widget_meta li,.widget_nav_menu li{
  padding-block:6px;border-bottom:1px solid var(--line);
}
.widget li:last-child{border-bottom:0}
.widget .children,.widget .sub-menu{padding-left:16px;margin-top:6px}
.wp-block-calendar table,.widget_calendar table{font-size:.85rem}
.wp-block-calendar td,.widget_calendar td,.wp-block-calendar th,.widget_calendar th{padding:7px;text-align:center}

/* ==========================================================================
   17. FULL WIDTH PAGE TEMPLATE
   ========================================================================== */
.site-main-full{padding-bottom:clamp(40px,6vw,80px)}
.entry-full{max-width:none;margin:0}
.entry-content-full{max-width:none}
.entry-content-full > *{max-width:none}

/* Blocks keep a readable measure unless they are explicitly wide */
.entry-content-full > :not(.alignwide):not(.alignfull):not(.wp-block-cover):not([class*="elementor"]):not(.vce-row-container){
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:24px;
}
.entry-content-full > .alignfull{width:100%;margin-inline:0;max-width:none}
.entry-content-full > .alignwide{width:min(1400px,94vw);margin-inline:auto;padding-inline:0}

.entry-thumb-full{border-radius:0;margin-bottom:0}
.entry-thumb-full img{width:100%;height:auto;border-radius:0}

/* Elementor takes over completely on this template */
.is-fullwidth .entry-content-full > .elementor{max-width:none;padding-inline:0}
/* Visual Composer: "boxed" rows keep the content width, stretched rows break
   out on their own. The side spacing must not be padding on the row, or the
   stretched rows end up shifted by it. */
.entry-content-full > .vce-row-container{
  width:calc(100% - 48px);max-width:calc(var(--maxw) - 48px);margin-inline:auto;
}

/* ==========================================================================
   18. SMALL LAYOUT HELPERS
   ========================================================================== */
.site-footer > .wrap{padding-inline:0}
.footer-social{margin-top:22px}
.section-404{padding-block:140px}
.section-404 .lead{margin-block:24px 36px}
.card > .tile{display:block;margin-bottom:22px}
.entry-tags{margin-top:28px}
.entry-header-full{padding-top:clamp(40px,6vw,80px)}
/* "Card" style of the Group block: the same box as the service cards. */
.wp-block-group.is-style-bollwerk-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 32px;
  height:100%;
}
/* Blocks placed inside a card start flush with its padding. */
.card > :first-child,.entry-content .card > :first-child,
.entry-content .is-style-bollwerk-card > :first-child,
.entry-content .is-style-bollwerk-card > .wp-block-group__inner-container > :first-child{margin-top:0}
.entry-content .is-style-bollwerk-card > * + *,
.entry-content .is-style-bollwerk-card > .wp-block-group__inner-container > * + *{margin-top:.7em}
/* WooCommerce without the Bollwerk Shop add-on: its checkout fields stay
   white, so the labels inside them must stay dark, also on a dark page. */
:root .wc-block-components-text-input label,
:root .wc-block-components-form .wc-block-components-text-input label,
:root .wc-blocks-components-select .wc-blocks-components-select__label,
:root .wc-block-components-combobox .components-base-control__label{color:#555d66}
/* Sections that only receive the focus from a script (skip link, in-page
   links) show no focus ring around the whole section. */
[tabindex="-1"]:focus{outline:none}
/* Comments: long content and deep threads must not widen the page. */
.comment-list,.comment-list .children{grid-template-columns:minmax(0,1fr)}
.comment-body{min-width:0;overflow-wrap:anywhere}
.comment-content pre,.comment-content table{max-width:100%;overflow-x:auto}
@media (max-width:640px){
  .comment-list .children{padding-left:10px}
  .comment-body{padding:16px}
}
/* Post navigation: very long titles wrap instead of widening the page. */
.post-navigation .nav-previous,.post-navigation .nav-next{min-width:0}
.post-navigation a{overflow-wrap:anywhere}
/* Plain tables scroll inside their own box on small screens. */
@media (max-width:640px){
  .entry-content > table,.comment-content table{display:block;overflow-x:auto}
}
/* Links inside running text are underlined, so they do not rely on colour alone. */
.entry-content :is(p,li,dd,td,th,figcaption,blockquote) a,.comment-content a{text-decoration:underline;text-underline-offset:3px}
/* Comment text gets the same basic rhythm and list markers as post content. */
.comment-content > * + *{margin-top:1em}
.comment-content ul{list-style:disc;padding-left:1.4em}
.comment-content ol{list-style:decimal;padding-left:1.4em}
.entry-content .wp-block-button__link,.entry-content a.btn,.entry-content a.card-link{text-decoration:none}