/*
Theme Name: Hansmeier
Theme URI: https://www.zimmerei-hansmeier.de/
Author: Webentwicklung Hansmeier
Description: Klassisches WordPress-Theme der Zimmerei und Schreinerei Thomas Hansmeier.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: hansmeier
*/

:root { --green:#4f9a46; --light-green:#e9ffe8; --page-width:970px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; font:12px/1.5 Verdana, Geneva, sans-serif; color:#000; background:var(--light-green); }
a { color:var(--green); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid #1d5d18; outline-offset:2px; }
img { max-width:100%; height:auto; }
h1 { margin:0 0 20px; font-size:20px; line-height:1.2; }
h2 { margin:0 0 20px; font-size:14px; line-height:1.3; }
h3 { font-size:12px; }
.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; }
.screen-reader-text:focus { position:fixed; z-index:100000; top:10px; left:10px; width:auto; height:auto; padding:10px 14px; clip:auto; color:#000; background:#fff; }

.site-shell { position:relative; width:var(--page-width); max-width:100%; margin:0 auto; }
.legal-nav { position:absolute; z-index:3; right:35px; top:20px; display:flex; gap:10px; margin:0; padding:0; }
.legal-nav ul { display:flex; gap:10px; margin:0; padding:0; list-style:none; }
.legal-nav li { margin:0; padding:0; }
.legal-nav a { display:block; padding:2px 0 2px 10px; color:var(--green); font-size:10px; line-height:16px; }
.legal-nav a:hover, .legal-nav a:focus-visible, .legal-nav .current-menu-item > a { text-decoration:underline; }
.site-header { min-height:102px; }
.site-logo { float:left; width:297px; margin:10px 0 10px 32px; }
.site-logo img { display:block; width:297px; max-height:76px; object-fit:contain; object-position:left center; }
.header-search { float:right; width:250px; margin:57px 35px 0 0; }
.search-form { position:relative; display:flex; }
.search-field { width:100%; min-height:26px; padding:4px 32px 4px 6px; border:1px solid #000; border-radius:0; background:#fff; font:inherit; }
.search-submit { position:absolute; right:1px; top:1px; width:30px; height:24px; padding:0; border:0; background:transparent url(assets/images/search-icon.png) center no-repeat; cursor:pointer; text-indent:-9999px; }
.menu-toggle { display:none; }
.main-navigation { clear:both; width:900px; min-height:57px; margin-left:35px; background:url(assets/images/menubar.png) no-repeat top left; }
.main-navigation ul { display:flex; margin:0; padding:0; list-style:none; }
.main-navigation li { margin:0; }
.main-navigation a { display:block; height:45px; padding:14px 17px 10px; color:#fff; background:url(assets/images/menu-devider.png) no-repeat top right; font:bold 12px Arial, sans-serif; }
.main-navigation a:hover { text-decoration:none; }
.main-navigation li:hover, .main-navigation .current-menu-item, .main-navigation .current-menu-ancestor, .main-navigation .current-page-ancestor, .main-navigation .current_page_item, .main-navigation .current_page_ancestor { background:url(assets/images/menu-hover.png) repeat-x; }
.main-navigation li:first-child:hover, .main-navigation li:first-child.current-menu-item { border-radius:5px 0 0 5px; }
.main-navigation li:last-child a { background:none; }

.page-frame { display:flex; align-items:stretch; clear:both; }
.shadow { flex:0 0 35px; min-height:900px; background-repeat:no-repeat; }
.shadow-left { background-image:url(assets/images/shadow_left.png); }
.shadow-right { background-image:url(assets/images/shadow_right.png); }
.page-surface { width:900px; min-height:900px; overflow:hidden; background:#fff url(assets/images/bg.png) no-repeat; }
.hero { position:relative; width:900px; height:350px; overflow:hidden; background:#e7e7e7; }
.hero::before { position:absolute; z-index:4; top:0; right:0; left:0; height:1px; background:#555; content:""; pointer-events:none; }
.hero::after { position:absolute; z-index:4; inset:0; background:linear-gradient(to bottom, #555 0, rgba(85,85,85,.65) 25%, transparent 100%) left top/1px 100% no-repeat, linear-gradient(to bottom, #555 0, rgba(85,85,85,.65) 25%, transparent 100%) right top/1px 100% no-repeat; content:""; pointer-events:none; }
.home .hero { height:450px; }
.hero img, .hero video { display:block; width:100%; height:100%; object-fit:cover; }
.hero-placeholder { background:url(assets/images/bg.jpg) center/cover no-repeat; }
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.hero-slide.is-active { opacity:1; }
.content-layout { display:grid; grid-template-columns:225px minmax(0,1fr); gap:15px; padding-top:15px; }
.sidebar { min-width:0; }
.main-content { min-width:0; padding:0 20px 30px 0; }
.main-content::after { display:block; clear:both; content:""; }
.main-content p:first-child { margin-top:0; }
.page-title { color:var(--green); }
.green { color:var(--green); }
.sidebar-section, .widget { margin:0 0 30px; padding:0 20px; }
.sidebar-title, .widget-title { width:225px; min-height:31px; margin:0 0 12px -20px; padding:6px 20px; color:#fff; background:url(assets/images/title.png) no-repeat; font-size:12px; }
.sub-navigation ul { margin:0 0 30px; padding:0; list-style:none; }
.sub-navigation .sidebar-title { margin:0; }
.sub-navigation li { position:relative; background:#fff; }
.sub-navigation a { display:block; padding:5px 20px; border-bottom:1px dotted #000; color:#000; }
.sub-navigation li.current_page_item > a, .sub-navigation li.current_page_ancestor > a, .sub-navigation a:hover { background:#6cdb66; text-decoration:none; }
.sub-navigation .children { position:absolute; z-index:20; top:-1px; left:225px; display:none; width:225px; margin:0; padding:0; border-top:1px dotted #000; border-right:1px dotted #000; box-shadow:3px 3px 8px rgba(0,0,0,.16); }
.sub-navigation li:hover > .children, .sub-navigation li:focus-within > .children { display:block; }
.sidebar .post-list { margin:0; padding:0; list-style:none; }
.sidebar .post-list li { margin-bottom:12px; }
.sidebar .post-list time { display:block; font-size:10px; color:#555; }
.sidebar-configurator-link { margin:0; font-size:12px; line-height:15px; font-weight:bold; }
.knowledge-slider { width:225px; padding-right:20px; overflow:hidden; }
.knowledge-slider-track { position:relative; width:185px; min-height:145px; overflow:hidden; }
.knowledge-slide { position:absolute; inset:0; z-index:0; visibility:hidden; opacity:0; transform:translateX(100%); transition:transform .45s ease, opacity .45s ease; }
.knowledge-slide.is-active { position:relative; z-index:1; visibility:visible; opacity:1; transform:translateX(0); }
.knowledge-slide h3 { margin:0 0 7px; font-size:12px; line-height:18px; }
.knowledge-slide p { display:-webkit-box; min-height:72px; max-height:72px; margin:0 0 8px; overflow:hidden; line-height:18px; -webkit-box-orient:vertical; -webkit-line-clamp:4; }
.knowledge-more { display:inline-block; font-size:11px; }
.readon, .button, input[type=submit], .contact-form-submit button { display:inline-block; padding:3px 6px; border:1px solid #cfd1d2; color:var(--green); background:#eee url(assets/images/readon.png) repeat-x; font:inherit; font-weight:bold; cursor:pointer; }
.readon:hover, .button:hover, input[type=submit]:hover, .contact-form-submit button:hover { border-color:#999; text-decoration:none; }
.back-to-top { display:flex; justify-content:flex-end; align-items:center; min-height:58px; padding:10px 5px; clear:both; }
.back-to-top a { padding:8px; }
.back-to-top img { width:9px; height:8px; margin-right:10px; }
.site-footer { padding:10px 35px 25px; font-size:10px; text-align:right; }

.entry-content table { width:100%; border-collapse:collapse; }
.entry-content td, .entry-content th { padding:8px; vertical-align:top; }
.entry-content table:not(.zebrastreifen) tr { background:transparent; }
.entry-content table.zebrastreifen > tbody > tr:nth-child(odd) { background:var(--light-green); }
.page-id-63 .entry-content table { table-layout:fixed; font-size:10px; line-height:1.35 !important; }
.page-id-63 .entry-content td { padding:4px; overflow-wrap:anywhere; hyphens:auto; }
.entry-content input[type=text], .entry-content input[type=email], .entry-content input[type=tel], .entry-content textarea { width:100%; max-width:350px; padding:6px; border:1px solid #777; background:var(--light-green); font:inherit; }
.entry-content textarea { min-height:110px; resize:vertical; }
.contact-form { width:100%; max-width:535px; }
.contact-form-required { margin:0 0 18px; }
.contact-form-field { display:grid; grid-template-columns:140px minmax(0,350px); align-items:center; gap:12px; margin:0 0 10px; }
.contact-form-field label { line-height:1.35; text-align:right; }
.contact-form-field input, .contact-form-field textarea { width:100%; max-width:none; }
.contact-form-field input { min-height:30px; }
.contact-form-field--message { align-items:start; }
.contact-form-field--message label { padding-top:7px; }
.contact-form-field--message textarea { min-height:160px; }
.contact-form-submit { margin:14px 0 0 152px; }
.contact-form-submit button { min-height:26px; }
.contact-form-message { max-width:502px; margin:0 0 18px; padding:8px 10px; border:1px solid #777; }
.contact-form-message--success { padding:12px 14px; border:1px solid var(--green); border-left-width:5px; color:#1d5d18; background:#e1f7df; box-shadow:0 2px 5px rgba(29,93,24,.16); font-weight:bold; }
.contact-form-message--error { border-color:#9b2929; background:#fff0f0; }
.velux-configurator { width:100%; min-height:1400px; overflow:hidden; background:#fff; }
.velux-configurator iframe { display:block; width:100%; min-height:1400px; border:0; }
.entry-meta { margin:-12px 0 18px; color:#666; font-size:11px; }
.post-summary { margin-bottom:28px; }
.pagination { margin:30px 0; }
.pagination .page-numbers { display:inline-block; padding:4px 8px; border:1px solid #ccc; }
.pagination .current { color:#fff; background:var(--green); }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,100px); gap:10px; margin:0; }
.gallery-grid a { display:block; width:100px; height:100px; overflow:hidden; background:#eee; }
.gallery-grid img { width:100%; height:100%; object-fit:cover; }
.legacy-content-images { display:grid; gap:10px; margin:14px 0 20px; }
.legacy-content-images.columns-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.legacy-content-images.columns-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.legacy-content-image { margin:0; }
.legacy-content-image img { display:block; max-width:100%; height:auto; }
.lightbox { position:fixed; z-index:9999; inset:0; display:none; align-items:center; justify-content:center; padding:50px; background:rgba(0,0,0,.88); }
.lightbox.is-open { display:flex; }
.lightbox img { max-width:100%; max-height:100%; }
.lightbox button { position:absolute; width:44px; height:44px; border:1px solid #fff; color:#fff; background:#222; font-size:26px; cursor:pointer; }
.lightbox-close { top:10px; right:10px; }
.lightbox-prev { left:10px; }
.lightbox-next { right:10px; }

@media (max-width:760px) {
  .site-shell { width:100%; }
  .legal-nav { position:static; justify-content:flex-end; padding:8px 15px 0; text-align:right; }
  .site-header { min-height:88px; }
  .site-logo { width:220px; margin:8px 15px; }
  .site-logo img { width:220px; height:auto; }
  .header-search { float:none; clear:both; width:auto; margin:0 15px 12px; }
  .menu-toggle { display:block; width:calc(100% - 30px); min-height:42px; margin:0 15px; border:0; border-radius:4px; color:#fff; background:#222; font-weight:bold; text-align:left; padding:0 15px; }
  .main-navigation { width:auto; min-height:0; margin:0 15px; background:#292929; border-radius:0 0 4px 4px; }
  .main-navigation ul { display:none; flex-direction:column; }
  .main-navigation.is-open ul { display:flex; }
  .main-navigation a { height:auto; min-height:42px; padding:12px 15px; background:none; }
  .main-navigation li, .main-navigation li:hover, .main-navigation .current-menu-item, .main-navigation .current-menu-ancestor { background:none; }
  .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a { background:var(--green); }
  .shadow { display:none; }
  .page-surface { width:100%; min-height:0; margin-top:10px; background:#fff; }
  .hero { width:100%; height:auto; aspect-ratio:18/7; }
  .content-layout { grid-template-columns:1fr; gap:0; }
  .sidebar { order:2; border-top:1px solid #ddd; padding-top:20px; }
  .main-content { order:1; padding:5px 20px 30px; }
  .contact-form-field { grid-template-columns:1fr; gap:4px; }
  .contact-form-field label { text-align:left; }
  .contact-form-field--message label { padding-top:0; }
  .contact-form-submit { margin-left:0; }
  .sidebar-title, .widget-title { width:225px; }
  .sub-navigation .children { position:static; display:block; width:auto; margin:0; padding-left:18px; border:0; box-shadow:none; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); }
  .page-id-63 .entry-content { max-width:100%; overflow-x:auto; }
  .page-id-63 .entry-content table { width:640px; table-layout:fixed; }
  .gallery-grid a { width:100%; height:auto; aspect-ratio:1; }
  .home .hero { height:auto; aspect-ratio:2/1; }
  .lightbox { padding:55px 12px; }
  .site-footer { padding:15px 20px; text-align:center; }
}

@media print { .legal-nav, .header-search, .menu-toggle, .main-navigation, .sidebar, .shadow, .back-to-top, .site-footer { display:none!important; } .site-shell, .page-surface, .main-content { width:100%; max-width:none; padding:0; } .hero { height:200px; } }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .hero-slide, .knowledge-slide { transition:none; }
}