/*
Theme Name: TGL Werkstatt
Description: Konfigurierbares WordPress-Theme für die Möbeltischlerei TGL in Bergkamen-Oberaden.
Version: 1.2.1
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: tgl-werkstatt
*/

:root{--paper:#f6f4ef;--ink:#23282a;--grey:#babdbd;--stone:#7d8283;--sand:#d4c8b4;--green:#41673b;--line:#d9d7cf;--width:1240px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.65 system-ui,sans-serif}
img{max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--green);outline-offset:4px}
.tgl-wrap{width:min(calc(100% - 3rem),var(--width));margin-inline:auto}
.tgl-skip{position:absolute;left:1rem;top:-10rem;z-index:100;background:white;padding:.7rem}
.tgl-skip:focus{top:3rem}
.tgl-header{background:var(--grey);border-bottom:1px solid #0002}
.tgl-header-inner{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.tgl-brand{display:inline-flex;align-items:center;flex-shrink:0}
.tgl-brand img{display:block;width:236px;max-height:78px;object-fit:contain}
.tgl-nav ul{margin:0;padding:0;list-style:none}
.tgl-nav>div>ul,.tgl-nav>ul{display:flex;align-items:center;gap:clamp(.5rem,2.5vw,2.3rem)}
.tgl-nav a{display:block;text-decoration:none;padding:.6rem 0;font-size:.94rem;font-weight:650}
.tgl-nav a:hover,.tgl-nav .current-menu-item>a{text-decoration:underline;text-decoration-thickness:2px}
.tgl-nav li{position:relative}
.tgl-nav .sub-menu{display:none;position:absolute;z-index:5;min-width:13rem;top:100%;left:-1rem;padding:.5rem 1rem;background:var(--paper);box-shadow:0 .7rem 1.7rem #0002}
.tgl-nav li:hover>.sub-menu,.tgl-nav li:focus-within>.sub-menu{display:block}
.tgl-toggle{display:none;border:1px solid currentColor;background:transparent;color:inherit;padding:.5rem .8rem;font:inherit;cursor:pointer}
.tgl-main{padding-block:clamp(2.5rem,6vw,6rem);min-height:50vh}
.tgl-main:has(.tgl-hero:first-child){padding-top:0}
.tgl-page-title{max-width:850px;margin:0 auto 2rem}
.tgl-content{max-width:850px;margin:auto}
.tgl-content>.tgl-wide,.tgl-content>.alignwide{width:min(calc(100vw - 3rem),var(--width));max-width:none;margin-inline:50%;transform:translateX(-50%)}
h1,h2,h3{font-weight:600;line-height:1.1;letter-spacing:-.045em;text-wrap:balance}
h1{font-size:clamp(2.65rem,6vw,5.5rem);margin:.25em 0 .45em}
h2{font-size:clamp(1.8rem,3.5vw,3.4rem);margin:1.25em 0 .4em}
h3{font-size:clamp(1.25rem,2vw,1.8rem);margin:1.2em 0 .35em}
.tgl-eyebrow{font-size:.78rem;font-weight:750;text-transform:uppercase;letter-spacing:.16em;margin:0 0 .8rem}
.tgl-hero{position:relative;isolation:isolate;min-height:clamp(480px,70vh,750px);display:grid;align-items:end;background:#303637;color:white;margin-bottom:clamp(2.5rem,6vw,6rem);overflow:hidden}
.tgl-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#171d20e8 0%,#171d2088 48%,#171d201f 100%)}
.tgl-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.tgl-hero-copy{padding:clamp(1.4rem,6vw,5rem);max-width:920px}
.tgl-hero-copy h1{font-size:clamp(2.55rem,5.9vw,6rem);margin:.18em 0 .42em}
.tgl-hero-copy em{color:var(--sand);font-style:normal}
.tgl-button,.tgl-form button{display:inline-flex;align-items:center;gap:.5rem;background:var(--green);color:white;padding:.72rem 1.15rem;text-decoration:none;font:inherit;font-weight:650;border:0;cursor:pointer}
.tgl-hero .tgl-button{color:#23282a;background:var(--sand)}
.tgl-button:hover,.tgl-form button:hover{filter:brightness(.9)}
.tgl-intro{font-size:clamp(1.1rem,2vw,1.36rem)}
.tgl-section{margin-block:clamp(2rem,6vw,5.5rem)}
.tgl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.7rem)}
.tgl-card{background:#fff9;border:1px solid var(--line);height:100%;overflow:hidden}
.tgl-card>a{display:block;text-decoration:none}
.tgl-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.tgl-card a:hover h3{text-decoration:underline}
.tgl-card-body{padding:1.2rem 1.4rem}
.tgl-card-body h3{margin:0}
.tgl-card-body p:last-child{margin-bottom:0}
.tgl-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:center}
.tgl-split img{display:block;width:100%}
.tgl-split>div>:first-child{margin-top:0}
.tgl-band{background:var(--sand);padding:clamp(1.4rem,4vw,3.5rem)}
.tgl-cover{margin:0 0 2rem}
.tgl-cover img{display:block;width:100%;max-height:580px;object-fit:cover}
.tgl-content .wp-block-gallery{gap:1rem}
.tgl-content .wp-block-gallery figure{margin:0}
.tgl-content .wp-block-gallery img{aspect-ratio:4/3;object-fit:cover}
.tgl-form{display:grid;gap:1rem}
.tgl-form label{display:grid;gap:.25rem;font-weight:650}
.tgl-form input,.tgl-form textarea{padding:.7rem;border:1px solid var(--stone);font:inherit;width:100%;background:white;color:var(--ink)}
.tgl-form select{padding:.7rem;border:1px solid var(--stone);font:inherit;width:100%;background:white;color:var(--ink)}
.tgl-form label.tgl-checkbox{display:flex;align-items:baseline;gap:.6rem}
.tgl-form input[type=checkbox]{width:auto}
.tgl-status{background:var(--sand);padding:1rem}
.tgl-video{width:100%;height:auto;display:block}
.tgl-timeline{padding:0;list-style:none}
.tgl-timeline li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.tgl-form button{justify-self:start}
.tgl-trap{position:absolute;left:-10000px}
.tgl-footer{background:var(--ink);color:#f6f4ef;padding:3rem 0}
.tgl-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.tgl-footer p,.tgl-footer ul{margin:0 0 .7rem}
.tgl-footer ul{list-style:none;padding:0}
.tgl-footer a:hover{color:var(--sand)}
.tgl-footer small{display:block;margin-top:2rem;padding-top:1rem;border-top:1px solid #fff3}
@media(max-width:850px){
  .tgl-header-inner{min-height:76px;flex-wrap:wrap;padding-block:.6rem;gap:.4rem 1rem}
  .tgl-brand img{width:192px}
  .tgl-js .tgl-toggle{display:block}
  .tgl-nav{width:100%}
  .tgl-js .tgl-nav:not(.is-open){display:none}
  .tgl-nav>div>ul,.tgl-nav>ul{display:block}
  .tgl-nav .sub-menu{display:block;position:static;background:transparent;box-shadow:none;padding:.1rem 1rem}
  .tgl-nav .sub-menu a{padding:.25rem 0}
  .tgl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .tgl-wrap{width:calc(100% - 2rem)}
  .tgl-content>.tgl-wide,.tgl-content>.alignwide{width:calc(100vw - 2rem)}
  .tgl-grid,.tgl-split,.tgl-footer-grid{grid-template-columns:1fr}
  .tgl-hero img{object-position:57% center}
}