/* ZWANZIK Store Bochum */
@font-face{font-family:"Fragment Mono";src:url("../fonts/FragmentMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{--bg:#EFEFEF;--ink:#000;--muted:#5C5C5C;--soft:#3D3D3D;--tile:#E3E3E1;--ph:#D9D9D7;--gap:clamp(96px,12vw,176px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Fragment Mono",ui-monospace,Menlo,Consolas,monospace;font-size:15px;line-height:1.5;letter-spacing:.02em}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
img{max-width:100%}
.page{padding:clamp(20px,3vw,44px);max-width:1680px;margin:0 auto}
.up{text-transform:uppercase}
.muted{color:var(--muted)}
.ul{text-decoration:underline;text-underline-offset:4px}

/* Header */
.site-logo{display:block;margin:0}
.site-logo a,.site-logo img{display:block}
.site-logo img{width:100%;height:auto}
.site-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;margin-top:clamp(20px,2.5vw,32px);text-transform:uppercase}
.site-nav{display:flex;flex-wrap:wrap;gap:0 28px}
.lnk{text-decoration:none;display:inline-flex;align-items:center;min-height:32px}
.lnk:hover,.lnk[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}

/* Zeilen: Label links, Inhalt rechts */
.row{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:var(--gap)}
.row--first{margin-top:clamp(80px,10vw,144px)}
.row--tight{margin-top:56px}
.row__label{flex:1 1 220px;margin:0;font-size:inherit;font-weight:400;text-transform:uppercase}
.row__body{flex:3 1 480px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.row__body>*{max-width:62ch}
.row__body p{margin:0}
.section{margin-top:var(--gap)}
.section__head{display:flex;flex-wrap:wrap;gap:16px 32px;margin-bottom:32px;text-transform:uppercase}
.section__head h2{flex:1 1 220px;margin:0;font-size:inherit;font-weight:400}
.section__head p{flex:3 1 480px;margin:0}

/* Fotos */
.photo{position:relative;overflow:hidden;background:var(--ph);display:flex;align-items:flex-end;padding:20px;text-transform:uppercase;color:var(--soft);min-height:440px}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo--hero{margin-top:clamp(48px,6vw,88px);min-height:clamp(280px,40vw,620px)}
.photos{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.photos .photo{flex:1 1 300px;min-height:420px}
.photos--two{margin-top:clamp(48px,6vw,80px)}
.photos--two .photo{flex:1 1 420px;min-height:480px}

/* Brand-Kacheln */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:12px}
.tile{display:flex;flex-direction:column;aspect-ratio:1/1;padding:20px;background:var(--tile);text-decoration:none;transition:background-color .2s ease,color .2s ease}
.tile__logo{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}
.tile__logo img{display:block;max-width:58%;max-height:220px;width:auto;height:auto;transition:filter .2s ease}
.tile__text{flex:1 1 auto;display:flex;align-items:center;justify-content:center;text-align:center;text-transform:uppercase;font-size:clamp(18px,1.8vw,24px);line-height:1.3}
.tile__foot{display:flex;justify-content:space-between;gap:12px;text-transform:uppercase}
.tile:hover,.tile:focus-visible{background:var(--ink);color:var(--bg)}
.tile:hover img,.tile:focus-visible img{filter:invert(1)}

/* Listen und Tabelle */
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;flex-wrap:wrap;gap:4px 32px;border-top:1px solid var(--ink);padding:14px 0}
.list li:last-child{border-bottom:1px solid var(--ink)}
.list .k{flex:1 1 220px;text-transform:uppercase}
.list .v{flex:3 1 480px;color:var(--soft)}
.table-wrap{overflow-x:auto}
.price{width:100%;min-width:560px;border-collapse:collapse;font:inherit;text-transform:uppercase}
.price th,.price td{text-align:left;font-weight:400;padding:14px 16px;border-bottom:1px solid var(--ink)}
.price th{border-top:1px solid var(--ink)}
.price th:first-child,.price td:first-child{padding-left:0;width:25%}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn-solid,.btn-line{display:inline-flex;align-items:center;min-height:46px;padding:0 24px;text-decoration:none;text-transform:uppercase;font:inherit;cursor:pointer}
.btn-solid{background:var(--ink);color:var(--bg);border:0}
.btn-solid:hover{background:var(--soft)}
.btn-line{border:1px solid var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:var(--bg)}

/* Anfahrt */
.anfahrt{display:flex;flex-wrap:wrap;gap:32px;margin-top:var(--gap)}
.anfahrt__info{flex:1 1 220px;display:flex;flex-wrap:wrap;gap:16px 32px;text-transform:uppercase}
.anfahrt__info h2{flex:1 1 220px;margin:0;font-size:inherit;font-weight:400}
.facts{flex:1 1 260px;margin:0;display:flex;flex-direction:column;gap:24px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.map{flex:1.4 1 420px;min-height:440px;background:var(--ph);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding:20px;text-transform:uppercase;text-decoration:none}
.map:hover{background:#CFCFCC}

/* Brand-Seiten */
.crumbs{display:flex;flex-wrap:wrap;gap:16px 32px;margin-top:clamp(64px,8vw,112px);text-transform:uppercase}
.crumbs a{flex:1 1 220px;align-self:flex-start}
.crumbs span{flex:3 1 480px;color:var(--muted)}
.brand{display:flex;flex-wrap:wrap;gap:32px;margin-top:24px}
.brand__logo{flex:1 1 420px;min-height:520px;background:var(--tile);display:flex;align-items:center;justify-content:center;padding:40px}
.brand__logo img{display:block;max-width:60%;max-height:300px;width:auto;height:auto}
.brand__info{flex:1 1 420px;display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.brand__text{display:flex;flex-direction:column;gap:16px;max-width:54ch}
.brand__text h1{margin:0 0 8px;font-size:inherit;font-weight:400;text-transform:uppercase}
.brand__text p{margin:0}
.kv{margin:0;display:flex;flex-direction:column;text-transform:uppercase}
.kv div{display:flex;flex-wrap:wrap;gap:0 24px;border-top:1px solid var(--ink);padding:12px 0}
.kv div:last-child{border-bottom:1px solid var(--ink)}
.kv dt{flex:0 0 160px;color:var(--muted)}
.kv dd{margin:0}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;margin-top:var(--gap);border-top:1px solid var(--ink);padding-top:14px;text-transform:uppercase}

/* Formular */
.form-wrap{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--ink);padding-top:24px}
.form{display:flex;flex-direction:column;gap:18px}
.field-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:4px 32px}
.field-row>label{flex:1 1 220px;text-transform:uppercase;padding-bottom:10px}
.field-row--top{align-items:flex-start}
.field-row--top>label{padding-bottom:0;padding-top:10px}
.field-row .ctrl{flex:3 1 480px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.field{width:100%;min-height:44px;padding:8px 0;border:0;border-bottom:1px solid var(--ink);background:transparent;font:inherit;color:var(--ink);border-radius:0}
textarea.field{min-height:140px;resize:vertical}
.field:focus{outline:none;border-bottom:2px solid var(--ink)}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--soft)}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:0 0 auto}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{margin:0}
.form-status[hidden]{display:none}

/* Footer */
.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:var(--gap);padding-top:14px;border-top:1px solid var(--ink);text-transform:uppercase;font-size:13px}
.site-footer nav{display:flex;flex-wrap:wrap;gap:0 28px}
.site-footer .copy{display:flex;align-items:center;min-height:32px}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}